前端表格总结

最新推荐文章于 2025-11-08 17:08:04 发布

原创最新推荐文章于 2025-11-08 17:08:04 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

表格总结

1.表格作用和基本语法

它是用来描述具有二维结构的数据，可以让数据显示的非常的规整，可读性非常好。表格最合适的地方就是用来存储表格里数据的。
创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

1.table用于定义一个表格标签。
2.tr标签用于定义表格中的行，必须嵌套在 table标签中。
3.td 用于定义表格中的单元格，必须嵌套在标签中。
他们是创建表格的基本标签，缺一不可
在这里插入图片描述

2.表格标签

标签	说明
table	用于定义一个表格
thead	定义表头用于对 HTML 表格中的主体内容进行分组
tr	行
td	单元格可以放任何东西
tbody	主干用于组合 HTML 表格的主体内容
tfoot	尾用于对 HTML 表格中的表注（页脚）内容进行分组
caption	定义表格标题通常这个标题会被居中且显示于表格之上。

<!DOCTYPE html>
<html>
<head>
	<title>表格标签</title>
</head>
<body>
	<table border="1">
 	  <caption>表格标题</caption>
		<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>

在这里插入图片描述

3.表格属性

属性	说明
border	表格边框（默认取0，表示无边框）
width	表格宽度
height	表格高度
align	表格对齐方式
bgcolor	表格的背景颜色
background	背景图像（优先显示）
cellpadding	表格边距（默认取值2px）
cellspacing	表格间距（默认取值2px）

在这里插入图片描述

4.表格的嵌套和合并

4.1嵌套

<!DOCTYPE html>
<html>
<head>
	<title>表格标签</title>
</head>
<body>
	<table width="500" border="1">
		<tr>
			<td>&nbsp;</td>
		<td>
			<table width="200" border="1" align="center">
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

4.2合并

属性	说明
rowspan	合并的是行单元格在垂直方向的合并
colspan	合并的是列单元格在水平方向的合并

<!DOCTYPE html>
<html>
<head>
	<title>表格合并</title>
</head>
<body>
	<table width="500" border="1">
		<tr>
			<td rowspan="2">&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<title>表格合并</title>
	</head>
<body>
	<table width="500" border="1">
		<tr>
			<td colspan="2" align="center">&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>

在这里插入图片描述