马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 17:42 编辑
在线视频：
课程思维导图
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>
span用来制定横跨的列数。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-14 09:47:28
置顶卡
千斤顶
显身卡
发表于 2018-11-30 10:16:59
发表于 2019-2-11 22:24:36
