山地人

课11.Table进阶

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

课11.Table进阶——大纲

在上一次课04.如何做表格中,我们学习了Table的基本使用。这次我们继续深入对Table的学习。

最终,我们会完成一张这样的表格

完整的Table结构

<table>
<!-- 表头 -->
<thead>
...
</thead>
<!-- 表体 -->
<tbody>
...
</tbody>
<!-- 表尾 -->
<tfoot>
...
</tfoot>
</table>

上面是一张相对完整的table表的定义结构,有表头<thead>、表体<tbody>和表尾<tbody>三个部分组成。

在上次课04.如何做表格中,我们使用过的border="1"来显示边框,这次我们换成用样式的方式来定义显示边框。

table,tr,td,th {
border:solid 1px blueviolet;
}

我们用上面的写法来替换,原先的border="1",在样式里除了可以对边框的粗细进行控制,我们还可以对边框的大小的颜色,使用什么样式的边框进行控制。这个比原先的border="1"只能设置一个边框粗细有了更强的控制能力。所以渐渐的border="1"也就逐步被抛弃了。

为了让表格显示得更适合,我在css中设置了表格宽度100%

如何合并单元格

<tr>
<td>午休</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

使用colspan属性把6<td>合并为一个<td>

<tr>
<td colspan="6">午休</td>
</tr>

利用colspan把下面的午休合并成一个单元格

如果你熟悉Excel,上面的这个操作有点像在Excel中进行合并单元格的操作。

这里的colspan就是进行列单元格合并,与之对应的还有rowspan进行行单元格合并。

<tr>
<td rowspan="4">下午</td>
</tr>

利用colspan把下面的午休合并成一个单元格

注意合并列后,每一行都会多出一个单元格需要删去

如何处理单元格之间的间隙

要解决表格中的单元格之间的间隙,我们只需要一条CSS样式规则,就可以搞定

table {
border-collapse: collapse;
}

border-collapse属性决定了表格的边框是分开还是合并。下面是两种对应的样式属性值:

  • separate

这个是表格的默认边框样式——分隔开的边框样式

  • collapse

这种样式,就是边框采用合并边框样式,也就是我们上面CSS样式表中使用的那句。

使用border-collapse属性,处理表格之间的间隙

如何美化表单

添加隔行样式效果

tr:nth-child(even){
background-color: blueviolet;
color:white;
}

上面这条CSS样式规则,我们来详细分析一下:

  • 首先我们是对tr标签进行的定义
  • :nth-clild(even)这一句的意思是对所有的偶数行应用后面{}花括号里的规则。这样我们就可以看到隔行的显示效果

现在顶部的标题会显得比较突兀,我们需要对顶部标题设置一下颜色,但是由于顶部标题是用的thead里的tr中定义的,我们需要增加一个选择器

thead tr:nth-child(1) {
background-color: blueviolet;
color: white;
}

为课表的标题添加样式

这样,顶部也得到了美化样式。这里,我想细心的你一定发现了一些问题。thead tr:nth-child(1) tr:nth-child(even){}花括号里的规则是一样的,我们可以把相同的规则,做一下合并。下面是合并后的CSS样式的写法:

thead tr:nth-child(1),
tr:nth-child(even) {
background-color: blueviolet;
color: white;
}

应用相同规则的两组选择器,我们用,英文逗号把他们分开,他们公用一组样式规则。

为课表添加间隔样式

我们还可以给课表加上一点光标悬浮后的交互效果

tr:hover {
background-color: rgb(59, 9, 106);
color: white;
}

最终我们得到了下面这样最终课表

课程小结

我们回顾下本节课学习的知识点:

  • 完整的表格结构
  • 如何合并横向和纵向的单元格

利用今天学到的表格结构和样式方便的知识,设计一个你喜欢的表格。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。