HTML表格布局与合并详解：从基础到实战应用-CSDN博客

本文链接：https://blog.csdn.net/zhaxideilei/article/details/117342699

1.0 table标签

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

<table>表格标签

<tr>行标签

<th>表头标

<td>列标签

<thead>定义表头

<tbody> 元素用于对 HTML 表格中的主体内容进行分组

< tfoot> 元素用于对 HTML 表格中的表注（页脚）

通过如图方式实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格布局</title>
</head>
<body>
<table border="1">
	<tr>
		<th>序号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>信仰</th>
	</tr>
	<tr>
		<td>1</td>
		<td>张三</td>
		<td>男</td>
		<td>无</td>
	</tr>

	<tr>
		<td>2</td>
		<td>王四</td>
		<td>男</td>
		<td>伊斯兰</td>
	</tr>

	<tr>
		<td>3</td>
		<td>赵一</td>
		<td>女</td>
		<td>耶稣教</td>
	</tr>
</table>
	
</body>
</html>

1.2table常用属性

border---用于设置表格边框的大小，用正整数设定，正整数越大表格边框越大。

height\width---用于设置表格的长宽，此设定只能改变<tr>和<td>，单位是px和%。如果行和列都设置了不同的高宽则取最大值。

align---用于设置表格的对齐方式，对齐方式一共有三种，分别是：left左对齐（默认），right右对齐，center中间对齐。

bgcolor---用于设定表格的背景颜色，具体颜色可参照颜色表。

background---用于设定表格的背景图案，当同时设定了背景颜色和背景图案时，显示背景图案。

cellpadding---用于设定表格的单元格和边距之间的距离。

cellspacing---用于设定表格的单元格和单元格之间的距离。

2.0表格的合并和嵌套

合并：<table>表格的合并有两个属性分别是：colspan---即合并列向单元格。rowspan---即合并横向单元格。

嵌套：表格的单元格里面也可以包含其他的HTML元素，只要它们全部包含于单元格内即可。当一个表格的单元格内是另一个表格时，就创建了一个“嵌套表格”，同理也可以通过与form表单结合来实现更加整洁美观的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格嵌套和合并</title>
</head>
<body>
	<table width="500" border="1">
		<tr>
			<td colspan="4" align="center">顺丰快递</td>
		</tr>
	    <tr>
			<td rowspan="2">地址：光彩小道863h号</td>
			<td>寄件人：</td>
			<td>王麻子</td>
			<td>tel:155xxxxxxxx</td>
		</tr>
		<tr>
	    	<td>收件人：</td>
	    	<td>王小麻子</td>
			<td>tel:144xxxxxxxx</td>
		</tr>

	</table>
</body>
</html>