web前端学习（八）——HTML5中表格、边框的相关标签设置

已于 2024-04-24 11:23:14 修改
阅读量2.1w 收藏 94
点赞数 19
分类专栏： # 【HTML+CSS+JavaScript】 文章标签： 前端 学习 html5
于 2020-12-24 21:29:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43823808/article/details/111655496
版权
本文介绍了HTML中表格的基本元素和属性，包括表格的创建、边框设置（border属性）、单元格（td/th标签）、标题（caption标签）以及单元格的间距（cellpadding和cellspacing属性）。通过多个实例展示了如何创建无边框、有边框、带有标题和表头的表格，以及如何设置单元格的跨行、跨列、内嵌表格和列表。此外，还讨论了表格的背景颜色和图片设置，以及使用thead、tbody、tfoot组织表格结构。

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

1.HTML中表格边框的相关标签

①表格由 <table> 标签来定义。

②每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

③边框属性通过 <table> 标签中的 border 属性进行设置，其中，border="0"表示无边框，border="1"默认就是带边框。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

④表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

⑤表格的标题使用 <caption> 标签进行定义。

⑥单元格边距通过 <table> 标签中的 cellpadding 属性进行设置，其中，cellpadding="0"表示无边距，cellpadding="10"就是带上了单元格边距。

⑦单元格间距通过 <table> 标签中的 cellspacing 属性进行设置，其中，cellspacing="0"表示无间距，cellspacing="10"就是带上了单元格间距。

下面我们来看10个小实例，这些实例将会运用到以上提到的所有标签及相应的属性。👇👇👇

实例一：无边框的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个无边框的表格</title>
	</head>
	
	<body>
		<h4>这个表格没有边框</h4>
		<table>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
		<hr/>
		<h4>这个表格也没有边框</h4>
		<table border="0">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例二：有边框的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例三：设置表格的水平标题和垂直标题

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>水平标题：</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<th>Sex</th>
				<th>Telephone</th>
			</tr>
			<tr>
				<td>songzihao</td>
				<td>man</td>
				<td>1234567890</td>
			</tr>
		</table>
		<hr/>
		<h4>垂直标题</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<td>songzihao</td>
			</tr>
			<tr>
				<th>Sex</th>
				<td>man</td>
			</tr>
			<tr>
				<th>Telephone</th>
				<td>1234567890</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例四：设置带标题的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<table border="1">
			<caption>Java三大特性</caption>
			<tr>
				<th>序号</th>
				<th>特性</th>
			</tr>
			<tr>
				<td>①</td>
				<td>封装</td>
			</tr>
			<tr>
				<td>②</td>
				<td>继承</td>
			</tr>
			<tr>
				<td>③</td>
				<td>多态</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例五：设置跨行或跨列的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>单元格跨两列</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<th colspan="2">Telephone</th>
			</tr>
			<tr>
				<td>songzihao</td>
				<td>1234567890</td>
				<td>0987654321</td>
			</tr>
		</table>
		<hr/>
		<h4>单元格跨两行</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<td>songzihao</td>
			</tr>
			<tr>
				<th rowspan="2">Telephone</th>
				<td>1234567890</td>
			</tr>
			<tr>
				<td>0987654321</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例六：表格内添加表格或列表及列表项

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<td>
					<p>这是一个段落</p>
					<p>这是另一个段落</p>
				</td>
				<td>这个单元格包含一个表格：
					<table border="1">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>这个单元格包含一个列表
					<ul>
						<li>苹果</li>
						<li>香蕉</li>
						<li>菠萝</li>
					</ul>
				</td>
				<td>Hello world!!!</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例七：设置表格的单元格边距

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>没有单元格边距：</h4>
		<table border="1">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr/>
		<h4>有单元格边距：</h4>
		<table border="1" cellpadding="10">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例八：设置表格的单元格间距 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>没有单元格间距：</h4>
		<table border="1">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr/>
		<h4>单元格间距="0"</h4>
		<table border="1" cellspacing="0">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr/>
		<h4>单元格间距="10"</h4>
		<table border="1" cellspacing="10">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

实例九：创建一个简单完整的表格（thead、tbody、tfoot） 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
		<style>
			thead {background-color: aqua;}
			tbody {background-color: chartreuse;}
			tfoot {background-color: crimson;}
		</style>
	</head>
	
	<body>
		<table border="1">
			<caption><strong>学生成绩单</strong></caption>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>成绩</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>560</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>男</td>
					<td>520</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>总分</td>
					<td colspan="2">1080</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

运行结果如下：

实例十：设置表格及单元格的背景（颜色、图片）

