HTML中的TABLE标签

最新推荐文章于 2025-07-10 19:10:23 发布

原创最新推荐文章于 2025-07-10 19:10:23 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #table

HTML 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了HTML中的TABLE标签，包括定义和用法、HTML与XHTML的区别、可选属性，以及如何创建带标题和表头的表格、合并行或列、设置背景色和图片。此外，还探讨了表格中的其他标签及其对齐方式，并展示了在单元格中嵌套其他元素的可能性。

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

最近没事想写个小东西计算下自己的收益率。利用表格排版的时候，竟然发现好久不用的table标签忘得一干二净，真是汗颜。这会找找东西，好好整理下，以便自己忘记后可以更快的找到自己需要的。

定义和用法

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

可选的属性

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。如果用在table标签中，规定该表格相对于整个页面的布局。enter表示该表格在页面中居中显示；left表示该表格在页面中居左显示
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。如果没有边框，则border=0
cellpadding	pixels %	规定单元边沿与其内容之间的空白。
cellspacing	pixels %	规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	% pixels	规定表格的宽度。

带标题和表头的表格

caption是表格标题，th是表头，tr是行,td是每行中的单元格

<table border="1">
<caption>测试表格</caption>
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>备注</th>
</tr>
<tr>
  <td>Bill</td>
  <td>555</td>
  <td>555随便输入</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill</td>
</tr>
<tr>
  <th>电话</th>
  <td>555</td>
</tr>
<tr>
  <th>备注</th>
  <td>555随便输入</td>
</tr>
</table>

实际显示效果：

合并行或是合并列

合并行在td或是th标签内用rowspan，合并列在td或是th标签内用colspan

<table border="1">
			<tr>
				<th>文字描述</th>
				<th>输入</th>
				<th>备注</th>
			</tr>
			<tr>
				<td>第一</td>
				<td>第二</td>
				<td>第三</td>
			</tr>
			<tr>
				<td colspan="2">合并两个单元格</td>
				<td>最后一个单元格</td>
			</tr>
			<tr>
				<td rowspan="2">合并两行</td>
				<td>第二列</td>
				<td>第三列</td>
			</tr>
			<tr>
				<td>第二列。。</td>
				<td>第三列。。</td>
			</tr>
		</table>

实际显示结果：

添加背景色或是背景图片

给表格添加背景色（table中用bgcolor）或是背景图片（table中用background）。

<table border="1" bgcolor="red">
<table border="1" background="/i/tst.gif">

给某个单元格或是表头添加背景色（td或th中用bgcolor）或是背景图片（td或th中用background）。

<td bgcolor="red">First</td>
<td background="/i/test.gif">

表格中的其他标签以及对其方式

表格中的对齐方式可以约定行中的内容对齐或是单独对某个单元格中的对齐方式单独设定。可以使用align或使用样式中的text-align。

表格中td中可以填充其他的元素标签。如input，ul，table，div等等

<table border="1">
<caption>测试表格</caption>
<tr>
  <th bgcolor="red" style="text-align: right">姓名</th>
  <th style="text-align: left">电话</th>
  <th>备注</th>
</tr>
<tr align="left">
  <td align="right">Bill</td>
  <td>555</td>
  <td>555随便输入</td>
</tr>
<tr align="left">
	<td>输入电话</td>
	<td><input type="text" style="text-align:right" /></td>
	<td><input type="button" style="text-align:left;width:100px" value="清空" /></td>
</tr>
</table>

实际显示结果如下：