HTML中table表总结

最新推荐文章于 2024-05-24 17:50:52 发布

炎魔巴洛克

最新推荐文章于 2024-05-24 17:50:52 发布

阅读量709

点赞数

分类专栏： Java课程

本文链接：https://blog.csdn.net/Liuxiaoyang1999/article/details/101220905

版权

本文详细介绍了HTML中创建表格的基本元素，包括table、tr、th和td标签，并展示了如何通过CSS实现表格的样式美化，包括列合并和行合并。是初学者掌握HTML表格制作的实用教程。

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

引入：

table这个概念，我已经不是第一次遇到了，第一次遇到它是在数据库中，table即表，是对数据进行统计的的一种图形。

HTML中表的实现：

假设我们想在HTML页面中显示一个表，即table，需要了解以下几个标签

（1）table标签

HTML界面中如果像创建一个表，势必就要有相应的table标签，表中有关所有内容的代码都写到table标签中，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table>
			
		</table>
	</body>
</html>

（2）tr标签

tr是table-row的缩写，即在HTML界面中的表中，表是以行为单位元素的，每一行都需要一对tr标签，每一对tr标签再table表中会独自占用一行，且写在同一table标签中的内容在同一行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>河南工业大学</span>
		<table>
			<tr>
			</tr>
		</table>
	</body>
</html>

（3）th标签

th是table-head的缩写，即为table表的表头，也是数据库表中的字段行。以为塌腰占一行，所以td标签要写在tr标签内。如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table>
			<!--tr table row-->
			<tr>
				<!--th table head-->
				<th>序号</th>
				<th>姓名</th>
				<th>联系电话</th>
				<th>家庭地址</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>

页面效果如下：

最低0.47元/天解锁文章

炎魔巴洛克

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML中table表总结

目录引入：HTML中表的实现：（1）table标签（2）tr标签（3）th标签（4）td标签拓展：其他操作：（1）列合并（2）行合并引入：table这个概念，我已经不是第一次遇到了，第一次遇到它是在数据库中，table即表，是对数据进行统计的的一种图形。HTML中表的实现：假设我们想在HTML页面中显示一个表，即table，需要了解以下几个...
复制链接

扫一扫