HTML之表格相关标签总结

最新推荐文章于 2025-06-08 17:13:28 发布
最新推荐文章于 2025-06-08 17:13:28 发布
阅读量1.9k 收藏 6
点赞数 3
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： HTML之表格相关标签总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IT_Helianthus/article/details/90295253
本文详细总结了HTML中表格相关标签的属性，包括table、tr、td和th的常用属性，如border、width、align、cellspacing、cellpadding、border-collapse等，并介绍了如何通过CSS样式属性替代过时的HTML属性，以实现更灵活的表格布局和样式控制。

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

文章目录

一、概述

HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签用来定义表格；tr标签用来定义表格中的行，它是单元格的容器，每行可以包含多个单元格；td标签和th标签用来定义单元格，所有单元格都在tr标签内，具体的表格内容放置在一对td标签或th标签之中，其语法如下：

<table>
    <tr>
        <th>第1行第1列的内容</th>
        <th>第1行第2列的内容</th>
        …
    </tr>
    <tr>
        <td>第2行第1列的内容</td>
        <td>第2行第2列的内容</td>
        …
    </tr>
    …
</table>

说明：th标签中的内容默认以粗体、居中的方式显示

二、table标签属性

1、border标签属性：设定围绕表格的边框的宽度。

注意：border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；实际开发中不建议使用border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现，示例如下：

