CSS Table


Using CSS can greatly improve the appearance of HTML tables.

November 2020November 2019Programming LanguageGradeChange
12C16.21%+0.17%
23Python12.12%+2.27%
31Java11.68%-4.57%
45C++7.60%+1.99%
55C#4.67%+0.36%
66Visual Basic4.01%-0.22%
77JavaScript2.03%+0.10%
88PHP1.79%0.07%
916R1.64%+0.66%
109SQL1.54%+0.15%

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! 


Examples

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.