本次，咱们来解说利用 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元素都有独立的边框。

CSStable, th, td {  border: 1px solid;}

能够利用 border-collapse 属性，把表格的边框折叠成一个繁多的边框。

回到 CSS，再给 table 元素申明款式：border-collapse: collapse。

此时，表格线变细了。

CSStable {  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 元素的对齐形式改为左对齐。

CSSth {  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。

CSSth, td {  padding: 15px;  text-align: left;}

看一下成果，内容和边框线之间就具备了 15px 的填充。

接下来通过给 th 和 td 增加 border-bottom 属性，实现表格的程度分隔线成果。

正文掉原有的 border 属性，给 th 和 td 增加款式：border-bottom: 1px solid #ddd。

CSStable, 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;

CSSth {  background-color: #04AA6D;  color: white;}

这样，通过给 th 增加背景色，使表头的显示更加醒目了。