CSS Table

Using CSS can greatly improve the appearance of HTML tables.

Example

#demo_table tr:nth-child(even){background-color: #f2f2f2;}  
#demo_table tr:hover {background-color: #ddd;}

Table Border

To specify the border of the CSS table, use the border property.

The following example specifies the black borders of the th and td elements of a table:

Example

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

 Try It! 

Please note that the table in the example above has a double border. This is because the table and th/td elements have independent boundaries.

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

Folding Border

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

Example

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

 Try It! 

Table Width and Height

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

The following example is a table with a width of 100% and a height of the th element of 50 pixels:

Example

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

 Try It! 

Table Text Alignment

The text alignment and vertical alignment properties in the table.

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

Example

td
{
    text-align:right;
}

 Try It! 

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

Example

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

 Try It! 

Form Fill

If you need to control the spacing between the border and the table content, you should use the fill attributes of the td and th elements:

Example

td
{
    padding:15px;
}

Try It! 

Table Color

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

Example

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

 Try It! 

More Examples

Create a personalized table
This example demonstrates how to create a personalized table.

Set the position of the table
the table title This example demonstrates how to position the table title.