从0到1HTML+CSS快速上手之表格

最新推荐文章于 2022-08-17 20:08:03 发布

吴鹏_JDZU

最新推荐文章于 2022-08-17 20:08:03 发布

阅读量529

点赞数

分类专栏： web网站开发

本文链接：https://blog.csdn.net/geek_621/article/details/112603288

版权

web网站开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表格的基本结构，包括<table>、<tr>、<td>等标签的用法，并展示了如何创建表格标题和表头单元格。通过<caption>、<th>标签实现表格的标题和表头，进一步探讨了表格的语义化，如<thead>、<tbody>、<tfoot>的使用。同时，解释了如何利用rowspan和colspan属性进行单元格的行合并和列合并，以满足复杂布局的需求。

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

6.2 表格

6.2 基本结构

HTML表格基本机构主要为三个标签，table，tr，td，tr是table row的缩写表格行标签，td是table data cell的缩写，意思是表格单元格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>th表头单元格标签</title>
	</head>
	<body>
		<table>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
			</tr>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
			</tr>
		</table>
	</body>
</html>

<table></table>表示表格的开始和结束，<tr></tr>表示表格行的开始和结束，有多少个<tr></tr>就表示表格有多少行，<td></td>表示表格单元格的开始和结束。

举个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标题</title>
		<style type='text/css'>
			table,tr,td{border:1px solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩表</caption>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
		</table>
	</body>
</html>

6.3 完整结构

6.3.1 caption 标题标签

一般表格都有标题，我们使用<caption></caption>来表示标题。使用模板如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标题</title>
	</head>
	<body>
		<table>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
			</tr>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
			</tr>
		</table>
	</body>
</html>

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标题</title>
		<style type='text/css'>
			table,tr,td{border:1px solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩表</caption>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
		</table>
	</body>
</html>

6.3.2 th标签

th标签是table header cell 的缩写，之表头单元格，只适用于表格的第一行，<th></th>表格行中的字体居中大写。格式如下所示


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>th表头单元格标签</title>
	</head>
	<body>
		<table>
			<tr>
				<th>单元格1</th>
				<th>单元格2</th>
			</tr>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
			</tr>
		</table>
	</body>
</html>

6.4 语义化

thead,tbody,tfoot 将表格分为表头，表身，表脚。使用格式如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格语义化</title>
	</head>
	<body>
		<table>
			<caption>考试成绩表</caption>
			<thead>
				<tr>
					<td>单元格1</td>
					<td>单元格2</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>单元格1</td>
					<td>单元格2</td>
				</tr>
			</tbody>
			<tr>
			<tfoot>
				<td>单元格1</td>
				<td>单元格2</td>
			</tfoot>
		</table>
	</body>
</html>

实例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格语义化</title>
		<style type='text/css'>
			table,tr,td,th{border: 1px solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩表</caption>
			<thead>
				<tr>
					<th>姓名</th>
					<th>语文</th>
					<th>英语</th>
					<th>数学</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小明</td>
					<td>80</td>
					<td>80</td>
					<td>80</td>
				</tr>
				<tr>
					<td>小红</td>
					<td>80</td>
					<td>80</td>
					<td>80</td>
				</tr>
				<tr>
					<td>小杰</td>
					<td>80</td>
					<td>80</td>
					<td>80</td>
				</tr>
			</tbody>
			<tr>
				<td>平均成绩</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			<tfoot>
				
			</tfoot>
		</table>
	</body>
</html>

6.4 合并行和合并列

当我们学要把n个行或者列合并起来的时候，我们就需要用到rowspan和colspan属性

<td rowspan="合并的行数“> </td>表格的纵向合并

<td colspan="合并的列数"></td>表格的横向合并

rowspan距离说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>合并行</title>
		<style type="text/css">
			table,tr,td{border:1px solid silver}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>姓名：</td>
				<td>小明</td>
			</tr>
			<tr>
				<td rowspan="2">喜欢水果：</td>
				<td>苹果</td>
			</tr>
			<tr>
				<td>香蕉</td>
			</tr>
		
		</table>
	</body>
</html>

预览图

colspan举例说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cowspan属性</title>
		<style type="text/css">
			table,tr,td{border: 1px solid silver;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2">前端开发技术</td>
			</tr>
			<tr>
				<td>HTML</td>
				<td>CSS</td>
			</tr>
			<tr>
				<td>JAVASCRIPT</td>
				<td>JQuery</td>
			</tr>
		</table>
	</body>
</html>

预览图