CSS Table
Using CSS can greatly improve the appearance of HTML tables.
November 2020 | November 2019 | Programming Language | Grade | Change |
---|---|---|---|---|
1 | 2 | C | 16.21% | +0.17% |
2 | 3 | Python | 12.12% | +2.27% |
3 | 1 | Java | 11.68% | -4.57% |
4 | 5 | C++ | 7.60% | +1.99% |
5 | 5 | C# | 4.67% | +0.36% |
6 | 6 | Visual Basic | 4.01% | -0.22% |
7 | 7 | JavaScript | 2.03% | +0.10% |
8 | 8 | PHP | 1.79% | 0.07% |
9 | 16 | R | 1.64% | +0.66% |
10 | 9 | SQL | 1.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; }
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; }
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; }
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; }
The vertical alignment property sets the vertical alignment, such as top, bottom or middle:
Example
td { height:50px; vertical-align:bottom; }
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; }
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; }
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.