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