表格标签

表格标签<table>是HTML中用于展示数据的重要工具，它以规整、可读性强的方式呈现信息。

<table>
	<caption>
		标题
	</caption>
	<thead>
		<tr>
			<th>表格头部</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>表格主体</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>表格尾部</td>
		</tr>
	</tfoot>
</table>

常用表格标签

标签	说明
<table>	定义整个表格。
<tr>	定义表格中的行。必须嵌套在 <table> 标签中。
<th>	定义表头单元格，通常显示加粗居中的文本。必须嵌套在 <tr> 标签中。
<td>	定义表格中的标准单元格。必须嵌套在 <tr> 标签中。
<caption>	为表格提供标题或说明。
<thead>	定义表格的头部内容。内部必须拥有 <tr> 标签，一般位于第一行。
<tbody>	定义表格的主体内容。
<tfoot>	定义表格的脚部内容。

table标签属性

table属性	属性值	描述
align	left right center	表格整体在页面中的对齐方式
border	1	在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线
cellpadding	像素值	内容与单元格边缘之间的空白，默认1像素
cellspacing	像素值	单元格与单元格之间的空白，默认2像素
width	像素值/百分比	表格的宽度

单元格边框合并

通过CSS，我们可以合并单元格之间的边框，使表格看起来更加整洁。

table {
	border-collapse: collapse;
}

td {
	border: 1px solid pink;
}

合并单元格

合并单元格可以将多个单元格合并成一个单元格，以展示关联数据。

• 跨行合并：使用rowspan属性。以最上侧单元格为目标单元格向下垂直合并
• 跨列合并：使用colspan属性。以最左侧单元格为目标单元格向右水平合并

合并单元格的步骤

1. 确定要合并的单元格数量。
2. 在需要合并的单元格的<td>或<th>标签中添加rowspan或colspan属性，并设置相应的值。
3. 删除多余的单元格，确保表格结构正确。

<table>
	<tr>
		<td colspan="2">1</td>
		<td rowspan="2">4</td>
	</tr>
	<tr>
		<td rowspan="2">2</td>
		<td>3</td>
	</tr>
	<tr>
		<td colspan="2">5</td>
	</tr>
</table>

1		4
2	3
	5

注意：只有在同一结构标签中的单元格才能合并，不能跨<thead>、<tbody>、<tfoot>合并。