HTML学习篇（七）表格

最新推荐文章于 2024-01-15 16:57:15 发布

haobrother

最新推荐文章于 2024-01-15 16:57:15 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： table tr td th

本文链接：https://blog.youkuaiyun.com/weixin_44247959/article/details/88622776

学习笔记专栏收录该内容

20 篇文章

订阅专栏

本文介绍了HTML5中创建表格的基本元素，如<table>, <tr>, <td>和<th>，并详细讲解了如何设置表格标题、单元格跨行(rowspan)和跨列(colspan)的方法，以及如何添加表格顶部标题<caption>。" 126444481,7879849,使用Ansible自动化管理华为交换机配置,"['Ansible', '网络配置', '华为设备', 'CLI', '自动化运维']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table>、<tr>、<td>等

在HTML5中，使用table标签来显示表格，tr标签表示表格中的一行内容，而td标签则代表每个表格单元：

<table>
    <tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
    </tr>
    <tr>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	<td>8</td>
    </tr>
</table>

表格标题

另外，一般表格的首行或者首列是作为表头标题以突出对应的行列项，可以使用th标签（跟td同级，被嵌套在tr中）：

<table>
	<tr>
		<th>&nbsp;</th>
		<th>col1</th>
		<th>col2</th>
		<th>col3</th>
		<th>col4</th>
	</tr>
	<tr>
		<th>row1</th>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<th>row2</th>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>

单元格跨越多行或多列

可以使用colspan和rowspan属性来为单元格设置跨越的列数或行数：

<table>
	<tr>
		<th>&nbsp;</th>
		<th>col1</th>
		<th>col2</th>
		<th>col3</th>
		<th>col4</th>
	</tr>
	<tr>
		<th>row1</th>
		<td colspan="3">1</td>
		<td rowspan="2">4</td>
	</tr>
	<tr>
		<th>row2</th>
		<td>5</td>
		<td>6</td>
		<td>7</td>
	</tr>
</table>

可以看到，单元格1占据了原本2和3的空间，而单元格4则占据了原来第二行中8的空间。

表格标题

在table标签开头的下方添加<caption>即可添加表格顶部标题：

<table>
<caption>表格标题</caption>
	<tr>
		<th>&nbsp;</th>
		<th>col1</th>
		<th>col2</th>
		<th>col3</th>
		<th>col4</th>
	</tr>
	<tr>
		<th>row1</th>
		<td colspan="3">1</td>
		<td rowspan="2">4</td>
	</tr>
	<tr>
		<th>row2</th>
		<td>5</td>
		<td>6</td>
		<td>7</td>
	</tr>
</table>