HTML创建表格

最新推荐文章于 2024-08-21 10:15:37 发布

两条咸鱼儿

最新推荐文章于 2024-08-21 10:15:37 发布

阅读量1.1w

点赞数 23

分类专栏： Html 文章标签： html

本文链接：https://blog.csdn.net/qq_51049931/article/details/118571632

版权

Html 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

本文详细介绍了HTML中创建和设置表格的各种属性，包括表格的基本标记如<table>、<tr>、<td>，以及表格的宽度、高度、标题、表头、对齐方式、边框、单元格间距和边距、背景颜色和图像等属性的使用方法。通过实例代码展示了如何应用这些属性来美化和布局表格，帮助理解HTML表格的结构和样式设计。

摘要由CSDN通过智能技术生成

制作网页时，使用表格可以更清晰的排列数据，是网页制作中使用最多的形式之一。

一、创建并设置表格属性

1.表格的基本标记——table、tr、td

表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）

行：表格中的水平间隔；

列：表格中的垂直间隔；

单元格：表格中行与列相交所产生的区域。

基本语法：

<table>

<tr>

<td>单元格内的文字内容</td>

<td>单元格内的文字内容</td>

<td>单元格内的文字内容</td>

..........

</tr>

<tr>

<td>单元格内的文字内容</td>

<td>单元格内的文字内容</td>

<td>单元格内的文字内容</td>

..........

</tr>

..................................................................

</table>

语法说明：

<table>标记和</table>标记分别表示表格的开始和结束，<tr>和</tr>标记分别表示行的开始和结束，<td>和</td>标记分别表示单元格的开始和结束。在表格里可以有多行和多个单元格。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2"><!--表格没有边框，border="2"是为了方便看-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

2.表格的宽度和高度——width、height

基本语法：

<table width="表格宽度" height="表格高度">............</table>

语法说明：

表格的宽度和高度可以以像素为单位，也可以以“百分比”为单位，如果不设置，则默认宽度自适应。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" width="500" height="200">
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

3.表格的标题——caption

基本语法：

<table>

<caption>表格的标题</caption>

.............................

</table>

语法说明：

caption标签可以为表格提供一个简短的说明，默认情况下，大部分可视化浏览器在表格上方中央显示表格的标题。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的标题</title>
	</head>
	<body>
		<table border="1" width="500" height="250">
			<caption>学生个人信息</caption>
			<!--第一行-->
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>身高</td>
			</tr>
			<!--第二行-->
			<tr>
				<td>01</td>
				<td>鲁班</td>
				<td>男</td>
				<td>155</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>02</td>
				<td>亚瑟</td>
				<td>男</td>
				<td>172</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>03</td>
				<td>妲己</td>
				<td>女</td>
				<td>160</td>
			</tr>
		</table>
	</body>
</html>

效果为：

4.表格的表头——th

基本语法：

<table>

<tr>

<th>表头名称</th>

<td>........</td>

</tr>

............

</table>

语法说明：

表头是指表格的第一行或第一列等对表格内容的说明，文字样式居中、加粗显示，用<th></th>标记来显示。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的标题</title>
	</head>
	<body>
		<table border="1" width="500" height="250">
			<caption>学生个人信息</caption>
			<!--第一行-->
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>身高</th>
			</tr>
			<!--第二行-->
			<tr>
				<td>01</td>
				<td>鲁班</td>
				<td>男</td>
				<td>155</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>02</td>
				<td>亚瑟</td>
				<td>男</td>
				<td>172</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>03</td>
				<td>妲己</td>
				<td>女</td>
				<td>160</td>
			</tr>
		</table>
	</body>
</html>

效果为：

5.表格的对齐方式——align

基本语法：

<table align="对齐方式">.........</table>

语法说明：默认的对齐方式都是向左对齐

align参数取值
属性值	说明
left	整个表格在浏览器页面中左对齐
center	整个表格在浏览器页面中居中对齐
right	整个表格在浏览器页面中右对齐

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的标题</title>
	</head>
	<body>
		<table border="1" width="500" height="250" align="right">
			<caption>学生个人信息</caption>
			<!--第一行-->
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>身高</th>
			</tr>
			<!--第二行-->
			<tr>
				<td>01</td>
				<td>鲁班</td>
				<td>男</td>
				<td>155</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>02</td>
				<td>亚瑟</td>
				<td>男</td>
				<td>172</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>03</td>
				<td>妲己</td>
				<td>女</td>
				<td>160</td>
			</tr>
		</table>
	</body>
</html>

效果为：

6.边框的宽度——border

基本语法：

<table border="边框宽度">.......</table>

语法说明：

通过添加边框的方式可以美化表格，不指定的情况下，表格边框为0，则在浏览器里将不显示。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" >
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

7.表格边框颜色——border color

基本语法：

