HTML——＞表格

最新推荐文章于 2022-11-15 19:06:22 发布
最新推荐文章于 2022-11-15 19:06:22 发布
阅读量687 收藏 2
点赞数 1
分类专栏： 笔记 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55016379/article/details/116301293
版权
笔记 同时被 2 个专栏收录
94 篇文章 0 订阅
订阅专栏
html
11 篇文章 0 订阅
订阅专栏

表格

表格的基本结构

在HTML中，一个表格一般由以下3个部分组成：

  • 表格：table标签
  • 行：tr标签
  • 单元格：td标签

语法格式：

<table>
    <tr>
    	<td>单元格1</td>
    	<td>单元格2</td>
    </tr>
      <tr>
    	<td>单元格3</td>
    	<td>单元格4 </td>
    </tr>
</table>

tr指的是table row（表格行）。td指的是table data cell（表格单元格）

  • < table >< /table >标准整个表格的开始和结束
  • < tr >< /tr >表示行的开始和结束
  • < tb >< /tb >表示单元格的开始和结束

在表格中，有多少组“< tr >< /tr >”就表明有多少行

在表格中，有多少组"< td >< /td >"就表明有多少列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>表格基本结构</title>
		<!--这里使用CSS为表格加上边框-->
		<style type="text/css">
			table,tr,td{border:lpx solid silver;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>HTML</td>
				<td>CSS</td>
			</tr>
			<tr>
				<td>JavaScript</td>
				<td>jQuery</td>
			</tr>
		</table>
	</body>
</html>
表格基本结构
HTMLCSS
JavaScriptjQuery

完整结构

表格标题：caption

在HTML中，表格一般都会有一个标题，可以用过caption标签实现

语法结构：

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

一个表格只能有一个标题，也就是只能由一个caption标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标题</title>
		<!--这里使用CSS为表格加上边框-->
		<style type="text/css">
			table,tr,td{border: lpx solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩表<caption>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>90</td>
				<td>90</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
		</table>
	</body>
</html>
表格标题
考试成绩表
小明808080
小红909090
小杰100100100

表头单元格：th

在HTML中，单元格其实有两种：

  • 一种是“表头单元格”，使用的是th标签
  • 一种是“表行单元格”，使用的是td标签

语法结构：

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
</table>

th和td本质上都是单元格，但两者是有很大区别的：

  • 显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会
  • 语义上：th标签用于表头，而td标签用于表行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表头单元格</title>
		<!--这里使用CSS为表格加上边框-->
		<style type="text/css">
			table,tr,td,th{border: lpx solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩</caption>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>英语</th>
				<th>数学</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>90</td>
				<td>90</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
		</table>
	</body>
</html>
表头单元格
考试成绩
姓名语文英语数学
小明808080
小红909090
小杰100100100

语义化

一个完整的表格除了：table、caption、tr、th、td。HTML还引入了thead、tbody和tfoot三个标签

thead、tboby、tfood将表格分为：表头，表身，表脚三个部分

语法结构：

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <tbody><>
    
</table>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格语义化</title>
		<!--这里使用CSS为表格加上边框-->
		<style type="text/css">
			table,tr,td,th{border: lpx solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩</caption>
			
			<thead>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>英语</th>
				<th>数学</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			
			<tr>
				<td>小红</td>
				<td>90</td>
				<td>90</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>平均</td>
					<td>80</td>
					<td>90</td>
					<td>100</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
表格语义化 
		<thead>
		<tr>
			<th>姓名</th>
			<th>语文</th>
			<th>英语</th>
			<th>数学</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>小明</td>
			<td>80</td>
			<td>80</td>
			<td>80</td>
		</tr>
		
		<tr>
			<td>小红</td>
			<td>90</td>
			<td>90</td>
			<td>90</td>
		</tr>
		<tr>
			<td>小杰</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>平均</td>
				<td>80</td>
				<td>90</td>
				<td>100</td>
			</tr>
		</tfoot>
	</table>
</body>
考试成绩
表格语义化 
		<thead>
		<tr>
			<th>姓名</th>
			<th>语文</th>
			<th>英语</th>
			<th>数学</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>小明</td>
			<td>80</td>
			<td>80</td>
			<td>80</td>
		</tr>
		
		<tr>
			<td>小红</td>
			<td>90</td>
			<td>90</td>
			<td>90</td>
		</tr>
		<tr>
			<td>小杰</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>平均</td>
				<td>80</td>
				<td>90</td>
				<td>100</td>
			</tr>
		</tfoot>
	</table>
</body>
考试成绩

合并行:sowspan

语法结构：

<td rowspan="跨域行数"></td>

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格语义化</title>
		<!--这里使用CSS为表格加上边框-->
		<style type="text/css">
			table,tr,td,th{border: lpx solid silver;}
		</style>
	</head>
	<body>
		<table>
			<caption>考试成绩</caption>
			
			<thead>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>英语</th>
				<th>数学</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
			</tr>
			
			<tr>
				<td>小红</td>
				<td>90</td>
				<td>90</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>平均</td>
					<td>80</td>
					<td>90</td>
					<td>100</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

合并列：colspan

语法结构：

<td colspan="跨域的列数"></td>

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>colspan属性</title>
		<!--这里使用CSS为表格加上边框-->
		<style type="text/css">
			table,tr,td,th{border: lpx solid silver;}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2">前端开发技术</td>
			</tr>
			<tr>
				<td>HTML</td>
				<td>CSS</td>
			</tr>
			<tr>
				<td>JavaScript</td>
				<td>jQuery</td>
			</tr>
		</table>
	</body>
</html>
colspan属性
前端开发技术
HTMLCSS
JavaScriptjQuery
省级干饭王
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML标记语言——表格标记
12-10
上文：标记语言——标题 原文出处 标准化设计解决方案 – 标记语言和样式手册 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 从标记语法谈起 Chapter2 邪恶的表格？ 你知道...
HTML的table基本知识
weixin_46021847的博客
10-19 450
创建表格的四个元素：table、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 4、<th>…</th>：表格的头
HTML基础-06-表格（表＜table＞ ，行 ＜tr＞，列 ＜tb＞，表头 ＜th＞，跨列colspan，跨行rowspan，单元格边距 cellpadding，单元格间距cellspacing）
运维玄德公
03-18 1282
1. 表< table > ，行 < tr >，列 < tb > 2. 表头 < th > 3. 表名 < caption > 4. 跨列 colspan 5. 跨行 rowspan 6. 单元格边距 cellpadding 7. 单元格间距 cellspacing 8. 表内标签 9. 一个示例
css表格行列互换
Yuan_vertueux的博客
08-10 2047
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;行列互换&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quo
HTML的常用标签
qq_61219755的博客
06-18 2178
1.标题标签：表示字体加粗，并且每个标题标签括中的文字都显示占取一行，随着h后面的数字增大，标题也就越来越小。 2.段落标签：表示标签内部的内容是以段落的形式呈现的。 3.换行标签：表示前后文本强制换行。目前后面的不写同样可以表示换行。 4.文本格式化标签： 字体加粗：或者 字体倾斜：或者 字体加删除线：或者 字体加下划线：或者 5.和标签都是用来布局的，并没有语义，就是一个盒子，不过它们还是有区别的，内的文本内容独占一行，而一行可以有多个 6. 图像标签： ：图像标签是一个单标签，但是它有很多的属性来丰富
HTML基础笔记——表格
KllKllKll
07-18 297
在Web1.0时代，表格常用于网页布局。但是在Web2.0中，这种方式以及被抛弃了，网页布局都是使用CSS来实现的。但是，表格在实际开发中也用的得非常多，因为使用表格可以更清楚的排列数据 在HTML中，一个表格一般由三个部分组成：表格：table标签，行：tr标签，单元格：td标签 <table> <tr> <td>单元格1</td> <td>单元格2</td> </tr&gt
html表格——表格合并.docx
09-26
html表格——表格合并.docx
HTML标记语言——引用
12-12
上文：标记语言——邪恶表格 原文出处 Chapter 4 引用 “Misquotations are the only quotations tha are never misquoted” (只有错误的引用永远不会被误用) – Hesketh Pearson 所有类型的网站都经常会使用引用，...
网页特效——表格操作篇
04-16
网页表格的特效，包括插入表格、动态插入表格、会动的表格、极酷的表格、加一个表格、拖动单元格
HTML学习笔记 04 表格 表单
weixin_45342302的博客
09-30 409
在网页中添加表格 | 表单
HTML表单tr、th、tb的区别
muse_null的博客
09-06 1万+
tr表示table中的行；th表示table中的表的头部，例如一篇文章的标题；tb表示table中的列
HTML自学笔记
Liudashuaia的博客
02-21 624
一、HTML简介 1、HTML是什么？ HTML：hyper text markup language 超文本标记(标签)语言 有各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2、作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过连接来检索信息 使用表单获取用户的信息，实现交互 3,、版本 W3C:world wide web consortium万维网联盟，制...
HTML中得到表的行数与列数
仰望者！
07-07 4433
      function   numberCells()   {     var   count=0;     for   (i=0;   i     for   (j=0;   j     alert(window.oTable.rows[i].cells[j].innerHTML);     }     }     }      
HTML5简明教程系列之HTML5 表格与表单（二）
Bobowen的博客
11-15 1934
HTML的第二弹也来了，最近高产似母猪，状态也不错，代码来源为实验课。本期主要内容为：HTML表格与DIV应用、HTML表单。
html中table标签、tr标签、th标签、td标签的基础知识
热门推荐
TNANDXYF的博客
01-27 2万+
html表格标签——表格的基本结构表格的结构表格的基本标签表格标签的基本属性table标签的基本属性tr标签的基本属性th和td标签的基本属性 表格的结构 在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。 例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。 基本表格 表格的基本标签 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签：定义一个表格 ca
HTML 表格table tr td、表头标题、表结构、合并单元格
七七的博客
03-04 9428
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
HTML表格 关于行和列的问题
shixiaoxin1992的博客
08-23 4891
Document     1 2 3 4 1 2 3 4 1 2 3 4 //此表格能做出来超级细的边框原理如下 //个人总结：在合并列的时候（colspan='n'）就把的当前行当前列（即当前单元格）下面的列删除任意n-1列； //          在合并行的时候（rowspan='n'）就把当前行下的（n-1）行中
html中怎么区分行和列,html表固定行和列时，表中包含不同的colSpans和rowSpans
weixin_35089891的博客
06-25 486
所以，让我们这个表，例如：[Product.Color][Product.SizeUnitMeasureCode]FalseTrueTrueTrueBlue225.49CM 23790.17Grey125Multi478.92Yellow215.96CM 34311.33(fiddle) (其生成以下内容： ) (是的，你可能已经注意到，我说的一个数据透视表在这里:))。我想为列标题部分(灰色背景...
layui表格监听全选_layui学习笔记——监听表格复选框选择
最新发布
05-26
<script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件，可以使用layui的form模块来实现。需要注意的是，由于表格是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值