CSS Introduction | Basic CSS Properties | CSS Tables

With CSS, you can create tables in many different forms.

You can apply CSS styles to tables with the following properties.

border Property

The border property sets the border of a table. If this property is not specified, the table has an empty border by default.

<style>
    table, th, td { border: 2px solid orange; }
</style>

In the example above, the table border appears as two lines because the <th> and <td> tags each have their own borders. To make these two-line borders appear as a single line, use the border-collapse property.

border-collapse Property

When the border-collapse property is set to collapse, the table border is displayed as a single line. If this property is not specified, the table displays all borders for each table element by default.

<style>
    table, th, td { border: 2px solid orange; }
    table { border-collapse: collapse; }
</style>

border-spacing Property

The border-spacing property sets the spacing between table elements(th, td).

<style>
    table, th, td { border: 1px solid black; }
    table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }
</style>

text-align Property

The text-align property sets horizontal alignment of text inside table elements(th, td). Inside the <th> tag, center alignment is the default. Inside the <td> tag, left alignment is the default.

<style>
    table, th, td { border: 1px solid black; }
    table { border-collapse: collapse; width: 100%; }
    th { text-align: left; }
    td { text-align: center; }
</style>

vertical-align Property

The vertical-align property sets vertical alignment of text inside table elements(th, td). For both <th> and <td> tags, center alignment is the default.

<style>
    table, th, td { border: 1px solid black; }
    table { border-collapse: collapse; width: 100%; }
    th { vertical-align: top; height: 50px; }
    td { vertical-align: bottom; height: 50px; }
</style>

Examples of Various Table Styles

With CSS, you can style basic HTML tables in much more varied ways.

The following example uses the border-bottom property on the <th> and <td> tags to create a table with only horizontal dividing lines.

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
</style>

The following example uses the :hover selector so that the entire row is highlighted when the mouse is placed over a <tr> tag.

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
    tr:hover { background-color: #F5F5F5; }
</style>

The following example uses the background-color property and the :nth-child selector to set a striped table effect.

<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; }
    tr:nth-child(odd) { background-color: #F3F3F3; }
</style>