①设置表格的背景图片 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1" background="E:\计算机专业学习资料和文件\HTML\image\tx.jpg">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

②设置表格的背景颜色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1" bgcolor="#00FFFF">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

③设置单元格的的背景图片及颜色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1" bgcolor="#00FFFF">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td bgcolor="#DC143C">row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td background="E:\计算机专业学习资料和文件\HTML\image\tx.jpg">row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

[HTML]Web前端开发技术14（HTML5、CSS3、JavaScript ）鼠标经过图片显示大图 网页标题：表格标签的综合应用——喵喵画网页
ormstq的博客
01-19 1596
鼠标经过图片显示大图 网页标题：表格标签的综合应用
【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-02 1268
TCP的坚固与前端的智慧相遇，让网络的不确定变得可控。你是否经历过更巧妙的重连策略，或是棘手的断连难题？欢迎在评论区分享你的故事，一起加固这座网络的桥，让前端之旅更加稳健。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，
【HTML02】HTML表格语法、细边框实现-附带案例-作业
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-18 2862
将table的border属性设置为1，然后使用CSS的属性border-collapse属性设置为collapse，来合并边框。将table的border属性设置为1，然后使用另外的html表格属性cellspacing来合并边框。​ 找到要跨行的第一个单元格，给他添加rowspan=“要跨的行数，比如2”​ 找到要跨行的第一个单元格，给他添加colspan=“要跨的列数，比如2”​ 找到另外一行的那个单元格，将其删除或注释。​ 找到另外一列的那个单元格，将其删除或注释。​ 创建单元格，td、th。
HTML的表格标签以及表格的使用——一文带你理解与吃透
最新发布
2501_90906984的博客
03-25 704
例如：<table border="1">,其中border="1"属性用于设置表格边框的宽度，取值为0时表格无边框。在网页开发中，HTML提供了一系列专门用于创建表格的标签，通过这些标签的组合，能够搭建出结构清晰、功能丰富的表格。-<td>:定义表格行中的一个单元格，用于放置具体的数据内容，文本、图片、链接等都能嵌入其中。在<table>标签内，通过多个<tr>标签来定义表格的行数。<tr>、<th>、<td>三个标签都有align属性，就是水平对齐方式设置。1、<ul>是识别无序列表标签的一个界限。
html5input输入框设置无边框_Excel中，输入内容自动添加边框是怎么实现的？用条件格式很简单...
weixin_39739234的博客
11-25 503
在我们制作Excel表格的时候，为了表格的美观，我们会给内容区域加上边框线。但有时候我们想在表格的下面添加新的数据，这时候我们又得为新添加的内容重新添加边框线，这样子重复操作确实很麻烦。为了让大家在输入内容的时候可以自动添加边框线，今天我教大家一个技巧——利用条件格式让边框线自动适应内容，从而可以让我们添加新的内容时自动加上边框线。具体操作步骤如下：1、选择一个比内容区域大的区域，在这个区域中设置...
用css样式，为表格加入边框
CTI技术与呼叫中心设计
10-15 1106
 Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。 在右侧代码编辑器中添加如下代码： table tr td,th{border:1px solid #000;} 上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。 结果窗口
html表格边框的设置
热门推荐
wqjsir的专栏
12-28 9万+
html表格边框的设置 这里介绍两种html表格边框的设置方法。 第一种是直接使用表格的border属性设置 第二种是利用表的背景色来设置边框 先来看第一种   源码 直接使用表的 "border" 属性设置边框线 名称 分类 苹果
用CSS为table添加边框
天纵润泽
09-16 859
 在用CSS给表格定义1像素的边框的时候，是个比较棘手的问题，在定义的时候，很容易把边框定义重复了，很多人问过我这个问题，今天我把我为表格添加的方法给大家，其实方法很简单的，就是逻辑关系比较难懂。表格里面的单元格都是四条边的，那这单元格里面的四条边怎么定义好呢？我们拿一个只有四个单元格的表格（下面用1，2，3，4来表示四个单元格）来做模型，我是先定义的两个临边，任意两个临边都可以，
期末前端web大作业——我的家乡陕西介绍网页制作源码
08-10
总之，这份作业涵盖了HTML5、CSS3的基础知识点，同时也提供了一些进阶内容的学习机会，适合于希望深入学习前端开发的学生。通过实践这样的项目，不仅可以巩固已学的知识，还能提高解决实际问题的能力。
Web前端开发 HTML常用标签大全
https://www.hyperplasma.top
08-09 1688
本文全面介绍了HTML的常用标签，包括标签的结构、分类以及具体用法。超文本标记语言通过标签定义网页内容，文中提到双标签和单标签的使用，并示例了HTML文档的基本骨架。还介绍了注释、标题、段落、换行、文本格式化、图像、超链接、音频、视频等常见标签的定义和示例，强调了表单标签在用户信息收集中的重要性，如输入框、下拉菜单和按钮等。此外，文中提到了语义化标签，强调使用有语义的标签能提高网页可读性与结构清晰度。整体而言，文章为前端开发者提供了HTML标签知识的参考，适合初学者理解HTML基本元素及其应用
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
08-10
- **响应式设计**: 虽然该作业未明确提及，但响应式设计是一种让网站适应不同设备屏幕尺寸的设计理念，也是前端开发中非常重要的一个概念。 #### 2. **CSS选择器与伪类的应用** - **选择器**: CSS选择器用于选中...
网页表格边框的设置方法
09-22
前面学了网页表格中的单元格线条的设置方法,今天学习网页表格的边框线的设置方法。--------------------------------------------------------------------------------表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格
table边框设置
08-14
table边框有无的设置 style="border-right:#000000 0px solid;"
web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
08-10
- **网页简介**：这份作品是关于学生个人主页的设计，使用HTML与CSS布局完成，适用于web前端期末大作业或大学生网页设计作业的需求。该网页设计简洁而富有活力，非常适合初学者作为学习资源。 - **编辑工具**：网页...
前端导出表格如何增加边框_Excel中如何自动添加表格边框？
weixin_29790771的博客
01-15 615
Excel制作表格时，一般都会涉及表格边框问题，有些人提前设置好，有些人最后进行设置。如果仅仅是固定的单个表格，那就还好。但是如果是一个活动的表格，内容会逐渐增加的，是否每次都需要重新对新增内容进行表格边框设置呢？答案是否定的，请跟随我了解如何进行操作的吧。1. 选中需要增加边框的表格，可以多选几行。步骤12. 点击“开始”，选择“条件格式”，点击“新建规则”。步骤23. 进入“新建格式规则”页，...
Html5-如何正确给table加边框
菲菲的博客
03-04 1万+
Html5-如何正确给table加边框分析单个属性的效果一、表格边框 border="1"二、cellspacing单元格间距三、cellpadding单元格边距四、去掉表格中table的所有属性值，在css中给table设置五、border-collapse: collapse 边框合并六、分析差别七、分析误区总结一下：Html中table的属性:总结来说，给表格加边框，有两种方式：【注意】 分...
前端如何设置表格边框样式和单元格间距？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-01 1248
合理设置表格的边框样式和单元格间距不仅能让表格看起来更加美观，还能提高数据的可读性。本文将详细介绍如何使用 CSS 来定制表格的外观，包括边框样式和单元格间距，以及一些实际工作中可能会遇到的问题和解决方案。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过本文的介绍和示例，希望你能更好地掌握如何设置表格的边框样式和单元格间距。在长表格中，当滚动页面时，表头往往会消失，这降低了数据的可读性。让表格边框合并为单一的边框，避免出现双线的情况。
HTML中正确设置表格table边框border的三种办法
weixin_37087311的博客
08-07 3984
html中如果设置table的border为1px，实际会产生双线，十分不美观，那么在HTML中如何正确设置表格table边框border呢？第一种方法：　　1、将table的属性设置为：BORDER=0 、cellspacing=1 ；　　2、设置table的背景色为即你要设置的table的边框颜色；　　3、设置所有td...
HTML设置表格边框的方法
ByteProwl的博客
09-29 1142
在HTML中，我们可以使用CSS样式来设置表格的边框。HTML中的表格是网页设计中常用的元素之一，可以用于展示结构化的数据。综上所述，我们可以使用上述两种方法之一来设置HTML表格的边框。上述代码中，我们定义了一个名为"bordered-table"的CSS类，并设置了边框的样式为1像素的黑色实线。通过以上方法，你可以根据需要自定义HTML表格的边框样式，使其符合你的设计要求。上述代码中，我们创建了一个包含两行两列的表格，并在每个单元格中添加了一些文本。属性的值为"1"，表示表格边框的宽度为1个像素。
纯HTML前端开发练习——Web桌面制作教程
标题“前端web桌面（纯HTML编写）”和描述“前端web桌面（纯HTML，css3编写,做了兼容性测试），适合初学者练习”直接指明了该文件是关于使用纯HTML和CSS3技术创建一个类似于桌面环境的Web界面，并且经过了兼容性测试...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贝尔摩德苦艾酒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值