HTML 中的Table标签

最新推荐文章于 2025-09-03 23:37:26 发布

原创最新推荐文章于 2025-09-03 23:37:26 发布 · 4.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML 专栏收录该内容

2 篇文章

订阅专栏

HTML 中的Table标签

文章目录

HTML 中的Table标签

Table 标签的介绍

在网页中如果要类似于Excel的方式进行展示数据则需要用到Table标签，在web早期，Table还承担着页面布局的责任，但现在几乎没人再使用Table进行页面布局了，虽然不再使用Table进行布局，但在日常网站对数据进行展示、操作时Table仍占有很高的地位。

Table 标签的书写格式

<table>
    <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
    	</tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
    </tbody>
</table>

如上HTML代码我们可以得到一个这种样式的表格

基本的表格样式

不难发现，这和我们平常所见到的表格不一样，不过先别着急，接下来我们介绍 Table 标签的属性，让我们加上属性后再来观察一下。

Table 及其子标签的属性

Table 的属性
1. border：表示表格边框宽度
2. width：表示表格宽度
3. height：表示表格高度
4. align：表示水平方向的对齐方式
5. bgcolor：表示背景色
6. cellspacing：表示单元格与单元格之间的间距
7. cellpadding：标识单元格与内容的填充
tr 的属性
1. bgcolor：表示背景色
2. align：表示本行文本对齐方式
3. height：标识行高
td 的属性（与 tr 的属性类似，不再另做介绍）
单元格合并
1. 跨列：colspan=“value”
2. 跨行：rowspan=“value”

接下来看一下使用属性后的 Table 吧：

<!DocType html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<title>table的用法</title>
	</head>
	<body>
		<!--
			1. align="center" : 表格相较于父容器进行居中对齐
			2. heght="200" ：表格高度为200px
			3. width="500" : 表格高度为500px
			4. border="1" : 边框为宽度为1px
		 -->
		<table align="center" height="200" width="500" border="1">
			<tr>
				<td>11</td>
				<!-- “12”代表标签内容为12的标签； colspan="2" : 在同一行上（同一个tr中）以12为起点，
				向后合并13（即两个td合并成一个td），所以13需要被注释掉
				因为13被合并成了12的一部分 -->
				<td colspan="2">12</td>
				<!--<td>13</td>-->
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<!-- “22”代表标签内容为22的标签； rowspan="2" : 在同一列上（不同个tr中）以22为起点，
				向后合32（即两个td合并成一个td），所以32需要被注释掉
				因为32被合并成了22的一部分 -->
				<td rowspan="2">22</td>
				<td>23</td>
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				<!--<td>32</td>-->
				<td>33</td>
				<td>34</td>
			</tr>
		</table>
	</body>
</html>

现在我们得到了这样一个表格：

使用属性修饰后的表格

不错，这样已经具备了表格的几分神韵。

使用Table 进行网页布局

虽不常用，但可以了解一下，我们先来看代码示例

左右两栏布局，右侧再分为上下两部分，上部为菜单栏，下部为内容区

<!DocType html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<title>使用Table进行网页布局</title>
	</head>
	<body>
		<table border="1" width="1024" height="600" bgcolor="lightgray" align="center">
			<tr height="40" align="center">
				<td rowspan="2">左侧导航栏</td>
				<td>王者荣耀</td>
				<td>首页</td>
				<td>S28赛季</td>
				<td>新英雄戈娅</td>
				<td>新战令</td>
				<td>新体验</td>
			</tr>
			<tr>
				<td colspan="6" rowspan="2" align="center">内容区</td>
			</tr>
		</table>
	</body>
</html>