计算机中，表格是一种最常见的数据呈现方式之一。然而常规的表格可能带来样式单调、排版混乱等问题，这时候通常会运用CSS技术来实现表格的美化和布局。下面将从以下几个方面详细介绍如何使用CSS创建表格。
一、基础表格
创建表格前，首先需要了解一些基础的表格元素，包括：table、th、tr、td。其中，table为表格的最外层元素，tr表示表格的一行，th表示表格的表头单元格，td表示表格的数据单元格。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</table>
运行代码，会得到如下基础表格:
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 20 | 男 |
| 李四 | 22 | 女 |
二、表格边框样式
在Basic表格的基础上，可以通过CSS来实现表格的边框样式、宽度、颜色等控制。具体来说，可以通过CSS中的border属性来实现。下面演示一下如何通过CSS设置表格的边框样式为实线，边框宽度为1px，颜色为灰色。
table, th, td {
border: 1px solid grey;
}
代码运行后，基础表格将会变成以下这个样子:
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 20 | 男 |
| 李四 | 22 | 女 |
可以看到，表格的边框样式已经设置成功了。
三、表格内边距和外边距
表格内边距和外边距是控制表格与容器之间和表格内部元素之间距离的重要属性，表格的内边距指的是单元格边缘与单元格中内容之间的距离，而外边距则指的是表格边框和容器之间的距离。
table, th, td {
border: 1px solid grey;
padding: 10px;
margin: 10px;
}
代码运行后，表格将被设置为以下这个样子：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 20 | 男 |
| 李四 | 22 | 女 |
可以看到，表格外部的距离以及单元格的内部距离都被成功设置了。
四、表格背景色和文字居中
表格的背景色和文字居中都是常用的CSS样式设置。下面演示一下如何通过CSS设置表格的背景色为灰色，文本内容居中。
table {
border-collapse: collapse;
background-color: grey;
}
td, th {
text-align: center;
padding: 10px;
}
代码运行后，表格将被设置为以下这个样子：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 20 | 男 |
| 李四 | 22 | 女 |
可以看到，表格的背景色已经被成功设置，并且单元格中的文本都居中显示了。
五、表格宽度和高度
表格宽度和高度也是表格常用的CSS属性设置，通过设置表格的宽度和高度，可以让表格在页面中更加美观、整齐。下面演示一下如何通过CSS设置宽度为100%。
table {
border-collapse: collapse;
background-color: grey;
width: 100%;
}
td, th {
text-align: center;
padding: 10px;
}
代码运行后，表格将会被设置为以下这个样子:
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 20 | 男 |
| 李四 | 22 | 女 |
可以看到，表格的宽度已经被成功设置。
六、合并单元格
有时候表格会因为数据量比较大而显得比较混乱，这时候可能会需要将单元格进行合并，以达到更加美观的效果。下面演示一下如何通过CSS合并单元格。
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
</tr>
</table>
代码运行后，表格将会被设置为以下这个样子:
| 1 | 2 | 3 |
| 4 | ||
可以看到，表格中单元格1和单元格4被成功合并了。
七、小结
通过本文的讲解，我们了解到了CSS创建表格的基础知识、如何设置表格的边框样式、内外边距、背景色、宽度和高度、以及如何合并单元格等技巧。这些技巧可以帮助我们更加方便、快捷地创建出美观、简洁而又实用的表格。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188734.html
微信扫一扫 
支付宝扫一扫 