表格以行列的形式将数据罗列出来，结构紧凑，数据直观，当组织数据较多时，就需要用到表格
表格在网页中有两个作用：
一是布局网页内容
二是组织相关的数据
一、表格概述
一个表格包含行，列和单元格三个组成部分
表格内容分为三个区域：表格页眉，表格主体，表格页脚
表格页眉：存放表头内容
表格主体：存放数据
表格页脚：存放一些注脚内容，汇总数据等
一些标签
| 标签 | 描述 |
|---|---|
| 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! ?
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
