一 表格的主要作用
表格主要用于显示、展示数据。因为它可以让数据显示得非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理（合理的使用表格也能够有效提高 SEO）。
注意：表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的 “布局”。
特别强调，表格是用于表单数据的 “布局”，而不是页面的布局！
二 表格的基本语法
<table>
<tr>
<td>单元格</td>
...
</tr>
...
</table>
<table></table>是用于定义表格的标签<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中- 字母 td 指表格数据（table data），即：数据单元格的内容
- 单元格 td 里面可以放任何的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- table 包含 tr, tr包含td -->
<table border="1" width="600" height="400">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>孩砸, 真棒啊</td>
</tr>
<tr>
<td>郭德纲</td>
<td>150分</td>
<td>没有郭德纲相声早黄了, 有了郭德纲, 相声更黄了</td>
</tr>
</table>
</body>
</html>
三 表头单元格标签
一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示。
<th> 标签表示 HTML 表格的表头部分（table head 的缩写）。
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
...
</tr>
...
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<tr>
<!-- <td></td> -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<td>99分</td>
<td>真棒, 第二名</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>真棒, 相亲成功</td>
</tr>
</table>
</body>
</html>
四 表格属性
注意：表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可。
以下属性都写在 table 开始标签内，多个属性之间用空格隔开。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
...
</table>
| 属性名 | 属性值 | 描述 |
|---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：style="text-align: center;" 设置）（了解） |
border | 1 或 "" | 规定表格单元是否拥有边框，默认为 “”，表示没有边框（了解） |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认 1 像素（了解） |
cellspacing | 像素值 | 规定单元格之间的空白，默认 2 像素（了解） |
width | 像素值 或 百分比 | 规定表格的宽度（了解） |
height | 像素值 或 百分比 | 规定表格的高度（了解） |
五 表格结构标签
**使用场景：**因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成：表格头部 和 表格主体 两大部分。
在表格标签中，分别用：<thead> 标签表示表格的头部区域，<tbody> 标签表示表格的主体区域，这样可以更好的分清表格结构。
<thead></thead>：用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行，且一般<tr>标签中推荐放置<th>标签<tbody></tbody>：用于定义表格的主体，主要用于放数据本体- 以上标签都是放在
<table></table>标签中
| 属性名 | 属性值 |
|---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
<table>
<!-- 头部区域 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
...
</tr>
</thead>
<!-- 主体区域 -->
<tbody>
<tr>
<td>test</td>
<td>男</td>
<td>18</td>
...
</tr>
...
</tbody>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<!-- <td></td> -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<td>99分</td>
<td>真棒, 第二名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>真棒, 相亲成功</td>
</tr>
</tfoot>
</table>
</body>
</html>
六 合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合并单元格即可。
合并单元格的方式：
- 跨行合并（上下合并）：
rowspan="合并单元格的个数" - 跨列合并（左右合并）：
colspan="合并单元格的个数"
目标单元格：（写合并代码）
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三步曲：
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上
合并方式=合并的单元格数量，比如：<td colspan="2"></td> - 删除多余单元格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<!-- <td></td> -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<td>真棒, 第二名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
</body>
</html>
七 综合案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1</td>
<td colspan="3">234</td>
<!-- <td>3</td> -->
<!-- <td>4</td> -->
</tr>
<tr>
<!-- <td>1</td> -->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
