HTML表格标签及单元格合并

最新推荐文章于 2024-06-06 16:50:10 发布

krisqiu

最新推荐文章于 2024-06-06 16:50:10 发布

阅读量3.6k

点赞数 1

文章标签： HTML

本文链接：https://blog.csdn.net/Darrenchiu/article/details/86768459

版权

表格标签

表格标签学习:

标签
table :声明一个表格
tr:声明一行,设置行高及改行所有单元格的高度.
th:声明一个单元格,表头格.默认居中加黑显示
td:声明一个单元格,默认居左显示原始数据
注意:
行高即改行所有单元格的宽度
单元格的宽度即列宽
属性:
**border:**给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容居边框的距离
cellspacing:设置边框的大小

单元格的合并

单元格的合并:
1.首先确保表格是一个规整的表格（先画完整表格再合并）
2.根据要合并的单元格,找到其所在的源码位置
- 行合并:在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”,并删除其他要合并的单元格完成合并
- 列合并:在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数”,并删除要合并的其他单元格

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格学习</title>
	</head>
	<body>
		<h3>表格绘制</h3>
		<hr />
		<table border="1px" align="center" cellpadding="10px" cellspacing="0px">
			<tr height="50px">
				<th width="100px">科目</th>
				<th width="100px">分数</th>
				<th width="100px">级别</th>
				<th width="150px">说明</th>
			</tr>
			<tr height="50px">
				<td>Java</td>
				<td>100</td>
				<td>8</td>
				<td>面向对象</td>
			</tr>
			<tr height="50px">
				<td>C</td>
				<td>100</td>
				<td>8</td>
				<td>面向过程</td>
			</tr>
		</table>

		<h3>合并</h3>
		<table border="1px" cellpadding="10px" cellspacing="0"  align="center">
			<tr height="50px">
			<th width="100px"></th>
			<th width="100px"></th>
			<th width="200px" colspan="2" rowspan="2"></th>
		<!--	th声明的是表头格，会加粗加黑居中显示-->
			</tr>
			<tr height="50px">
				<td></td>
				<td></td>
		
		
			</tr>
			<tr height="50px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

krisqiu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
HTML表格标签及单元格合并

表格标签表格标签学习:标签table :声明一个表格tr:声明一行,设置行高及改行所有单元格的高度.th:声明一个单元格,表头格.默认居中加黑显示td:声明一个单元格,默认居左显示原始数据注意:行高即改行所有单元格的宽度单元格的宽度即列宽属性:**border:**给表格添加边框width:设置表格的宽度height:设置表格的高度cellpadding:设置内容居边...
复制链接

扫一扫