HTML创建表格

制作网页时，使用表格可以更清晰的排列数据，是网页制作中使用最多的形式之一。一、创建并设置表格属性1.表格的基本标记——table、tr、td表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）行：表格中的水平间隔；列：表格中的垂直间隔；单元格：表格中行与列相交所产生的区域。基本语法：...

Life_Duty

11382人浏览 · 2021-07-08 15:44:15

Life_Duty · 2021-07-08 15:44:15 发布

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

一、创建并设置表格属性

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>

效果为：