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.

<!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.

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:

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.

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.

caption {
    caption-side: bottom;
}

Warning:Internet explorer up to 7 doesn’t support caption-side property. IE8 supports only if a <!DOCTYPE> is specified.

CSS Tables