HTML创建表格

本文详细介绍了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>

效果为:

### 回答1: 可以使用以下的HTML代码创建表格: ``` <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> </tbody> </table> ``` 其中,`<table>` 表示创建一个表格。`<thead>` 表示表头部分,`<tbody>` 表示表格主体部分。`<tr>` 表示表格中的一行,`<th>` 表示表头单元格,`<td>` 表示普通单元格。您可以根据需要添加更多的行和列。 ### 回答2: HTML创建表格的代码如下: ```html <!DOCTYPE html> <html> <head> <title>创建表格</title> </head> <body> <h2>表格示例</h2> <table style="width:100%"> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </table> </body> </html> ``` 以上代码会创建一个简单的HTML表格。首先使用`<table>`标签表示表格的开始,然后使用`<tr>`标签定义表格的行,其中`<th>`表示表头单元格,`<td>`表示数据单元格。通过使用`style`属性可以设置表格的样式,例如上述代码中设置了表格宽度为100%。 ### 回答3: HTML 创建表格的代码如下: ```html <table> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> <tr> <td>单元格7</td> <td>单元格8</td> <td>单元格9</td> </tr> </table> ``` 上述代码使用了`<table>`标签来创建表格,`<tr>`标签用于创建表格的行,`<th>`标签用于创建表格的表头单元格,`<td>`标签用于创建表格的普通单元格。 在上面的例子中,表格有3列和4行。第一行是表格的表头,包含3个表头单元格。接下来的三行是普通的数据行,每行都包含3个普通单元格。 你可以根据需要增加或减少行和列,以及修改每个单元格中的内容。此外还可以通过CSS来自定义表格的样式。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值