HTML学习笔记（四）表格标签
表格标签
表格标签用来组织和管理数据
表格标签的应用场景
创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格基本标签如下：
- <table>...</table>：定义一个表格
- <tr>...</tr>：定义表格行，必须嵌套<table>...</table>标签内，有几个tr，代表有几行
- <td>...</td>：定义表格单元格，必须嵌套在<tr>...</tr>标签内，一对<tr>...</tr>中包含几对<td>...</td>，就表示该行中有多少列（或多少个单元格）。
- <th>...</th>：定义表格列标题（表头）
- <caption>...</caption>：定义表格标题
注意：
- <tr></tr>中只能嵌套<td></td>，<th><th>
- <td></td>标签，他就像一个容器，可以容纳所有的元素
代码演示：
<!DOCtype>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
</head>
<body>
<table border="1">
<caption>我是表格标题</caption>
<tr>
<th>我是第一列表头</th>
<th>我是第二列表头</th>
<th>我是第三列表头</th>
</tr>
<tr>
<td >我是第一行第一格</td>
<td >我是第一行第二格</td>
<td>我是第一行第三格</td>
</tr>
<tr>
<td>我是第二行第一格</td>
<td>我是第二行第二格</td>
<td>我是第二行第三格</td>
</tr>
<tr>
<td>我是第三行第一格</td>
<td>我是第三行第二格</td>
<td>我是第三行第三格</td>
</tr>
</table>
</body>
</html>
浏览器显示：
表格属性
代码演示：
<!DOCtype>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
</head>
<body>
<table border="1" cellspacing="3px" cellpadding="5px" width="602px" height="602px" align="center">
<caption>我是表格标题</caption>
<tr>
<th>我是第一列表头</th>
<th>我是第二列表头</th>
<th>我是第三列表头</th>
</tr>
<tr>
<td>我是第一行第一格</td>
<td>我是第一行第二格</td>
<td>我是第一行第三格</td>
</tr>
<tr>
<td>我是第二行第一格</td>
<td>我是第二行第二格</td>
<td>我是第二行第三格</td>
</tr>
<tr>
<td>我是第三行第一格</td>
<td>我是第三行第二格</td>
<td>我是第三行第三格</td>
</tr>
</table>
</body>
</html>
浏览器显示：
合并单元格
- 跨行合并：rowspan
- 跨列合并：colspan
注意事项:
将多个单元格合并的时候，就会有多余的单元格，把它删除。例如：把 3个td合并成一个，那就多余了2个td，需要删除。
代码演示：
<!DOCtype>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
</head>
<body>
<table border="1" cellspacing="3px" cellpadding="5px" width="602px" height="602px" align="center">
<caption>我是表格标题</caption>
<tr>
<th>我是第一列表头</th>
<th>我是第二列表头</th>
<th>我是第三列表头</th>
</tr>
<tr>
<td rowspan="2">我是第一行第一格，我要跨行和第二行第一格合并</td>
<td colspan="2">我是第一行第二格，我要跨列和第一行第三格合并</td>
<!-- <td>我是第一行第三格</td> -->
</tr>
<tr>
<!-- <td>我是第二行第一格</td> -->
<td>我是第二行第二格</td>
<td>我是第二行第三格</td>
</tr>
<tr>
<td>我是第三行第一格</td>
<td>我是第三行第二格</td>
<td>我是第三行第三格</td>
</tr>
</table>
</body>
</html>
浏览器显示：
表格分组
为了方便数据的阅读和检索，有时需要对表格进行分组，HTML中提供了5个数据表分组标签，如下：
表格行分组：
<thead>...</tead>：表格头，定义表格头部区域；
<tbody>...</tbody>：表格主体，定义表格主体区域；
<tfoot>...</tfoot>：表格脚，定义表格脚部区域；
表格列分组：
<col>...</col>：表格列，定义表格列区域；
<colgroup>...</colgroup>：表格列组，定义表格列组；
代码演示：
<!DOCtype>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
</head>
<body>
<h1>表格分组</h1>
<table border="1" align="center">
<caption>表格分组</caption>
<thead>
<tr>
<th rowspan="2">排名</th>
<th rowspan="2">校名</th>
<th rowspan="2">总得分</th>
<th colspan="3">人才培养</th>
<th colspan="3">科学研究</th>
<th rowspan="2" colspan="2">分省排名</th>
<th rowspan="2">学校类型</th>
</tr>
<tr>
<th>得分</th>
<th>研究生培养</th>
<th>本科生培养</th>
<th>得分</th>
<th>自然科学研究</th>
<th>社会科学研究</th>
</tr>
</thead>
<tfoot>
<td colspan="2">汇总</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>清华大学</td>
<td>296.77</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>京</td>
<td>1</td>
<td>理工</td>
</tr>
<tr>
<td>1</td>
<td>清华大学</td>
<td>296.77</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>京</td>
<td>1</td>
<td>理工</td>
</tr>
<tr>
<td>1</td>
<td>清华大学</td>
<td>296.77</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>128.92</td>
<td>京</td>
<td>1</td>
<td>理工</td>
</tr>
</tbody>
</table>
</body>
</html>
浏览器显示：
本文来自博客园，作者：车泽泽，转载请注明原文链接：https://www.cnblogs.com/chezeze/p/13968930.html
浙公网安备 33010602011771号