HTML 表格

最新推荐文章于 2026-04-06 16:13:55 发布

原创最新推荐文章于 2026-04-06 16:13:55 发布 · 2.2k 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

Web开发专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解HTML表格的使用，包括表格的基本框架、属性、单元格合并、嵌套、组合及宽度变化。通过实例展示了如何创建和调整表格，适用于网页布局和数据展示。

文章目录

表格简述

表格是一个可自定义的容器，因而它就是我们用以实现页面构设的利器。把表格称作容器缘于表格的装载特性。表格是用于装载数据的，与我们现实中所看到和理解的表格非常一致。表格不仅仅只能装载数据，它还被广泛地应用于网页的布局，这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。页面布局将因使用了表格而可以随心所欲地排版。表格应用场景有用户管理、电商订单等。

表格代码框架

（1）基本框架

<table>
	<tr>
		<td>内容</td>
	</tr>
</table>

<table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。
<tr>：tr 的作用是规定表格的行，其中，t 是table，r 是row（行）。有多少组tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。
<td>：td 的作用是规定表格的列，t 是table，d 可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td 与tr 配合构成单元格。

（2）带表头的表格

<table>
	<tr>
		<th>…</th>
	</tr>
	<tr>
		<td>…</td>
	</tr>
</table>

在这里插入图片描述

<th>：th的作用是规定表格的表头，其中，t 是table，h 是head。th需要被包含在tr当中，也占一行。

（3）带标题的表格

<table>
	<caption>…</caption> <!--表格标题，居中显示-->
	<tr>
		<th>…</th>
	</tr>
	<tr>
		<td>…</td>
	</tr>
</table>

在这里插入图片描述

<caption>：caption的作用是规定表格的标题，它会居中显示。

（4）带结构的表格

表格划分三部分：表头、主体、脚注。

thead：表格的头（放表格的表头）
tbody：表格的主体（放数据本体）
tfoot：表格的脚（放表格的脚注）

<table>
	<caption>…</caption>
	<thead>
		<tr>
			<th>表头</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>主体</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>脚注</td>
		</tr>
	</tfoot>
</table>

表格属性

1.table属性

border：表格边框线宽度。用于指定在边框外围添加的那些不同样式的线段参数。例如：border=1，表示表格边框的粗细为1 个像素（默认值），参数为0 时表示没有边框线。
bordercolor：表格的边框颜色，当border 值不为0 时设置此值有效。取值同bgcolor。
bordercolorlight：亮边框颜色，当border 值不为0 时设置此值有效。亮边框指表格的左边和上边的边框。
bordercolordark：暗边框颜色，当border 值不为0 时设置有效。暗边框指表格的右边和下边的边框。
border-style：边框线样式，表达方式为： style=“border-style: groove;”

cellspacing：单元格间距。用于指定单元格之间的距离参数，当一个表格有多个单元格时，各单元格的距离就是cellspacing 指定的参数值了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。例如：cellSpacing=10；这里的数字10，是指10px。
cellpadding：单元格边距，也可叫做衬距。用于指定该单元格里的内容与cellspacing区域的距离参数。例如：cellpadding=5 ；这里的数字5，是指5px。则表示单元格里的内容与表格周边边框的距离。

width：表格的宽度。取值从0 开始，默认以像素为单位，与显示器的分辨率的像素是一致的。例如：width=“650”。在设置表格的宽度时要充分考虑显示分辨率问题，如果表格设置的像素宽度太大，那么，得出的效果将导致IE 的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容。width的取值还可以使用百分比，例如：widht=“100%”，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。
height：表格的高度，取值方法同width。提示：如果不是特别需要，不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示。

bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000 或bgcolor=red或bgcolor=rgb(0,0,0)。单元格<td>也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。
background：表格的背景图。其值为一个有效的图片地址。<td>也有此属性。

align：表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align 定义的是表格自身的位置，这是一个很有用的属性，强烈建议使用它来规定表格的对齐方式，尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置，因为这么做将导致添加许多废码！此外，当表格的宽度设置为100%，或者，表格的宽度设置成了占满它所在的容器的宽度，没有必要定义align 属性。

frame：规定外侧边框的那个部分是可见的。
rules：规定内侧边框的哪个部分是可见的。

2.tr属性

align：取值有Left、center、right、justify、char。行内容的水平对齐。
valign：取值有top、middle、bottom、baseline。行内容的垂直对齐
bgcolor：取值有rgb(x,x,x)、#xxxxxx、colorname。行的背景颜色。

