HTML5笔记006

第06章 表格

6.1 表格简介

在过去的web1.0时代,表格常用于网页布局。但在2.0时代,网页布局都是使用CSS来实现的。
表格的作用是可以清晰地排列数据。

6.2 基本结构

在HTML中,一个表格一般会由以下三部分组成。
表格:table标签
行:tr标签
列:td标签
在<table></table>中,有多少组<tr></tr>,就表示有多少行。在一组<tr></tr>中有多少组<td></td>,就表示一行有多少列;
# 表格的基本结构
<table>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

6.3 完整结构

# 表格标题:<caption></caption>
一个表格只能有一个标题,默认情况下,标题都是位于整个表格内的第一行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>
	<body>
		<table border="1" cellspacing="0" width="100px">
			<caption>表格标题</caption>
			<tr>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
		</table>
	</body>
</html>
# 表头:<th></th>
<th></th>与<td></td>本质上是相同的,都是列标签
<th></th>中的文字以粗体、居中的方式显示在浏览器上,而<td></td>中的文字不会。

6.4 语义化

表头:<thead></thead>
表身:<tbody></tbody>
表脚:<tfoot></tfoot>
这三个标签的作用是使表格结构更加清晰,更好地结合CSS来分块控制样式。

6.5 合并行:rowspan

<th colspan="7" align="center">个人简历</th>

6.6 合并列:colspan

<td rowspan="4" align="center">照片</td>
原文地址:https://www.cnblogs.com/infuture/p/13492137.html