CSS Table Styling

Using CSS can make HTML tables more visually appealing.

Company	Contact	Country
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France
The Big Cheese	Liz Nixon	USA
Vaffeljernet	Palle Ibsen	Denmark

Table Borders

To specify table borders using CSS, use the border property.

The following example specifies a black border for the table's th and td elements:

table, th, td {
    border: 1px solid black;
}

Note that the table in the example above has double borders. This is because the table and th/td elements have separate borders.

To display a single border for a table, use the border-collapse property.

Collapsed Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated:

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

Table Width and Height

The width and height properties define the width and height of a table.

The following example sets the table width to 80% and the height of th elements to 60 pixels:

table {
    width: 80%;
}
th {
    height: 60px;
}

Table Text Alignment

Text alignment and vertical alignment properties in tables.

The text-align property sets the horizontal alignment, either left, right, or center:

td {
    text-align: right;
}

The vertical alignment property sets the vertical alignment, such as top, bottom, or middle:

td {
    height: 50px;
    vertical-align: bottom;
}

Table Padding

To control the spacing between the border and the content in table cells, use the padding property for td and th elements:

td {
    padding: 15px;
}

Table Colors

The following example specifies the border color, and the text and background color of th elements:

table, td, th {
    border: 1px solid green;
}
th {
    background-color: green;
    color: white;
}

More Examples

Creating a Personalized Table

This example demonstrates how to create a personalized table:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Personalized Table</title>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}
#customers td, #customers th {
    font-size: 1em;
    border: 1px solid #98bf21;
    padding: 3px 7px 2px 7px;
}
#customers th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}
#customers tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr class="alt">
        <td>Berglunds snabbköp</td>
        <td>Christina Berglund</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr class="alt">
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr class="alt">
        <td>Königlich Essen</td>
        <td>Philip Cramer</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr class="alt">
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>Simon Crowther</td>
        <td>UK</td>
    </tr>
    <tr class="alt">
        <td>Paris spécialités</td>
        <td>Marie Bertrand</td>
        <td>France</td>
    </tr>
</table>
</body>
</html>

Setting Table Caption Position

This example demonstrates how to position the table caption:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS Table Caption Position</title>
<style>
caption {
    caption-side: bottom;
}
</style>
</head>
<body>
<table border="1">
    <caption>Table 1.1 Customers</caption>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Berglunds snabbköp</td>
        <td>Christina Berglund</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>Simon Crowther</td>
        <td>UK</td>
    </tr>
</table>
<p><b>Note:</b> If !DOCTYPE specifies, IE 8 supports the caption-side property.</p>
</body>
</html>