3.thead/tbody/tfoot属性

align：取值有Left、center、right、justify、char。单元格内容的水平对齐。
valign：取值有top、middle、bottom、baseline。单元格内容的垂直对齐。
bgcolor：取值有rgb(x,x,x)、#xxxxxx、colorname。单元格的背景颜色。
width：取值有%、pixels。单元格的宽度。
height：取值有%、pixels。单元格的高度。

4.td和th属性

align：取值有Left、center、right、justify、char。<thead>、<tbody>和<tfoot> 内容的水平对齐。
valign：取值有top、middle、bottom、baseline。<thead>、<tbody>和<tfoot> 内容的垂直对齐。

单元格合并

colspan属性合并左右单元格，记作：colspan=数值，“数值” 即为需要合并的单元格总数；
rowspan属性则合并上下单元格，记作：rowspan=数值。

先看合并左右的单元格：

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
	<tbody>
		<tr>
			<td align=center colspan=2>1，2 单元格合并了</td>
			<td align=center>3</td>
		</tr>
		<tr>
			<td align=center>4</td>
			<td align=center>5</td>
			<td align=center>6</td>
		</tr>
	</tbody>
</table>

在这里插入图片描述
下面是表格的上下单元格合并：

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
	<tbody>
		<tr>
			<td align=center rowspan=2>1,4 单元格合并了</td>
			<td align=center>2</td>
			<td align=center>3</td>
		</tr>
		<tr>
			<td align=center>5</td>
			<td align=center>6</td>
		</tr>
	</tbody>
</table>

在这里插入图片描述

表格嵌套

作为容器，表格可以往里放置可以放置的元素。表格也是一个元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套还可以是另外的形式，那就是，一个表格的单元格里还有表格。两张表格的嵌套，很简单，把代码复制一下，粘贴在原代码的<td>和</td>之间。试看以下代码和两个表格的嵌套效果：

<table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center>
	<tbody>
		<tr>
			<td>表一
				<table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center>
					<tbody>
						<tr>
							<td>表二</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

在这里插入图片描述

表格组合

表格组合更多的用于布局，需要熟练运用各种技巧，掌握它具有一定的挑战性，但表格组合技巧是一个很有趣的技术。

（1）垂直排列：

要顺利地实现N 张表格的纵向组合，至少有三种方法：

令参与排列的表格都居中（即在<table>里加入align=center）。
不定义表格的对齐属性，即<table>里没有align 属性，这样给出的N 张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，可以在DW 里试试）。
把参与排列的表格放在一张表格里，这张作为容器的外表宽度不限，且里面的表格也不设置align 属性——大家都看得出来，其实它只是第二种实现方法的扩展，其目的是为了让参与排列的表格随心所欲地设置水平对齐。换句话说，外表的作用是为了实现自定义的对齐方式，第三种方法虽然源于第二种，但使用它是个绝好的主意，这个，在使用表格排版过程中，相信会慢慢体会到的。

（2）水平排列：

表格的水平排列更需要精确地计算参与排列的表格的宽度，它们的宽度的总和不能超过其所属容器所能装载的宽度，表格在和其他元素的混排情形下更应该严格考虑。一个好的习惯是：用一张表格来规范并列组合的表格，这张表格，最好宽度设置为100%，然后将里面要并列组合的表格全部设置为左对齐（但注意：它们的宽度总和不能超过可显示的宽度）。

表格宽度的变化

一、表格的border、cellpadding 和cellspacing 虽然都是占位元素，但它们不会使得表格变得更宽。换一个更生动的说法，表格的这些元素是往里占位的，而不是往外占位。

在这里插入图片描述给出一条长度为450 个像素的分隔线，然后在分隔线下面放置一张表格，其宽度亦为450 个像素。现在，我们看到，表格的总宽度仍然是450 个像素（它没有超越分隔线）。

二、表格里面的内容会影响到表格的宽度。

在这里插入图片描述
设定表格的宽度为400 个像素，然后在里面放置一个可视元素，令其宽度为450。我们依然用一条长度为450 个像素的分隔分做参照。现在我们看到，虽然在<table>标签里设定了width=400,但表格的总宽度并不是400 个像素，而是被表格里面的那条分隔线的实际宽度（450 个像素）撑宽了。表格设置了cellpadding 值为10，cellpadding 区域是不可放进任何可视内容的。细心比较一下，将会发现，表格宽出的部分正是留空的部分，即表格的单元格衬距。