表格标签 [HTML][web前端]

最新推荐文章于 2024-04-19 20:39:07 发布

96岁对抗java

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量890

点赞数 1

分类专栏： web前端文章标签： html5 css web

本文链接：https://blog.csdn.net/m0_57001006/article/details/124138124

版权

web前端专栏收录该内容

91 篇文章 1 订阅

订阅专栏

表格标签

我们一般会使用到的表格标签(如下:)

table标签: 表示表

table中的border属性用于给表添加边框,添加的边框的单位是像素
table中的width属性和height属性用于指定表的大小
table标签中的bgcolor属性用于设置表的背景颜色
table标签中cellspacing属性用于修改单元格之间的外边距的大小
- 我们在css中将一个框与一个框之间的边距称之为外边距

tr标签 : 表行

tr标签也有bgcolor属性用于设置表的背景颜色

th标签 : 表头

注意: 其实表头就是一个特殊的单元格,那么表头特殊在哪里?
- 我们的表头中的内容默认都是加粗和居中的

td标签 : 单元格

补充:

表格中一个单元格的高度的变化会影响这一行的高度的同步变化

表格中一个单元格的宽度的变化会影响这一列的宽度的变化

因为上面的原因导致我们的表格中往往单元格的大小是受限制的,所以我们对于有的要占多个行或者多个列的单元格我们就要进行单元格的合并,那么如何进行单元格的合并?
- rowspan表示合并一列中的多行
- colspan表示合并一行中的多个列

我们可以使用表格标签绘制一个如下的表格:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdWVM4wj-1649780093656)(E:\非凡英才\web前端开发\web前端图示\web前端表设计.png)]

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border = "1" cellspacing = "0" bgcolor = "aqua">
			<tr>
				<th colspan="4">
					2022年期末考试成绩表
				</th>
				<th rowspan="2">
					备注
				</th>
				
			</tr>
			<tr>
				<th width="50">
					学生姓名
				</th>
				<th width="50">
					语文
				</th>
				<th width = 50"">
					数学
				</th>
				<th width = "50">
					英语
				</th >
			</tr>
			<tr>
				<td>
					李四
				</td>
				<td>
					100
				</td>
				<td>
					70
				</td>
				<td>
					88
				</td>
				<td>
					哈哈
				</td>
			</tr>
			<tr>
				<td>
					王五
				</td>
				<td>
					78
				</td>
				<td>
					90
				</td>
				<td>
					56
				</td>
				<td>
					哈哈
				</td>
			</tr>
			<tr>
				<td>
					张三
				</td>
				<td>
					100
				</td>
				<td>
					90
				</td>
				<td>
					88
				</td>
				<td>
					哈哈
				</td>
			</tr>
				
		</table>
	</body>
</html>

96岁对抗java

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格标签 [HTML][web前端]

表格标签我们一般会使用到的表格标签(如下:)table标签: 表示表table中的border属性用于给表添加边框,添加的边框的单位是像素table中的width属性和height属性用于指定表的大小table标签中的bgcolor属性用于设置表的背景颜色table标签中cellspacing属性用于修改单元格之间的外边距的大小我们在css中将一个框与一个框之间的边距称之为外边距tr标签 : 表行tr标签也有bgcolor属性用于设置表的背景颜色th标签 : 表头注意:
复制链接

扫一扫