HTML5之表格标签

最新推荐文章于 2024-07-26 14:13:22 发布
最新推荐文章于 2024-07-26 14:13:22 发布
阅读量1.6k 收藏 7
点赞数 3
分类专栏： 前端技术-HTML 文章标签： 表格 caption th table 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YWB88888888/article/details/102624866
版权

<table>标签

常用属性：
          [border]： 表格边框
类别：
          容器级标签
作用：
          定义一个表格
说明：
          一个表格包括 <table> 标签，一个或多个 <tr>、<th> 以及 <td> 标签，更复杂的表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 标签
全局属性： 支持
事件属性： 支持
注意：
          1.在HTML5中，仅支持 “border” 属性，并且只允许使用值 “1” 或 ""

代码示例：

<table border="1" style="border-collapse: collapse">
	<tr height="50">
		<td colspan="12">0000</td>
	</tr>
	<tr>
		<td colspan="7">0000</td>
		<td colspan="5">0000</td>
	</tr>
	<tr>
		<td colspan="4">0000</td>
		<td colspan="4">0000</td>
		<td colspan="4">0000</td>
	</tr>
	<tr>
		<td colspan="12">000</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">00</td>
		<td colspan="4">123456</td>
		<td colspan="4">123456</td>
		<td colspan="2" rowspan="2">00</td>
	</tr>
	<tr>
		<td colspan="1">000</td>
		<td colspan="3">00000000</td>
		<td colspan="1">000</td>
		<td colspan="3">000000</td>
	</tr>
	<tr>
		<td colspan="2">777</td>
		<td>777</td>
		<td colspan="3">777</td>
		<td>777</td>
		<td colspan="3">777</td>
		<td colspan="2">777</td>
	</tr>
</table>

 

<caption>标签

类别：
          容器级标签
作用：
          定义表格的标题
说明：
          标签必须直接放置到 <table> 标签之 后。每个表格只能定义一个标题。通常这个标题会被居中于表格之上
全局属性： 支持
事件属性： 支持
 

<tr>标签

作用：
          定义 HTML 表格中的行
说明：
          一个 <tr> 标签 包含 一个或多个 <th> 或 <td> 标签，在该标签上面 设置border无效
全局属性： 支持
事件属性： 支持
注意：
          在HTML5中，不支持<tr>标签 在 HTML4.01 中的 任何属性

代码示例：

<table border="1" style="border-collapse: collapse">
	<tr height="50">
		<td colspan="12">0000</td>
	</tr>
	<tr>
		<td colspan="7">0000</td>
		<td colspan="5">0000</td>
	</tr>
	<tr>
		<td colspan="4">0000</td>
		<td colspan="4">0000</td>
		<td colspan="4">0000</td>
	</tr>
	<tr>
		<td colspan="12">000</td>
	</tr>
	<tr>
		<td rowspan="2" colspan="2">00</td>
		<td colspan="4">123456</td>
		<td colspan="4">123456</td>
		<td rowspan="2" colspan="2">00</td>
	</tr>
	<tr>
		<td>000</td>
		<td colspan="3">00000000</td>
		<td>000</td>
		<td colspan="3">000000</td>
	</tr>
	<tr>
		<td colspan="2">777</td>
		<td>777</td>
		<td colspan="3">777</td>
		<td>777</td>
		<td colspan="3">777</td>
		<td colspan="2">777</td>
	</tr>
</table>

 

<th>标签

常用属性：
          [colspan]： 规定表头单元格可横跨的列数，在计算跨列数时应该包括其本身
          [rowspan]： 规定表头单元格可横跨的行数，在计算跨行数时应该包括其本身
          [header]： 规定与表头单元格相关联的一个或多个表头单元格
          [scope]： 规定表头单元格是否是行、列、行组或列组的头部
类别：
          容器级标签
作用：
          定义表格中的表头单元格
说明：
          该标签中的文本通常呈现为粗体并且居中
