在CSS中,創(chuàng)建表格是一項非常常見的任務(wù)。其中涉及到的制作方式則也有很多種。而其中制作單線表格則是最基本的一種方式。下面我們就來講解一下如何使用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;則是設(shè)置表格的邊框?qū)挾群皖伾_@里的顏色可以根據(jù)實際需求進(jìn)行更改。
th, td則對表格內(nèi)的單元格進(jìn)行樣式設(shè)置。其中包括了邊框?qū)挾龋瑑?nèi)邊距以及文本的水平居中。
除此之外,如果需要給表頭添加背景顏色,可以使用th中的background-color屬性進(jìn)行設(shè)置,這樣可以使表格更加美觀。
最后,可以參照以下代碼進(jìn)行表格的HTML結(jié)構(gòu)
<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制作單線表格的全部內(nèi)容。相比于不使用CSS進(jìn)行表格制作,使用CSS的方式可以提高工作效率,同時也可以使表格更加美觀。
上一篇css表怎么右對齊