014 - 数据就应该整整齐齐（下）

不二如是 · 发表于 2018-9-14 09:47:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-6-4 17:42 编辑

上一集：013 - 数据就应该整整齐齐（上）

在线视频：

课程思维导图

猛戳

登录/注册后可看大图

超清

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>6</td>
</tr>
<tr>
<td>7</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>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>

复制代码

游客，如果您要查看本帖隐藏内容请回复

span用来制定横跨的列数。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：015 - 你说hello我说hei

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

w877713458 · 发表于 2018-11-30 10:16:59

JustinZhu · 发表于 2018-12-2 19:55:47

kkkk

lq1989xxyy · 发表于 2018-12-3 15:03:31

支持小甲鱼，小甲鱼快更新啊，等着你的WEB开发课程

cjj735243954 · 发表于 2018-12-14 11:39:58

chenzhiqing · 发表于 2019-2-11 22:24:36

李小控 · 发表于 2019-2-16 17:31:04

每天努力一点

飞奔的上校 · 发表于 2019-3-25 12:54:19

永远燃烧的太阳 · 发表于 2019-3-25 16:45:52

qiaoyiqiao

xieduangduang · 发表于 2019-3-26 20:28:04

紫殇 · 发表于 2019-4-16 17:36:10

6666666666666

讨债仔 · 发表于 2019-5-25 21:31:11

xjyxjy123 · 发表于 2019-7-29 14:22:05

韩某人 · 发表于 2019-8-18 14:30:48

1111

药水哥 · 发表于 2019-8-30 12:05:14

6666666666666666666666666666666666

aa887498 · 发表于 2019-9-4 21:14:42

span用来制定横跨的列数

cc887498 · 发表于 2019-9-6 15:51:15

数据就应该整整齐齐

frihibe · 发表于 2019-9-20 09:13:19

隐藏内容

苏苏请认真学习 · 发表于 2019-10-12 17:38:47

理解了理解了

大风包子 · 发表于 2019-11-17 12:18:46

jangkang

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 014 - 数据就应该整整齐齐（下）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: