html 标签之表格有关的标签表格合并等

最新推荐文章于 2024-03-19 00:47:22 发布

迷茫的鑫

最新推荐文章于 2024-03-19 00:47:22 发布

阅读量403

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/wangxinyang0118/article/details/105511948

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格标签有关的基本标签

	表示表格的范围.
	表格一般由三部分组成
	1.表头 thead
	2.内容 tbody
	3.表尾 tfoot
	这三部分并不一定必须出现在每个表格中.但是每个表格都需要tbody, 如果我们不写tbody直接写内容时, 系统会自动为我们添加一个tbody.

	tr标签 双标签 表示一行
	td, th标签 双标签 表示一个单元格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<!-- 
		表格标签 table 双标签 也是复合标签
		表示表格的范围.
		表格一般由三部分组成
		1.表头 thead
		2.内容 tbody
		3.表尾 tfoot
		这三部分并不一定必须出现在每个表格中.但是每个表格都需要tbody, 如果我们不写tbody直接写内容时, 系统会自动为我们添加一个tbody.

		tr标签 双标签 表示一行
		td, th标签 双标签 表示一个单元格

		我们可以直接给table标签添加边框, table有一个属性border

		清除每一个单元格之间的距离, 给table标签添加cellspacing

		设置每一个单元格内容与边框之间的距离, 给table标签设置cellpadding

		表格里每一列表格的宽度取决于当前列里内容最多的单元格.

		td和th的区别:
		1.th单元格默认文字加粗
		2.th单元格默认文字居中
	 -->
	 <table border="1" cellspacing="0" cellpadding="10">
	 	<thead>
	 		<tr>
	 			<th>第1列</th>
	 			<th>第2列</th>
	 			<th>第3列</th>
	 		</tr>
	 	</thead>
	 	<!-- <tbody> -->
	 		<tr>
	 			<td>单元格1</td>
	 			<td>单元格2</td>
	 			<td>单元格3</td>
	 		</tr>
	 		<tr>
	 			<td>单元格1单元格1单元格1</td>
	 			<td>单元格2</td>
	 			<td>单元格3</td>
	 		</tr>
	 		<tr>
	 			<td>单元格1</td>
	 			<td>单元格2</td>
	 			<td>单元格3</td>
	 		</tr>
	 	<!-- </tbody> -->
	 	<tfoot></tfoot>
	 </table>
</body>
</html>

合并单元格

		合并单元格需要单元格的两个属性
		1.colspan 列合并 横向合并
		2.rowspan 行合并 纵向合并
		
		列 column
		行 row

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>合并单元格</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="20">
		<tr>
			<td colspan="2"></td>
			<!-- <td></td> -->
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td rowspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<!-- <td></td> -->
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td colspan="2" rowspan="2"></td>
			<!-- <td></td> -->
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<!-- <td></td>
			<td></td> -->
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

迷茫的鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 标签之表格有关的标签表格合并等

表格标签有关的基本标签表示表格的范围. 表格一般由三部分组成 1.表头 thead 2.内容 tbody 3.表尾 tfoot 这三部分并不一定必须出现在每个表格中.但是每个表格都需要tbody, 如果我们不写tbody直接写内容时, 系统会自动为我们添加一个tbody. tr标签双标签表示一行 td, th标签双标签表示一个单元格<!DOCTYPE htm...
复制链接

扫一扫