In web pages, we usually use tables to display some data, such as performance tables, financial statements, etc. However, by default, the style of tables is not beautiful and does not even match the style of the page. CSS provides properties that allow you to modify the style of a table and greatly improve its appearance.
1. HTML table border
In the HTML tutorial part, we used the border attribute to set the table. The code is as follows:
<tableborder=1><thead><th>Name</th><th>Gender</th></thead><tbody><tr><td>Zhang San</td><td>Male</td ></tr><tr><td>李思</td><td>Female</td></tr></tbody></table>
Running results:
In fact, this method is not recommended. Because web design follows the principle that HTML represents content, while CSS describes style.
For tables, the content of the table is the text in the rows and columns, and the border is a beautification of the appearance of the table and belongs to the style part, so it is more suitable to be described with CSS.
2. CSS setting table border
You can use CSS border to set the border for the table. The code is as follows:
<!DOCTYPEhtml><html><head><style>table{float:left;}.table_one{border-collapse:separate;}.table_two{margin-left:20px;border-collapse:collapse;}</style> </head><body><tableclass=table_oneborder=1><tr><th>Number</th><th>Name</th><th>Age</th></tr><tr><td >1</td><td>Zhang San</td><td>15</td></tr><tr><td>2</td><td>李思</td><td> 11</td></tr></table><tableclass=table_twoborder=1px><tr><th>Number</th><th>Name</th><th>Age</th></tr ><tr><td>1</td><td>Zhang San</td><td>15</td></tr><tr><td>2</td><td>李思< /td><td>11</td></tr></table></body></html>The running results are as follows:
(1) table-layout: Set the layout algorithm of the table. There are two layout algorithms, namely fixed table layout algorithm and automatic table layout algorithm;
(2) border-collapse: Set whether the borders of cells in the table are merged together or separated according to standard HTML styles;
(3) border-spacing: Set the horizontal and vertical spacing between two adjacent borders when the table borders are separated;
(4) caption-side: Set the position of the table title relative to the table;
(5) Empty-cells: Set whether to display the border of the cell when there is no content in the cell of the table.