HTML总结2（表格布局）

左水水%

已于 2022-07-25 16:59:45 修改

阅读量233

点赞数 2

文章标签： html 前端 vue.js

于 2022-07-24 16:04:25 首次发布

本文链接：https://blog.csdn.net/weixin_63970667/article/details/125959333

版权

本文介绍了HTML中标签的使用，包括表格的基本结构、属性设置如border、height/width、align、bgcolor等，以及如何通过rowspan和colspan进行单元格的合并。示例代码展示了创建带有表头、主体和页脚的表格，以及设置表格样式和单元格跨行合并的方法。摘要由CSDN通过智能技术生成

一、table标签

1.2table标签的相关属性

1.3表格的合并

一、table标签

table标签是表格布局标签，可以通过表格之间的嵌套合并实现多需要表格

其主要包括的标签为

<table>-----表格标签	<tr>-----行标签
<th>--------表头标签	<td>-----列标签
<thead>-----定义表头	<tbody>---主体内容
<tfoot>-----表格中的表注（页脚）

其主要形式为：

<!DOCTYPE html>
<html>
<head>
	<title>表格标签</title>
</head>
<body>
	<table>
		<thead>
			<tr>
				<td>this text is in the thead</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>this text is in the tbody</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>this text is in the tfoot</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

1.2table标签的相关属性

border--------用于设置表格边框的大小

height\width----用于设置表格的长宽，通过改变<tr><td>,其单位为px和%

align----设置表格的对齐方式left center right

bgcolor-----表示的是表格的背景颜色

background ---- 表示背景图像

cellpadding ----- 表示表格边距（单元格内元素距离单元格边缘的距离）

cellspacing ----- 表示表格间距（单元格与单元格之间的距离）

举一个简单的例子：

<!DOCTYPE html>
<html>
<head>
	<title>练习1</title>
</head>
<body>
	<table width="300" border="1">
		<tr height="40" bgcolor="#cccccc">
		<!-- 表格的高度 由行和列给出高度的最大值决定 -->
			<td height="30">姓名</td>
			<td height="30">班级</td>
			<td height="30">学号</td>
		</tr>		
		<tr height="30" bgcolor="#cccccc">
			<td>张三</td>
			<td>xx3班</td>
			<td>12</td>
		</tr>
</body>
</html>

其结果如下：

1.3表格的合并

rowspan="n"------合并的是行 n表示行数

colspan="n"------- 合并的是列

简单练习一下：

<!DOCTYPE html>
<html>
<head>
	<title>单元格跨行</title>
</head>
<body>
	<table width="300" border="1">
		<tr>
			<td rowspan="3">简介</td>
			<td colspan="2" align="center">xxx班的成绩</td>
		</tr>
		<tr>
			<td>笔试</td>
			<td>面试</td>
		</tr>
		<tr>
			<td>90</td>
			<td>90</td>
		</tr>
	</table>
</body>
</html>

运行结果：