全局属性： 支持
事件属性： 支持

代码示例：

<table border="1"  style="border-collapse: collapse; text-align: center;">
	<tr>
		<th rowspan="2">序号</th>
		<th rowspan="2">监测位置</th>
		<th rowspan="2">供电通路</th>
		<th rowspan="2">供电电压</th>
		<th rowspan="2">负载电流</th>
		<th rowspan="2">雷击次数</th>
		<th rowspan="2">最近一次雷击时间</th>
		<th colspan="2">后备保护空开状态</th>
		<th rowspan="2">SPD损害数量</th>
		<th colspan="2">输出空开状态</th>
	</tr>
	<tr>
		<th>B级</th>
		<th>C级</th>
		<th>1路</th>
		<th>2路</th>
	</tr>
	<tr>
		<td rowspan="3">1</td>
		<td>1</td>
		<td>78</td>
		<td>96</td>
		<td>67</td>
		<td>98</td>
		<td>88</td>
		<td>75</td>
		<td>94</td>
		<td>69</td>
		<td>23</td>
		<td>33</td>
	</tr>
	<tr>
		<th colspan="2">提示建议</th>
		<th colspan="2">智能防雷箱状态</th>
		<th colspan="2">防雷箱型号</th>
		<th colspan="3">防雷箱序列号</th>
		<th colspan="2">防雷箱版本</th>
	</tr>
	<tr>
		<th colspan="2">建议整机按规程检测</th>
		<th colspan="2">在线</th>
		<th colspan="2">2018041201-035PF</th>
		<th colspan="3">2018041201-256</th>
		<th colspan="2">V1.0.0</th>
	</tr>
</table>

 

<td>标签

常用属性：
          [colspan]： 规定表头单元格可横跨的列数，在计算跨列数时应该包括其本身
          [rowspan]： 规定表头单元格可横跨的行数，在计算跨行数时应该包括其本身
          [header]： 规定与表头单元格相关联的一个或多个表头单元格
类别：
          容器级标签
作用：
          定义表格中的普通单元格
说明：
          该标签中的文本通常是普通的左对齐文本
全局属性： 支持
事件属性： 支持

代码示例：

<table border="1" style="border-collapse: collapse;">
	<tr>
		<td colspan="2">123456789</td>
		<td colspan="5">1--23456789</td>
		<td colspan="3">0000000000</td>
	</tr>
	<tr>
		<td>日期</td>
		<td colspan="5">00000</td>
		<td colspan="4">1111</td>
	</tr>
	<tr>
		<td>-----------</td>
		<td colspan="4">0----00000000</td>
		<td>000000000</td>
		<td colspan="3">1-------000--</td>
		<td>2---------0-</td>
	</tr>
</table>

 

<thead><tbody><tfoot>标签

类别：
          容器级标签
作用：
          用来规定表格的各个部分，对表格结构进行细分，使其能被更精确、更多样的控制
说明：
          通过使用这些标签，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上
          <thead> 标签必须被用在以下情境中 ： 作为 <table> 标签的 子标签，出现在 <caption> 、<colgroup> 标签之后，<tbody>、<tfoot> 和 <tr> 标签之前，该标签内部必须包含一个或者多个 <tr> 或 <th> 标签
          <tbody> 标签必须被用在以下情境中 ： 作为 <table> 标签的子标签，出现在 <caption>、 <colgroup> 和 <thead> 标签之后，该标签内部必须包含一个或者多个 <tr> 标签
           <tfoot> 标签必须被用在以下情境中 ： 作为 <table> 标签的子标签，出现在 <caption>、<colgroup> 和 <thead> 标签之后，<tbody> 和 <tr> 标签之前，该标签内部必须包含一个或者多个 <tr> 标签
全局属性： 支持
事件属性： 支持
注意：
          1.<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局，但是可以使用 CSS 来为这些元素定义样式，从而改变表格的外观

