在CSS中,創建表格是一項非常常見的任務。其中涉及到的制作方式則也有很多種。而其中制作單線表格則是最基本的一種方式。下面我們就來講解一下如何使用CSS制作單線表格。
table {
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
以上代碼是整個表格的樣式文件。其中,
border-collapse:collapse;這一屬性則是將表格的邊框合并成一條線,而非兩條線。
border:1px solid black;則是設置表格的邊框寬度和顏色。這里的顏色可以根據實際需求進行更改。
th, td則對表格內的單元格進行樣式設置。其中包括了邊框寬度,內邊距以及文本的水平居中。
除此之外,如果需要給表頭添加背景顏色,可以使用th中的background-color屬性進行設置,這樣可以使表格更加美觀。
最后,可以參照以下代碼進行表格的HTML結構
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>女</td>
</tr>
</table>
以上就是使用CSS制作單線表格的全部內容。相比于不使用CSS進行表格制作,使用CSS的方式可以提高工作效率,同時也可以使表格更加美觀。
上一篇css表怎么右對齊