<style>
	table{
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

2、width标签属性：设定表格的宽度。

注意：实际开发中，不建议通过width标签属性设置表格宽度，建议向table标签添加width样式属性进行设置，示例如下：

<style>
	table{
		width: 50%;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

3、align标签属性：指定表格相对于周围标签的对齐方式。

该标签属性属性值如下：

值描述
left左对齐表格
right右对齐表格
center居中对齐表格

注意：不建议通过align标签属性设置表格相对于周围标签的对齐方式，建议向table标签添加样式属性进行设置：
a、实现左右对齐可以通过float样式属性实现：

值描述
left元素向左浮动
right元素向右浮动
none默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit规定应该从父元素继承 float 属性的值

b、居中对齐可以通过margin样式属性实现：margin: 0 auto;
示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

4、cellspacing标签属性：设定单元格之间的间距(单位：px)。

注意：不建议通过cellspacing标签属性设置单元格之间的间距，建议向table标签添加border-spacing样式属性进行设置，示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border-spacing: 0;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

5、cellpadding标签属性：设定单元边沿与单元内容之间的间距(单位：px)。

注意：不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距，建议向td或th标签添加padding样式属性来实现，示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border-spacing: 0;
		border: 1px solid black;
	}
	td{
		padding: 30px;
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

6、border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框。

该标签属性属性值如下：

值描述
separate默认值。边框会被分开。注意：不会忽略 border-spacing 和 empty-cells 属性
collapse边框会合并为一个单一的边框。注意：会忽略 border-spacing 和 empty-cells 属性
inherit规定应该从父元素继承 border-collapse 属性的值

示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border-spacing: 0;
		border-collapse: collapse;
		border: 1px solid black;
	}
	td{
		padding: 30px;
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

7、bgcolor标签属性：设置表格背景颜色。

该标签属性属性值如下：

值描述
color_name规定颜色值为颜色名称的背景颜色（比如 “red”）
hex_number规定颜色值为十六进制值的背景颜色（比如 “#ff0000”）
rgb_number规定颜色值为 rgb 代码的背景颜色（比如 “rgb(255,0,0)”）

注意：不建议通过bgcolor标签属性设置表格背景颜色，建议向table标签添加background-color样式属性实现这一效果，示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border-spacing: 0;
		background-color: red;
		border: 1px solid black;
	}
	td{
		padding: 30px;
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述
除了以上table标签常用的标签属性之外，table标签还有frame、rules和summary三个标签属性，但Internet Explorer浏览器不支持frame和rules标签属性，而summary标签属性不会在浏览器中产生任何视觉效果，所以这三个标签属性忽略不说。

三、tr标签属性

1、align标签属性：设置表格行中单元格内容的水平对齐方式。

该标签属性属性值如下：

值描述
left左对齐内容（默认值）
right右对齐内容
center居中对齐内容（th 元素的默认值）
justify对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）
char将内容对准指定字符。注：浏览器不支持该标签属性值

注意：建议向tr标签添加text-align样式属性设置表格行中单元格内容的水平对齐方式，示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	tr{
		text-align: center;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

2、valign标签属性：设置表格行中单元格内容的垂直对齐方式。

该标签属性属性值如下：

值描述
top对内容进行上对齐
middle对内容进行居中对齐（默认值）
bottom对内容进行下对齐
baseline与基线对齐

注意：建议向tr标签添加vertical-align样式属性设置表格行中单元格内容的垂直对齐方式，示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	tr{
		height: 50px;
		vertical-align: top;
		text-align: center;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

3、bgcolor标签属性：设定表格行的背景颜色。

该标签属性属性值如下：

值描述
color_name规定颜色值为颜色名称的背景颜色（比如 “red”）
hex_number规定颜色值为十六进制值的背景颜色（比如 “#ff0000”）
rgb_number规定颜色值为 rgb 代码的背景颜色（比如 “rgb(255,0,0)”）

注意：不建议通过bgcolor标签属性设置表格行的背景颜色，建议向tr标签添加background-color样式属性实现这一效果，示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	tr{
		height: 50px;
		vertical-align: top;
		text-align: center;
		background-color: red;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

四、td(th)标签属性

1、width标签属性与height标签属性：设定单元格的宽度和高度。

该标签属性属性值如下：

值描述
pixels以像素计的高度值（比如 “100px”）
percent以包含元素百分比计的高度值（比如 “20%”）

注意：建议向th标签或td标签添加width样式属性和height样式属性设置单元格宽度和高度，示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
		height: 50px;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

2、valign标签属性：设置单元格内容的垂直对齐方式。

该标签属性属性值如下：

值描述
top对内容进行上对齐
middle对内容进行居中对齐（默认值）
bottom对内容进行下对齐
baseline与基线对齐

注意：建议向th标签或td标签添加vertical-align样式属性设置单元格内容的垂直对齐方式，示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
		height: 50px;
		vertical-align: bottom;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

3、align标签属性：设置单元格内容的水平对齐方式。

该标签属性属性值如下：

值描述
left左对齐表格(默认值)
right右对齐表格
center居中对齐表格
justify对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）
char将内容对准指定字符。注：浏览器不支持该标签属性值

注意：建议向th标签或td标签添加text-align样式属性设置单元格内容的水平对齐方式。示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
		height: 50px;
		text-align: center;
		vertical-align: bottom;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

4、bgcolor标签属性：设定单元格背景颜色。

该标签属性属性值如下：

值描述
color_name规定颜色值为颜色名称的背景颜色（比如 “red”）
hex_number规定颜色值为十六进制值的背景颜色（比如 “#ff0000”）
rgb_number规定颜色值为 rgb 代码的背景颜色（比如 “rgb(255,0,0)”）

注意：建议向th标签和td标签添加background-color样式属性设定单元格背景颜色。示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
		height: 50px;
		background-color: red;
		text-align: center;
		vertical-align: bottom;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

5、colspan样式属性：设置单元格横跨多少列。

示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
		text-align: center;
		height: 50px;
		vertical-align: middle;
	}
</style>
<table>
	<tr>
		<td colspan="3">1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：
在这里插入图片描述

6、rowspan样式属性：设置单元格横跨多少行。

示例如下：

<style>
	table{
		width: 50%;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
		text-align: center;
		height: 50px;
		vertical-align: middle;
	}
</style>
<table>
	<tr>
		<td colspan="3">1</td>
	</tr>
	<tr>
		<td rowspan="2">1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

在这里插入图片描述

绝对都是干货---HTML 列表标签、表格标签详解
一个不知名的程序员
06-08 690
列表标签 作用：给一堆数据列表语义，也就是告诉游览器这一堆数据是一个整体， 一 . 无序标签（使用最多） 1 . 作用：给一堆数据添加列表语义，并且这一堆数据都没有先后之分。 2. 格式： <ul> <li>需要显示的条目内容</li> </ul> 3 . 注意点： 1.<ul>标签是用来添加语义的，而不是用来添加小圆点的。 2.<ul>标签和<li>标签是一个组合，一般都是同时出现的。 二 . 有序列表<ol&gt
表格标签（table、行、列、表头）
09-06 4506
表格标签 一、<table> <table>代表表格标签。 <table></table> 1.width 表示表格宽度，宽度表达方式有像素和百分比两种。网页设计时如果按照像素来设计网页宽度，当网页窗口缩小时，网页大小不会随着窗口的缩小而变化，而会出现上下和左右拉伸条，以观看网站的全部内容。网站设计时如果按照百分比设计网...
HTML5表格标签相关
qq_43812504的博客
11-25 401
制作表格如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格练习</title> </head> <body> <table border="
HTML表格标签的使用
最新发布
CDUFM的博客
06-08 370
HTML表格标签的使用（示列）
html table相关标签
weixin_34405354的博客
07-18 229
html table相关标签 标签意义 <table></table> 表格开始和结束。表格的基本标签之一。示例 <tr></tr> 表格的行。表格的基本标签之一。示例 <td></td> 单元格。表格的基本标签之一。示例 <th></th> 表头单元格...
7.表格标签
potato123232的博客
03-11 4030
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
HTML表格标签
司天宏的博客
01-11 952
基本表格 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/hea
2022年HTML相关知识点表格标签(1).pptx
11-02
HTML 表格标签知识点总结 HTML 表格标签是 HTML 语言中用来创建表格的基本标签，通过这些标签，可以创建出各种形式的表格，满足不同的需求。在本节中，我们将详细介绍 HTML 表格标签的使用方法和相关知识点。 1. ...
HTML标签总结
07-27
### HTML标签总结 #### <a>: 锚点标签 - **功能**：定义超链接，用于从一个页面链接到另一个页面或同一页面内的不同位置。 - **属性**： - `href`：指定链接的目标地址。 - `target`：指定在哪个窗口或框架打开...
深入解析HTML的table表格标签与相关的换行问题
09-28
`<thead>`, `<tfoot>`, 和`<tbody>`是HTML表格的分组标签，它们分别用于定义表格的头部、尾部和主体。这些标签有助于提高表格的可读性和可维护性，特别是在长表格中。`<thead>`和`<tfoot>`可以在表格数据未完全加载...
HTML基础重点_一般标签、常用标签和表格
09-28
总结起来，HTML的基础标签和表格的使用是构建网页的基本技能。理解并熟练掌握这些元素，可以帮助开发者有效地组织和展示网页内容，提供良好的用户体验。在实际开发中，还需要结合CSS和JavaScript等技术，以实现更...
html中常用的标签总结(必看)
12-14
5. **表格标签**： - `<table>`定义一个表格，`<tbody>`用于包裹表格主体内容。 - `<tr>`表示表格行，`<th>`定义表头单元格，`<td>`定义普通数据单元格。 这些标签只是HTML中的一部分，完整的HTML标签集远比这...
表格的相关标签和属性
weixin_30362083的博客
08-13 113
转载于:https://www.cnblogs.com/meetup/p/5768038.html
HTML常用标签总结
weixin_43317111的博客
08-26 216
HTML主体结构 <html> <!--设置html文档相关属性 标题 字符集 网页作者 网页描述 网页关键词 css代码域和javaScript代码域 --> <head> <title>html主体结构复习</title> <!--<meta charset="UTF-8"/>...
表格标签
liupc的学习笔记
03-03 278
表格标签(很重要到一个标签) 操作技巧：首先数数有多少行，然后数每一行有多少单元格。 一、格式 <table border="1" bordercolor="blue" cellspacing="0" width="400" height="150"> //表格的开始 ...
HTML入门学习笔记--表格标签(4)
qq_孤小狼的博客
01-06 840
其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.表格标签格式:<table> <tr> <td>需要显示的内容</td> </tr> </table>其实表格标签中的
理解表格二：其他表格相关标签及属性
rose001的专栏
02-11 901
在 HTML 表格布局（注意：不是用表格进行页面布局）中，除了 tr 和 td 之外，还有以下标签：caption - 表格的标题。 thead - 表头行（行组）。 tbody - 数据行（行组）。 tfoot - 表注行（行组）。 th - 与 td 类似的表元，字体会加粗。 col - 表格列。 colgroup - 表格列组。 下面分别看一下这几个标
HTML——列表+表格标签部分学习心得总结
m0_58822398的博客
06-01 358
列表标签： （1）有序列表 （2）无序列表 （3）自定义列表 表格标签： （1）
2022年HTML表格标签详解及实例
2022年HTML相关知识点表格标签讲解深入...2022年的HTML相关知识点表格标签讲解强调了HTML表格的结构、样式定制和布局控制，对于Web开发者来说，熟练运用这些标签和属性能够有效地构建出美观且功能丰富的数据展示页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值