表格以行列的形式将数据罗列出来,结构紧凑,数据直观,当组织数据较多时,就需要用到表格
表格在网页中有两个作用:
一是布局网页内容
二是组织相关的数据
一、表格概述
一个表格包含行,列和单元格三个组成部分
表格内容分为三个区域:表格页眉,表格主体,表格页脚
表格页眉:存放表头内容
表格主体:存放数据
表格页脚:存放一些注脚内容,汇总数据等
一些标签
标签 | 描述 |
---|---|
table | 定义表格 |
caption | 定义表格标题 |
tr | 定义表格的行 |
th | 定义表格的表头 |
td | 定义表格的单元格 |
thead | 定义表格页眉 |
tbody | 定义表格主体 |
tfoot | 定义表格页脚 |
注意:
一个表格只能有一个thead和tfoot,可以有很多个tbody
下面介绍一下表格的结构
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头1</th> <th>表头2</th> <th>表头3</th> ...
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td> <td>数据2</td> <td>数据3</td> ...
</tr>
...
</tbody>
...<!--如果需要的话,此处可添加多个<tbody></tbody>-->
<tfoot>
<td>数据1</td> <td>数据2</td> <td>数据3</td> ...
<!--此处也可用th标签-->
</tfoot>
</table>
二、表格标签
主要讲解一下各个标签的用法
- table标签
定义表格对象,同时可以使用标签属性设置表格的宽度,高度,边框宽度,对齐方式,背景颜色,单元格间距和边距样式
但由于在HTML5中,以上属性都不支持,故我们使用下面的CSS格式化表格 - tr标签
生成表格中行的标签,一个tr标签对对应表格的一行
在HTML5中,所有属性都不支持,故我们使用下面的CSS格式 - td和th标签
标准单元格用td标签对标识,内容默认为居中且以普通格式显示
表头单元格用th标签对标识,内容默认居中加粗表示
注意:
标准单元格可以存放任何数据,包含文本,图片,列表,段落,表单,表格等内容
其一些基本属性只有colspan 和rowspan还可以使用,其它属性也不支持
属性及属性值 | 描述 |
---|---|
colspan numbers | 单元格可横跨的列数 |
rowspan numbers | 单元格可横跨的行数 |
- caption标签
设置表格的标题
在HTML5中,该标签所有属性都不支持,故我们使用下面的CSS格式 - thead和tbody和tfoot标签
这些标签对于这些表格进行分区
thead表头分组
tbody主体内容分组
tfooot页脚分组
当长的表格被打印时,表头和页脚卑鄙打印在包含表格数据的每一张页面
- colspan属性实现单元格跨列合并
可出现在th和td标签中,指定所跨的列数,实现合并同一行的若干个单元格
设置的语法为:
<td colspan="横跨列数">
<th colspan="横跨列数">
- rowspan属性实现跨行操作
可出现在th和td标签中,指定所跨的行数,实现合并同一列的若干个单元格
设置的语法为:
<td colspan="横跨行数">
<th colspan="横跨行数">
- 格式化表格
三、CSS表格属性
属性 | 属性值 | 描述 |
---|---|---|
border-collase | seperate | 默认值,表格边框和单元格边框会分开 |
border-collase | collapse | 表格边框和单元格边框会合并成一个单一的边框 |
border-spacing | length | 规定相邻单元格的边框之间的距离,单位可取px/cm等 |
caption-side | top | 默认值,表格标题显示在表格上面 |
caption-side | bottom | 表格标题显示在表格下面 |
table-layout | automatic | 单元格宽度由单元格内容决定 |
table-layout | fixed | 单元格由表格宽度和单元格宽度决定 |
四、CSS格式化表格
即CSS表格属性虽然得到了期望的细边框,但是宽度,高度,单元格间距,表格的背景等都保持了默认的效果,默认效果也不太美观,故可以进行别的格式化
五、表格各元素display属性值
display属性可以设置标签作为一个盒子的类型,display属性取不同值,决定盒子具有不同类型
六、表格综合案例
- 分析给定的效果实现图,以获得表格结构
分析表格为几行几列,哪些需要合并 - 根据分析得到的表格结构,使用表格标签搭建页面结构
开始搭建几乘几的表格,利用colspan和rowspan实现合并 - 对搭建好的页面结构进行样式设置
先判断样式是否满足,再对细节进行设置,直接在CSS模块内设置即可
在进行了上述的学习,我们可以做出有特色的表格了,大家可以多动手尝试一下
这是我做的一个关于天气预报的
贴上部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="gaozhujun">
<title>表格-天气预报</title>
<link rel="stylesheet" type="text/css" href="master9.css">
</head>
<body>
<div class="container">
<div class="miao">
<p>MIAOV.COM</p>
</div>
<div class="one">
<ul>
<li>
<p class="i">BREEZE</p>
<p class="ii">Beijing</p>
</li>
<li>
<p class="two">21℃</p>
</li>
</ul>
</div>
<div class="biaoge">
<table>
<tr>
<th colspan="2" class="header">日期</th>
<th colspan="2" class="header">天气现象</th>
<th class="header">气温</th>
<th class="header">风向</th>
<th class="header">风力</th>
</tr>
<tr>
<td rowspan="2" class="date">
<p>23日星期六</p> <p>7℃~30℃</p>
</td>
<td class="day">白天</td>
<td class="icon-d">
<img src="太阳2.jpg" width="50" height="35">
</td>
<td class="weather">晴</td>
<td class="tem">高温30℃</td>
<td class="wind">无持续风向</td>
<td class="wind">微风</td>
</tr>
<tr>
<td class="night">夜间</td>
<td class="icon-n">
<img src="多云2.jpg" width="50" height="35">
</td>
<td>多云</td>
<td class="temdi">低温7℃</td>
<td class="wind">无持续风向</td>
<td class="wind">3级风</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第六篇HTML+CSS学习笔记到此结束 cheers! ?