前端笔记28——HTML表格

最新推荐文章于 2024-03-18 18:50:29 发布

野生杂学家阿博

最新推荐文章于 2024-03-18 18:50:29 发布

阅读量235

点赞数

分类专栏：前端文章标签：前端表格 table tr HTML

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/84336229

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在很多的网页中我都会见到表格，也就是我们常见的Excel表。比如说用户表、成绩表等在网页中的显示，作用是展示数据。

表格的结构

<table>
	<tr>
		<td></td>
	</tr>
</table>

简单实现一个表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="50%" align="center" cellspacing="0">
			<!--tr表示行-->
			<tr>
				<!--td表示列-->
				<td>id</td>
				<td>用户名</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>user1</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>user2</td>
				<td>女</td>
			</tr>
			<tr>
				<td>3</td>
				<td>user3</td>
				<td>保密</td>
			</tr>
		</table>
	</body>
</html>

复制上面的代码运行在网页中，我们就能实现一个简单的表格了。

水平合并单元格

实现水平合并单元格要在合并的第一个单元格中使用colspan="合并单元格个数"属性，注意合并单元格必须加上自己，从第一个单元格开始数。

垂直合并单元格

实现垂直单元格合并要在合并的第一个单元格中使用rowspan="合并单元格个数"属性，注意合并单元格必须加上自己，从第一个单元格开始数。

设置单元格之间的间隔

设置单元格之间的间隔使用cellspacing="0"属性，一般设置成0，除非有特别的需求。

设置单元格内容居中

设置单元格内容居中align="center"属性。

利用表格知识实现课程表

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>课程表</title>
		<style type="text/css">
			table{
				margin: 0 auto;
				border-spacing: 0;
				width: 50%;
			}
			td{
				border: 1px solid #666;
			}
		</style>
	</head>
	<body>
		<table>
			<!--标题-->
			<tr>
				<td colspan="7" align="center">课程表</td>
			</tr>
			<!--日期-->
			<tr>
				<td></td>
				<td></td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<!--课程安排-->
			<!--第一节课-->
			<tr>
				<td rowspan="4">上午</td>
				<td width="50px">1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="50px">2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="50px">3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="50px">4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="7" align="center">午休</td>
			</tr>
			<tr>
				<td rowspan="4" align="center">下午</td>
				<td width="50px">1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="50px">2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="50px">3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td width="50px">4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>