这次来讲解一下CSS在表格装饰上的应用。如何制作表格，我们在HTML课程中已经学过。现在，我们使用样式来使表格更加美观和易于使用。让我们首先学习如何定义表格边框。要在CSS中指定表格的边框，可以使用border属性。让我们举个例子。创建一个tables.html文件和一个tables-style.css文件。在html中构建基本代码并导入外部样式。在正文中写入emmet命令：table>(tr>th2)+(tr>td2)*3，填写一些文字。HTML
| 名师千峰 | 最新作品 |
|---|
| 西西 | 《HTML+CSS前端入门》 |
| 卢荣涛 | 《Vite学习指南》 |
| Kerwin | 《Vue2+Vue3全套教程》 |
在浏览器中预览效果：表格的结构是有的，但是没有边框。你还记得如何通过html属性定义边框吗？你可以在评论中告诉我。现在，让我们通过样式为表格添加边框。定义组选择器表，th，td，声明样式：border：1pxsolid。再看效果，表格线条出现了，但是从外观上看，线条有点粗。这是因为table、th和td元素都有单独的边框。CSStable,th,td{border:1pxsolid;}可以应用bo??rder-collapse属性，将表格的边框折叠成单边框。回到CSS，为表格元素声明样式：border-collapse:collapse。此时，表线变细了。CSStable{border-collapse:collapse;}当前表格看起来很小，如果我们需要一个横跨整个屏幕的表格，如何实现呢？返回到CSS并将样式width:100%添加到表格中。再看效果，窗体横向铺满了整个屏幕。接下来，让我们定义表格的宽度和高度。width和height属性用于定义表格的宽度和高度。让我们试验一下。将table的width属性改为50%，然后声明样式height:70px为th。我们可以看到表格的宽度减少了一半，表格头部的高度也增加到了70px。接下来，让我们设置表格的对齐方式。text-align属性用于设置th或td中内容的水平对齐方式，如左对齐、右对齐或居中对齐。默认情况下，th元素的内容居中对齐，td元素的内容左对齐。要使td元素的内容也居中对齐，您可以使用text-align:center。例如：回到CSS并为td添加样式：text-align:center。此时，td中的所有内容在单元格中横向居中显示。要将内容左对齐，可以使用text-align:left属性。例如，将第th个元素的对齐方式更改为左对齐。CSSth{高度：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的padding。接下来给th和td添加border-bottom属性，实现表格的水平分隔线效果。注释掉原来的border属性，th和td添加样式：border-bottom:1pxsolid#ddd。CSStable,th,td{/*border:1pxsolid;*/}th,td{padding:15px;文本对齐：左；border-bottom:1pxsolid#ddd;}看看，水平分隔线的表格效果就实现了。使用tr上的:hover选择器在鼠标悬停时突出显示表格行。回到CSS，定义选择器tr:hover，并声明样式：background-color:coral。kerou当鼠标滑过每一行时，当前行会高亮显示。我们还可以专门给一行添加背景色，比如给th添加绿色背景。然后分别为th定义一个style：background-color:#04AA6D,color:white;CSSth{背景颜色：#04AA6D；color:white;}这样，通过给th添加背景色，表头的显示更加醒目。