代码示例：

<table border="1" style="border-collapse: collapse;text-align: center;" width="1000px" height="600px">
	<tr>
		<th>序号</th>
		<th>维修项目及更换配件</th>
		<th>单价</th>
		<th>数量</th>
		<th>小计</th>
		<th>工时费</th>
		<th>合计</th>
		<th>故障原因</th>
	</tr>
	<tr>
		<th>1</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>2</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>3</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>4</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>5</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>6</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th rowspan="4">7</th>
		<td></td>
		<td colspan="2" rowspan="4"></td>
		<td rowspan="4"></td>
		<td rowspan="4"></td>
		<td rowspan="4"></td>
		<td rowspan="4"></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td colspan="2" align="left">备件费用小计：</td>
		<td colspan="5" align="left">工时费用小计：</td>
		<td colspan="1" align="left">合计：</td>
	</tr>
	<tfoot>
		<tr>
			<td height="50px" colspan="8" align="left">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			班组长：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			技术部：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			服务顾问：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			客户确认:
			</td>
		</tr>
	</tfoot>
</table>

 

<col>标签

常用属性：
          [span]： 规定 <col> 元素应该横跨的列数
作用：
          标签规定了 <colgroup> 标签内部的每一列的列属性
说明：
          通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式
全局属性： 支持
事件属性： 支持
 

<colgroup>标签

作用：
          用于对表格中的列进行组合，以便对其进行格式化
说明：
          只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
全局属性： 支持
事件属性： 支持
注意：
          1.如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>HTML表格标签学习</title>
</head>
<body>
	<table border="1px" style="border-collapse: collapse;">
		<caption>演示表</caption>
		
		<colgroup>
			<col span="2">
			<col style="background: red;">
			<col span="2" style="background: limegreen;">
		</colgroup>
		
		<thead>
			<tr>
				<th>表头一</th>
				<th>表头二</th>
				<th>表头三</th>
				<th>表头四</th>
				<th>表头五</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>行二 列一</td>
				<td>行二 列二</td>
				<td>行二 列三</td>
				<td>行二 列四</td>
				<td>行二 列五</td>
			</tr>
			<tr>
				<td>行三 列一</td>
				<td>行三 列二</td>
				<td>行三 列三</td>
				<td>行三 列四</td>
				<td>行三 列五</td>
			</tr>
			<tr>
				<td>行四 列一</td>
				<td>行四 列二</td>
				<td>行四 列三</td>
				<td>行四 列四</td>
				<td>行四 列五</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