<table border="边框宽度" bordercolor="边框颜色">.......</table>

语法说明：

为了使表格更好看，能为表格设定不同的颜色边框，默认情况下收灰色的，前提是表格边框宽度不能为0.颜色可以是英文拼写，也可以是进制数。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" bordercolor="yellow">
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

8.单元格间距——cell spacing

基本语法：

<table cellspacing="间距值">..........</table>

语法说明：

单元格的间距以像素为单位。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" bordercolor="#ff0000" cellspacing="12">
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

9.单元格边距——cell padding

基本语法：

<table cellpadding="文字与边框距离值">.........</table>

语法说明：

默认情况下，单元格内的内容会紧贴着表格的边框。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" bordercolor="#ff0000" cellpadding="10">
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

10.表格的背景颜色——bgcolor

基本语法：

<table bgcolor="背景颜色">.........</table>

语法说明：

表格的背景颜色是针对整个表格的，bgcolor定义的颜色可以被行、列或者单元格定义的背景颜色所覆盖。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" bordercolor="#ff0000" cellpadding="15" bgcolor="#AFEEEE">
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

11.表格的背景图像——background

基本语法：

<table background="背景图片地址">..........</table>

语法说明：

背景图像的地址可以是相对地址，也可以是绝对地址

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的基本标记</title>
</head>
<body>
	<table border="2" bordercolor="#ff0000" cellpadding="15" background="images/07.jpg">
		<!--表格没有边框，border="2"是为了方便看,后面可以省略-->
		<tr>
			<td> 第一行第一列单元格</td>
			<td> 第一行第二列单元格</td>
			<td> 第一行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第二行第一列单元格</td>
			<td> 第二行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
		
		<tr>
			<td> 第三行第一列单元格</td>
			<td> 第三行第二列单元格</td>
			<td> 第三行第三列单元格</td>
		</tr>
	</table>
</body>
</html>

效果为：

二、表格的结构标记

1.设计表头样式——thead

基本语法：

<table>

<thead>..........</thead>

</table>

语法说明：

表头样式可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。一个表元素里面只能有一个thead标签。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的标题</title>
	</head>
	<body>
		<table border="1" bordercolor="red" width="500" height="250" align="right">
			<caption>学生个人信息</caption>
			<thead bgcolor="#00FFFF" align="left">
				<!--第一行-->
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>身高</th>
				</tr>
			</thead>
			<!--第二行-->
			<tr>
				<td>01</td>
				<td>鲁班</td>
				<td>男</td>
				<td>155</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>02</td>
				<td>亚瑟</td>
				<td>男</td>
				<td>172</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>03</td>
				<td>妲己</td>
				<td>女</td>
				<td>160</td>
			</tr>
		</table>
	</body>
</html>

效果为：

2.设计表主体样式——tbody

基本语法：

<table>

<tbody>.........</tbody>

</table>

语法说明：

与Thead的用法相似，thead是用于表头修饰，tbody是对表主体设置。一个表元素里只能有一个tbody标签。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的标题</title>
	</head>
	<body>
		<table border="1" bordercolor="red" width="500" height="250" align="right">
			<caption>学生个人信息</caption>
			<thead bgcolor="#00FFFF" align="left">
				<!--第一行-->
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>身高</th>
				</tr>
			</thead>
			<!--第二行-->
			<tbody bgcolor="bisque" align="left">
			<tr>
				<td>01</td>
				<td>鲁班</td>
				<td>男</td>
				<td>155</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>02</td>
				<td>亚瑟</td>
				<td>男</td>
				<td>172</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>03</td>
				<td>妲己</td>
				<td>女</td>
				<td>160</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

效果为：

3.设计表尾样式——tfoot

基本语法：

<table>

........

........

<tfoot>.......</tfoot>

</table>

语法说明：

一个表元素里只能有一个tfoot标签

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的标题</title>
	</head>
	<body>
		<table border="1" bordercolor="red" width="500" height="250" align="right">
			<caption>学生个人信息</caption>
			<thead bgcolor="#00FFFF" align="left">
				<!--第一行-->
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>身高</th>
				</tr>
			</thead>
			<!--第二行-->
			<tbody bgcolor="bisque" align="left">
			<tr>
				<td>01</td>
				<td>鲁班</td>
				<td>男</td>
				<td>155</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>02</td>
				<td>亚瑟</td>
				<td>男</td>
				<td>172</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>03</td>
				<td>妲己</td>
				<td>女</td>
				<td>160</td>
			</tr>
			</tbody>
			<!--末尾-->
			<tr>
			<tfoot bgcolor="chartreuse" align="right">
				<td>王者英雄</td>
				<td>王者英雄</td>
				<td>王者英雄</td>
				<td>王者英雄</td>
			</tfoot>
			</tr>
		</table>
	</body>
</html>

效果为：