要繪制一個表格,首先需要構建HTML結構。表格的基本結構是由table、thead、tbody、tfoot和tr等元素組成的。其中,table元素是整個表格的最外層容器,thead、tbody和tfoot元素分別表示表格的頭部、主體和尾部,tr元素表示表格的行,而td和th元素則表示表格的單元格。
<table>
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
</tr>
</thead>
<tbody>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格4</td>
<td>單元格5</td>
<td>單元格6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總計</td>
<td>1000</td>
<td>2000</td>
</tr>
</tfoot>
</table>
構建完HTML結構后,就可以通過CSS樣式進行表格的美化。需要注意的是,表格中的單元格可以通過選擇器 td 或 th 進行樣式的設置。
table{
border-collapse: collapse;
/*表格邊框合并*/
}
td, th{
border: 1px solid black;
padding: 8px;
/*單元格邊框和內邊距*/
}
th{
background-color: #eee;
/*表頭單元格背景顏色*/
}
這里使用了border-collapse屬性,可以使表格邊框合并,即將相鄰單元格的邊框合并為一條,從而達到美化表格的效果。同時,還設置了單元格的邊框和內邊距,并對表頭單元格設置了背景顏色,使表格更加清晰易讀。
上一篇css怎么添加隱藏功能
下一篇css怎么移上去