May 03, 2021 CSS
Using CSS can greatly improve the appearance of HTML tables.
November 2020 | November 2019 | The program 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% |
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
Specify the CSS table border, using the
border
The following example specifies the black border
th
td
elements of a table:
Note that the table in the example above has a bilateral box.
This is because tables
th / td
elements have separate boundaries.
To display a single border for a table, use the
border-collapse
border-collapse
property sets whether the border of the table is collapsed into a single border or separated:
width
and
height
define the width and height of the table.
The following example is a table that sets the height of a 100% width, 50 pixels of th elements:
Text alignment and vertical alignment properties in a table.
Text-align properties set horizontal alignment, like left, right, or center:
Vertical alignment properties set vertical alignment, such as top, bottom, or middle:
If you control the border between spaces in the contents of the table, you should use the fill properties of the td and th elements:
The following example specifies the color of the border, and the text and background color of the th element:
Make a personality table
This example shows how to create a personality table.
Set the location of the table title
This example shows how to locate a table title.
Specify the width and height of the table
This example shows how to specify the height and width of a table.