html table表格

最新推荐文章于 2024-07-26 14:13:22 发布

Happy_syy

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量713

点赞数

本文链接：https://blog.csdn.net/Happy_syy/article/details/101709457

版权

表格是由行和列排列而成的一种结构

HTML表格由table标签以及一个或多个tr、th或td标签组成：
table标签用来定义表格，整个表格包含在table和/table标签中；
tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，
由tr和/tr标签表示；tr是table row的缩写
td标签和th标签用来定义单元格，所有单元格都在tr标签内，
每个单元格由一对td和/td标签或一对th和/th标签表示，具体的表格内容放置在这一对td标签或th标签之中，th是用于表格第一行，th 是 table head 表示表格的头部，td用于表格第二行及以后行数
说明：th标签中的内容默认以粗体、居中的方式显示

例如：

<table>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>

①border标签属性：设定围绕表格的边框的宽度：
如果不设置边框，不用border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td>小李</td>
				<td>222</td>
			</tr>
		</table>
	</body>
</html>

运行结果：
在这里插入图片描述
将代码改为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<table border="10">
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td>小李</td>
				<td>222</td>
			</tr>
		</table>
	</body>
</html>

运行结果
在这里插入图片描述
注意：
border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；
实际开发中不建议使用border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				border: 5px solid red; /*5px表示边框宽度  solid表示边框是实线  red表示边框是红色的*/
			}
			th{
				border: 1px solid red;
			}
			td{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td>小李</td>
				<td>222</td>
			</tr>
		</table>
	</body>
</html>

运行结果
在这里插入图片描述
②width标签属性：设定表格的宽度。

table{
				width: 100px;
		}

在这里插入图片描述
③align标签属性：指定表格相对于周围标签的对齐方式，该标签属性属性值如下：

<table >
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td align="center">小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td align="center">小李</td>
				<td>222</td>
			</tr>
		</table>

运行结果
在这里插入图片描述
④cellspacing 标签属性：设定单元格之间的间距（单位：px）。

<table cellspacing="0">
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td align="center">小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td align="center">小李</td>
				<td>222</td>
			</tr>
		</table>

建议使用向table标签添加border-spacing样式属性进行调节单元格之间的距离：

table{
				border: 5px solid red; 
				width: 200px;
				border-spacing: 0px;
			}

运行结果
在这里插入图片描述
⑤cellpadding标签属性：设定单元边沿与单元内容之间的间距（单位：px）

<table cellpadding="10px">
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td align="center">小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td align="center">小李</td>
				<td>222</td>
			</tr>
		</table>

不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距，建议向td或th标签添加padding样式属性来实现：

<style>
			table{
				border: 5px solid red; 
				width: 200px;
				border-spacing: 0px;
			}
			th{
				border: 1px solid red;
				padding: 10px;
			}
			td{
				border: 1px solid red;
				padding: 10px;
			}
</style>

在这里插入图片描述
⑥bgcolor标签属性：设置表格背景颜色，属性值如下：

<table bgcolor="pink">
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td align="center">小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td align="center">小李</td>
				<td>222</td>
			</tr>
		</table>

不建议通过bgcolor标签属性设置表格背景颜色，建议向table标签添加background-color样式属性实现这一效果：

<style>
			table{
				border: 5px solid red; 
				width: 200px;
				border-spacing: 0px;
				background: pink;
			}
			th{
				border: 1px solid red;
				padding: 10px;
			}
			td{
				border: 1px solid red;
				padding: 10px;
			}
		</style>

运行结果
在这里插入图片描述
⑦border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框（合并伟最最粗的边框），属性值如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				border: 3px solid red; 
				width: 200px;
				border-spacing: 0px;
				background: pink;
			}
			th{
				border: 1px solid red;
				padding: 10px;
			}
			td{
				border: 1px solid red;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<table style="border-collapse: collapse;">
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td align="center">小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td align="center">小李</td>
				<td>222</td>
			</tr>
		</table>
	</body>
</html>

运行结果
在这里插入图片描述
⑧建议向tr或td标签添加text-align样式属性设置表格行中单元格内容的水平对齐方式

td{
				border: 1px solid red;
				padding: 10px;
				text-align: center;
			}

合并单元格：
①colspan样式属性：设置单元格横跨多少列。

<table style="border-collapse: collapse;">
			<tr>
				<td colspan="2">学生信息表</td>    /*在这一行，有2列是合并的*/
			</tr>
			<tr>
				<td>姓名</td>
				<td>学号</td>
			</tr>
			<tr>
				<td>小明</td>
				<td>111</td>
			</tr>
			<tr>
				<td>小李</td>
				<td>222</td>
			</tr>
		</table>

②rowspan样式属性：设置单元格横跨多少行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>rowspan标签属性</title>
	</head>
	<body>
		<table border="1px" width="30%" cellspacing="0">
			<tr>
				<td rowspan="4" style="text-align: center;">上午</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>化学</td>
			</tr>
			<tr>
				<td>历史</td>
			</tr>
			<tr>
				<td>政治</td>
			</tr>
		</table>
	</body>
</html>

运行结果
在这里插入图片描述
要合并四行就在第一行写上rowspan="4"
产生这样的结果是因为这个rowspan="4"是第一行的表格中的内容独占一列、四行，原本在第一列的内容向后第二列移动。