CSS Table

Using CSS can make HTML tables more aesthetically pleasing.

Table Borders

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

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

Example

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

Note that in the above example, the table 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.

Collapsing Borders

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

Example

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 the table.

The following example sets a table with 100% width and 50 pixels height for th elements:

Example

table 
{
    width:100%;
}
th
{
    height:50px;
}

Table Text Alignment

Text alignment and vertical alignment properties in tables.

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

Example

td
{
    text-align:right;
}

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

Example

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

Table Padding

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

Example

td
{
    padding:15px;
}

Table Colors

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

Example

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

More Examples

Create a Fancy Table

Set the Position of Table Caption