Tables commonly used to present tabular data.
Formatting Tables with CSS
When you build an HTML Table without any styles or attributes, browsers display them without any border. Styling a table with CSS can greatly improve its appearance. You can set the following properties to control the layout and presentation of the table elements.
The border-collapse Property
The border-collapse CSS property selects a table’s border model.
It can accept one of the two values collapse or separate.
- The separated model is the default HTML table border model in which each Adjacent cells have their own distinct borders.
- In the collapsed border model, adjacent table cells share borders.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS border-collapse property</title> <style type="text/css"> table { border-collapse: collapse; } table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Email</th> </tr> <tr> <td>Alax</td> <td>alax@example.com</td> </tr> <tr> <td>Joy</td> <td>joy@example.com</td> </tr> </table> <p><strong>Note:</strong> If a <code><!DOCTYPE></code> is not specified, the <code>border-collapse</code> property can produce unexpected results in IE8 and earlier versions.</p> </body> </html> |
The border-spacing Property
The border-spacing CSS property sets the spacing between adjacent table cells borders using the separated borders model.
The border spacing can be specified using one or two length values.
- If two values are given, the first sets the horizontal spacing, and the second sets the vertical spacing. For example,
border-spacing: 10px 20px;. - If only one value is given, it sets both the horizontal and vertical spacing to the specified value. For example,
border-spacing: 10px;.
The style rules in the example below sets 10px of horizontal spacing and 20px of vertical spacing between the cells of the table element.
| 1 2 3 4 5 | table { width: 400px; border-spacing: 10px 20px; border-collapse: separate; } |
The table-layout Property
The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns. Two table layout algorithms are available: automatic and fixed.
This property can take one of the following values:
- auto: Use an automatic table layout algorithm. With this algorithm, the width of the table and its cells depends on the content of the cell.
- fixed: Use the fixed table layout algorithm. With this algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing.
- and
inherit.
The following style rule indicates that the table is laid out using the fixed layout algorithm:
| 1 2 3 4 | table { width: 300px; table-layout: fixed; } |
Without fixed value of the table-layout property, on large tables, users won’t see any part of the table until the browser has rendered the whole table.
Tip:You can optimize table rendering performance by specifying the table-layout property. Fixed value of this property causes the table to be rendered one row at a time, providing users with information at a faster pace.
The empty-cells Property
The empty-cells CSS property controls the rendering of the borders and backgrounds of cells that have no visible content in a table that’s using the separated borders model.
This property can take one of the three values: show, hide or inherit.
The following style rule hides empty cells in the table element.
| 1 2 3 4 | table { border-collapse: separate; empty-cells: hide; } |
The caption-side Property
The caption-side CSS property sets the vertical position of a table caption box.
The following style rule positions the table captions below their parent table. However, to change the horizontal alignment of the caption text, you can use the text-align property.
| 1 2 3 | caption { caption-side: bottom; } |
Warning:Internet explorer up to 7 doesn’t support caption-side property. IE8 supports only if a
<!DOCTYPE>is specified.
