HTML表格标签

最新推荐文章于 2025-04-22 20:08:07 发布

菜鸡崛起中...

最新推荐文章于 2025-04-22 20:08:07 发布

阅读量3k

点赞数 2

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/m0_57898822/article/details/129935505

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

HTML表格标签

一、表格常用标签

1.1 table标签

`解析:`

	<table> 标签定义 HTML 表格
	一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
	<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

1.2 thead标签

`解析:`

<thead> 标签用于组合 HTML 表格的表头内容
<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

1.3 tbody标签

`解析:`

<tbody> 标签用于组合 HTML 表格的主体内容。
<tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。
<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

1.4 tfoot标签

`解析:`

<tfoot> 标签用于组合 HTML 表格的页脚内容。

注意：<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

`代码实现：`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>
</html>

`运行结果:`

在这里插入图片描述

1.5 th标签

`解析:`

<th> 标签定义 HTML 表格中的表头单元格。
HTML 表格有两种单元格类型：
表头单元格:包含头部信息（由 <th> 元素创建）
标准单元格:包含数据（由 <td> 元素创建）
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 元素中的文本通常是普通的左对齐文本。

1.6 tr标签

`解析:`

<tr> 标签定义 HTML 表格中的行。

1.7 td标签

`解析:`

<td> 标签定义 HTML 表格中的标准单元格。

1.8 caption标签

`解析:`

<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。
只能对每个表格定义一个标题。

1.9 colgroup标签

`解析:`

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。

提示：如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

1.10 col标签

`解析：`

<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。
通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

二、表格常用属性：

2.1 border：

表示表格的边框宽度，单位是像素(px)；

2.2rowspan：

规定单元格应该合并的行数。

2.3colspan：

规定单元格应该合并的列数。

2.4cellpadding：

表示单元格边缘与其单元格内容之间的空白间距；

2.5cellspacing：

表示单元格之间的空白间距；

2.6width：

表示表格的宽度；

2.7summary：

表示表格的摘要，摘要不会显示

三、表格综合案例

`代码实现：`

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		th,td {
			width: 150px;
			height: 50px;
			text-align: center;
			border:1px solid #000;
		}
	</style>
</head>
<body>

	<table border="1" cellspacing="0" summary="HTML样例摘要展示">
		<colgroup>
    		<col span="1" style="background-color:orange">
    		<col style="background-color:yellow">
  		</colgroup>

		<caption>表格实例</caption>

		<thead>
		    <tr>
		      <th>页眉第1行第1列</th>
		      <th>页眉第1行第2列</th>
		      <th></th>
		    </tr>
		</thead>

		<tfoot>
    		<tr>
      			<td>页脚第1行第1列</td>
      			<td>页脚第1行第2列</td>
      			<td></td>
    		</tr>
  		</tfoot>
		
		<tbody>
			<tr>
	  			<td>第1行第1列</td>
	  			<td>第1行第2列</td>
	  			<!-- 跨行合并 -->
	  			<td rowspan="2">跨行合并</td>
			</tr>
			<tr>
			<!-- 跨列合并 -->
	  			<td colspan="2">跨列合并</td>
			</tr>
		</tbody>

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