Programmer.杨
关注
专栏目录
HTML入门学习笔记--表格标签(4)
qq_孤小狼的博客
01-06 761
其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.表格标签格式:<table> <tr> <td>需要显示的内容</td> </tr> </table>其实表格标签中的
Html5(表格标签）
yangyingjian123的博客
01-14 318
表格基本概述 表格由 <table>·标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格的基本结构 ⭐行 <tr> </tr> ⭐列 <td> </td> ⭐单元格 代码实例： <!DOCTYPE html
html5表格标签
ahang的博客
03-16 344
表单的作用 并不是用来布局页面的只是用来展示数据可以更加清晰的展示了解到数据信息 表格的基本使用 <table> <tr><td>姓名</td><td>性别</td><td>年龄</td></tr> <tr><td>刘德华</td><td>男</td><td>54</td>&lt
【HTML+CSS】HTML表格：从基础到进阶的全面指南
最新发布
Xiaoxin的博客
07-26 1313
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
HTML5-表格标签
06-20 303
1、表格标签作用：给一堆数据添加表格语义，当数据非常大的时候，利用表格标签会展示得很清晰2、格式<table> <tr> <td>xx</td> </tr> </table>tr标签代表整个表格中的一行数据 td标签代表一行中的一个单元格3、注意点 a、表格标签有一个边框属性border，默认宽度是0 b、表格的宽高默认是按照内容尺寸来显示的 c、制做细线表格
HTML5--表格、表单标签
Lance2574的博客
08-09 393
一、表格标签 <table> <thead>--tr>th <tbody>--tr>td <tfoot> caption：作为table的子元素，表示表格的标题信息 colgroup：列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其它元素的前面。 col：经常作为colgroup的子元素，又span属性...
HTML5基础学习-表格标签
weixin_61920612的博客
11-26 1759
学习内容： 1.综合案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML之表格标签
X18160013的博客
11-30 797
1.什么是表格? 表格最重要的目的是显示表格类数据，比如就业薪资表，财务报表，学生信息表，座次表等。其实表格在网页开发中使用非常的广泛，它跟前面所学的列表一样，都是由一些固定的标签搭配起来使用，只是它的标签稍多了一些。 基本结构标签: <table> ：定义表格 <tr> ：定义表格的行 <td> ：定义表格中的单元格 <th> ：定义表格中的表头单元格 <thead> ：定义表格中的表头内容 <tbody> ：定义表
HTML基础---表格标签
weixin_48055520的博客
04-15 1389
HTML--表格标签
HTML5制作表格样式
09-27
通过这种方式，我们可以创建出具有专业外观的HTML5表格，不仅结构清晰，而且视觉效果出色。这样的表格适用于各种用途，包括报告、数据分析或网页中的信息展示。学习并掌握这些HTML和CSS技巧，将有助于提升你的网页...
HTML常用标签之表格标签
qq_47412862的博客
04-07 5612
一、表格主要作用 表格主要是用于显示、展示数据，而不是用来布局页面的。 二、表格的基本语法 1.<table></table>是用于定义表格的标签； 2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中； 3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中； 4.字母td指表格数据(table data)，即
HTML中table表格标签的基础学习教程
09-28
学习HTML表格标签是一个基础的Web开发技能，也是网页设计师必须掌握的技术之一。尽管现在CSS布局方法更为流行，但了解HTML表格标签的用法依然是非常有用的，特别是在处理需要表格显示数据的页面时。在构建Web页面时...
2022年HTML相关知识点表格标签(1).pptx
11-02
HTML 表格标签知识点总结 HTML 表格标签是 HTML 语言中用来创建表格的基本标签，通过这些标签，可以创建出各种形式的表格，满足不同的需求。在本节中，我们将详细介绍 HTML 表格标签的使用方法和相关知识点。 1. ...
04HTML基础--表格标签
weixin_34234721的博客
09-29 102
表格标签 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表 http://2004.sina.com.cn 作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 格式: t...
HTML表格标签
m0_57898822的博客
04-04 2873
html表格标签及属性
html标签之表格标签，前端应用性能优化，【建议收藏】
m0_57472099的博客
03-19 1072
7）border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；
html5表格所有属性,HTML5学习笔记之表格标签
weixin_29994587的博客
06-10 717
HTML5学习笔记之表格标签其他HTML5相关文章一.表格标签image1.作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.格式:table定义表格tr定义行td定义单元格3.表格中的属性border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度width: 默认情况下表格的宽度是由内容自动计算出来的, ...
html5表格标签＜table＞
weixin_43956958的博客
01-26 261
一个简单的 HTML 表格包括 table 元素，一个或多个 tr、th 以及 td 元素。 tr 元素定义表格行 th 元素定义表头 td 元素定义表格单元 更复杂的 HTML 表格也可能包含 caption, col, colgroup, thead, tfoot, tbody 等元素。 <table border="1"> <tr> <th>月份</th> <th>存款</th> </tr>
HTML表格标签详解与示例
"这篇文档主要介绍了HTML中的表格标签及其相关属性，包括HTML5、HTML4.01和XHTML1.0的文档类型声明，以及126.com网站头部的元信息设置。此外，还提到了图像地图和不同图像格式的特点与适用场景。" 在HTML中，表格是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值