014 - 数据就应该整整齐齐（下）
本帖最后由 不二如是 于 2021-6-4 17:42 编辑上一集：013 - 数据就应该整整齐齐（上）
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=15
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、表格背景色
通过css的background属性，我们可以用来设置背景色。
一个简单的表格：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<style>
table,th,td{
border: 1px solid black;
}
table{
border-collapse: collapse;
}
</style>
<body>
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
</body>
</html>
上面的代码中，如果关于表格的部分有任何不理解，请回看上一讲哦～
现在为表头，th元素添加背景色和字体颜色：
th{
background: gray;
color: white;
}
课程中的例子是一个二维表格，第一行和第一列都是表头th元素：
<table>
<tr>
<th>表头01</th>
<th>表头02</th>
<th>表头03</th>
</tr>
<tr>
<th>表头11</th>
<td>数据12</td>
<td>数据13</td>
</tr>
<tr>
<th>表头21</th>
<td>数据22</td>
<td>数据23</td>
</tr>
</table>
添加上面的th样式后：
2、thead+tbody+tfoot元素
在上面这种横纵都有th表头的表格，怎么实现甲方粑粑说“只要第一行th带背景色”。
很简单通过语义话标签，将表格分为两个部分：
<table>
<thead>
<tr>
<th>表头01</th>
<th>表头02</th>
<th>表头03</th>
</tr>
</thead>
<tbody>
<tr>
<th>表头11</th>
<td>数据12</td>
<td>数据13</td>
</tr>
<tr>
<th>表头21</th>
<td>数据22</td>
<td>数据23</td>
</tr>
</tbody>
</table>
thead只是用来定义表格的表头，没有任何样式上的变化。
tbody用来定义表格主体内容。
修改css样式，将th{}修改为父子选择器（后续CSS会介绍到，先模仿）：
thead th{
background: gray;
color: white;
}
上面的样式就是为thead元素下的th元素设置样式。
其他不属于这个范围的th元素都不会设置相应的样式。
tfoot元素放在最后：
<tfoot>
<tr>
<td>金主爸爸惹不起</td>
</tr>
</tfoot>
有点诡异，怎么跨行呢，请继续看下去。
3、colspan+rowspan属性
上面最后添加的tfoot元素，为什么这么诡异呢？
如果可以横跨3列，岂不就很美了。
对于td和th元素有两个属性：colspan、rowspan
先来看colspan跨列，我们设置：
<tfoot>
<tr>
<td colspan="3">金主爸爸惹不起</td>
</tr>
</tfoot>
横跨3列，这样效果就美美哒了。
rowspan跨行，我们换个新例子：
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
我们需要让表格2上下占满，即横跨三列。
设置为：
<tr>
<th>1</th>
<th rowspan="3">2</th>
<th>3</th>
</tr>
可以是可以了，但是其他两行的元素被挤飞了。
我们手动删除：
<table>
<tr>
<th>1</th>
<th rowspan="3">2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<!--<td>5</td>-->
<td>6</td>
</tr>
<tr>
<td>7</td>
<!--<td>8</td>-->
<td>9</td>
</tr>
</table>
4、col、colgroup
col和colgroup元素组合来批量设置指定列的样式。
就拿上面的table来说，前两列设置为红色背景色，最后一列设置为绿色。
在table元素下添加：
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:green">
</colgroup>
<tr>
<th>1</th>
<th rowspan="3">2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<!--<td>5</td>-->
<td>6</td>
</tr>
<tr>
<td>7</td>
<!--<td>8</td>-->
<td>9</td>
</tr>
</table>
**** Hidden Message *****
span用来制定横跨的列数。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：015 - 你说hello我说hei
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
123 kkkk 支持小甲鱼，小甲鱼快更新啊，等着你的WEB开发课程 233 {:10_256:} 每天努力一点 回复 qiaoyiqiao 1 6666666666666 {:5_90:} 1 1111 6666666666666666666666666666666666 span用来制定横跨的列数 数据就应该整整齐齐 隐藏内容 理解了理解了
jangkang