共计 2036 个字符，预计需要花费 6 分钟才能阅读完成。
本次，咱们来解说利用 CSS 来装璜表格。
如何制作一个表格，咱们在 HTML 课程中曾经学习过了。当初，咱们通过款式，让表格变得更加好看易用。
首先来学习如何定义表格边框。
要在 CSS 中指定表格的边框，能够应用 border 属性。咱们来举个例子。
创立 tables.html 文件和 tables-style.css 文件。在 html 里构建根底代码，引入内部款式。
在 body 里编写 emmet 命令：table>(tr>th2)+(tr>td2)*3，填入一些文本。
HTML
<table>
<tr>
<th> 千锋名师 </th>
<th> 最新作品 </th>
</tr>
<tr>
<td> 浠浠呀 </td>
<td>《HTML+CSS 前端入门》</td>
</tr>
<tr>
<td> 陆荣涛 </td>
<td>《Vite 学习指南》</td>
</tr>
<tr>
<td>Kerwin</td>
<td>《Vue2+Vue3 全套教程》</td>
</tr>
</table>在浏览器里预览成果：表格的构造有了，还没有边框。大家还记得如何通过 html 属性定义边框吗？能够评论上通知我。
当初，咱们通过款式来给表格增加边框。定义群组选择器 table, th, td，申明款式：border: 1px solid。
再看成果，表格线呈现了，可是外观上看，线条有点粗。是因为 table、th 和 td 元素都有独立的边框。
CSS
table, th, td {border: 1px solid;}
能够利用 border-collapse 属性，把表格的边框折叠成一个繁多的边框。
回到 CSS，再给 table 元素申明款式：border-collapse: collapse。
此时，表格线变细了。
CSS
table {border-collapse: collapse;}以后表格看起来很小，如果咱们须要一个横跨整个屏幕的表格，该如何实现呢？
回到 CSS，再给 table 增加款式 width: 100%。
再看一下成果，表格横向撑满了整个屏幕。
接下来，咱们来定义表格的宽度和高度。
width 和 height 属性用来定义表格的宽度和高度。咱们来试验一下。
将 table 的 width 属性批改为 50%，再给 th 申明款式 height: 70px。
咱们看，表格宽度放大了一半，同时表头的高度也变大到 70px 了。
接下来，咱们来设置表格的对齐形式。
text-align 属性用来设置 th 或 td 中内容的程度对齐形式，如居左、居右或居中对齐。默认状况下，th 元素的内容是居中对齐的，td 元素的内容是左对齐的。要使 td 元素的内容也居中对齐，能够应用 text-align: center。举个例子：
回到 CSS，给 td 增加款式：text-align: center。
此时，全副 td 里的内容在单元格里程度居中显示了。
要使内容左对齐，能够应用 text-align: left 属性。
比方将 th 元素的对齐形式改为左对齐。
CSS
th {
height: 70px;
text-align: left;
}vertical-align 属性用来设置 th 或 td 中内容的垂直对齐形式。如顶部对齐、底部对齐或两头对齐。默认状况下，对于 th 和 td 元素，表格中内容的垂直对齐形式是两头对齐。举个例子：
回到 CSS，给 td 增加款式：height: 50px，vertical-align: bottom。
咱们看，td 单元格里的内容垂直底部对齐了。
接下来，给表格增加内填充、程度分隔线、鼠标滑过高亮及色彩等款式。
要管制表格中边框和内容之间的空间，能够给 td 和 th 元素设置 padding 属性。
回到 CSS，先正文掉 th 和 td 的款式。定义选择器 th, td，申明款式：padding: 15px，text-align: left。
CSS
th, td {
padding: 15px;
text-align: left;
}看一下成果，内容和边框线之间就具备了 15px 的填充。
接下来通过给 th 和 td 增加 border-bottom 属性，实现表格的程度分隔线成果。
正文掉原有的 border 属性，给 th 和 td 增加款式：border-bottom: 1px solid #ddd。
CSS
table, th, td {/* border: 1px solid; */}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}咱们看，程度分隔线的表格成果就实现了。
在 tr 上应用 :hover 选择器，在鼠标移过期突出显示表格的行。
回到 CSS，定义选择器 tr:hover，申明款式：background-color: coral。kerou
当鼠标滑过每一行时，以后行就高亮显示了。
咱们也能够专门给某一行增加背景色，比方给 th 增加一个绿色背景。
再独自给 th 定义款式：background-color: #04AA6D，color: white;
CSS
th {
background-color: #04AA6D;
color: white;
}这样，通过给 th 增加背景色，使表头的显示更加醒目了。