4.表格-HTML基础
一、表格简介
在过去的
web1.0
时代,表格常用于页面布局。但在web2.0
中,这种用表格的页面布局方式已经被抛弃,现在的网页布局都是使用CSS
来实现的。 但是表格并不是一无是处,表格在实际开发中是用得非常多的,因为使用表格可以更清晰地排列数据。
二、表格基本结构
在 HTML 中,一个表格一般会由以下三部分组成:
- 表格:
table标签
- 行:
tr标签
- 单元格:
td标签
1.语义
tr 指的是 table row(表格行)。 td 指的是 table data cell(表格单元格)。
<table></table>
表示整个表格的开始和结束。<tr></tr>
表示行的开始和结束。在表格中,有多少组<tr></tr>
就有多少行。<td></td>
表示单元格的开始和结束。
三、表格完整结构
一个表格的完整结构,不仅仅只有
table、tr、td
这三个,还应包括caption、th、thead、tbody、tfoot
。
1.caption-表格标题
在
HTML
中,表格一般都会有且只有一个标题,通过使用caption标签
来实现,也就是说一个表格中只有一个caption标签
。 在默认情况下,标题都是位于整个表格内的第一行。
(1)示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style type="text/css">
table,tr,td{
border: 1px solid #00FFFF; /*为表格加上边框,默认是没有边框的*/
}
</style>
</head>
<body>
<table>
<caption>見贤思齊</caption> <!--这是表格标题-->
<tr> <!--这是表行-->
<td>君初见</td> <!--这是表格单元格-->
<td>初见</td>
</tr>
<tr>
<td>王小淘</td>
<td>小淘</td>
</tr>
</table>
</body>
</html>
2.th-表头单元格
之前我们通过学习知道,td指的是 table data cell(表格单元格)。 但在
HTML
中,单元格其实有两种:
- th 指的是table header cell(表头单元格)。
- td 指的是table data cell(表行单元格)。
(1)语法
<table>
<caption>表格标题</caption> <!--这是表格标题-->
<tr> <!--这是表行-->
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
</table>
(2)th和td区别
th 和 td在本质上都是单元格,但是并不代表两者可以互换。它们之间具体有以下两种区别:
- 显示上:浏览器会以粗体和居中来显示
th 标签
中的内容,但是td 标签
不会。 - 语义上:
th标签
用于表头;td标签
用于表行。
当然,对于表头单元格,我有可能会使用 td 来代替 th,但不建议这样做。
因为在HTML
语义化中了解到:学习 HTML
的目的就是在需要的地方使用恰当的标签(也就是语义化)。
四、语义化
在这之前我们已经学习了
table、caption、tr、th (表头单元格)、td (表行单元格)
。 为了更深入地对表格进行语义化,HTML引入了thead、tbody、tfoot
这三个标签。thead、tbody、tfoot
将表格划分为 3 部分:表头、表身、表脚。有了这三个标签,使得表格语义变得更加良好,结构更清晰,也更具可读性和可维护性。
1.语法
<table>
<caption>表格标题</caption>
<thead> <!--表头-->
<tr> <!--这是表行-->
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
(1)实际开发
tfoot
表脚往往用于统计数据。对于thead、tbody、tfoot
这 3 个标签,不一定全部都用上,比如:tfoot
就很少用。一般情况下,根据实际需求来使用这 3 个标签。
① 重要性
-
thead、tbody、tfoot
是表格中非常重要的标签,它们从语义上区分了表头、表身、表脚,这使得代码更具语义,千万不要忽视了它们。 - 此外,还有一个重要作用:方便分块来控制表格的
CSS
样式。
Ⅰ.总结
对于表格的显示效果来说,
thead、tbody、tfoot
这三个标签加上后和没加之前的效果是一样的,那为何还用使用呢? 单纯只从显示效果来说,确实加与不加效果都差不多,但是加上之后会让你的代码更具逻辑性,并且还可以很好地结合CSS
来分块控制样式。
五、rowspan-合并行
在
HTML
中,我们可以使用rowspan属性
来合并行。 所谓的合并行,就是将纵向的N个单元格合并成一个。(也可简单理解为上下合并)
1.语法
<td rowspan="跨越的行数"></td>
(1)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style>
table,tr,td,th{
border: 1px solid #66A9FE;
}
</style>
</head>
<body>
<table>
<caption>合并行</caption>
<thead>
<tr>
<th>
姓名:
</th>
<th>
王小淘
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">喜欢的水果:</td>
<td>菠萝</td>
</tr>
<tr>
<td>其它全部水果</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--
可以尝试下,把rowspan="2"删除后的效果是什么样的。
rowspan="2"实际上是让加上rowspan属性的这个td标签跨越两行。
-->
合并行例1.png
六、colspan-合并列
在
HTML
中,我们可以使用colspan属性
来合并列。 所谓的合并列,就是将横向的N个单元格合并成一个。(也可简单理解为左右合并)
1.语法
<td colspan="跨越的列数"></td>
(1)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style>
table,tr,td,th{
border: 1px solid #00FFFF;
}
</style>
</head>
<body>
<table>
<caption>合并列</caption>
<thead> <!--表头-->
<tr>
<th>
姓名
</th>
<th>
数学
</th>
<th>
英语
</th>
<th>
政治
</th>
<th>
专业课
</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr>
<td>王小淘</td>
<td>100</td>
<td>80</td>
<td>80</td>
<td>110</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr>
<td>总成绩</td>
<td colspan="4">370</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!--
可以尝试下,把colspan="4"删除后的效果是什么样的。
colspan="4"实际上是让加上colspan属性的这个td标签跨越 4 行。
-->
合并列例1.png
2.实际开发
在实际开发中,合并行与合并列用的很少,忘了的话回过头来看一眼。 对于
rowspan 和 colspan
,要从语义上去理解,rowspan表示row span,colspan表示column span。
- IIS 7.x Application Request Routing(ARR) 502错误的解决方法
- 移动前端头部标签(HTML5 meta)
- 这个行业在汽车圈最落后,正在被物联网和AI改变
- WordPress 网站基于REST API 开发“微信小程序”实战
- 摩拜共享汽车亮相 首批新能源电动汽车试运行
- 基于SQL Server 2008 Service Broker构建企业级消息系统
- Windows主机管理系统Websitepanel
- 自定义Appfabric Cache 配置提供程序
- 2017年发生在上海的科技大新闻
- REST当中为什么要使用HTTP PUT
- 推荐一个在Linux/Unix上架设ASP.NET的 WEB服务器--Jexus
- 人工智能与工业融合:没有你,对我很重要……
- DeepMind哈萨比斯对话哈里王子:2018年AI最大的突破在生物或化学
- 提升用户体验,微信小程序“授权失败”场景的优雅处理
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Jackson第一篇
- jackson第二篇
- 从源码分析常见集合的区别之List接口
- c++ 调用ffmpeg命令获取视频属性
- Kubernetes 1.19.0——网络策略
- TypeScript 参数简化实战(进阶知识点conditional types,中高级必会)
- 最简实现Promise,支持异步链式调用(20行)
- 40行代码把Vue3的响应式集成进React做状态管理
- 写给女朋友的中级前端面试秘籍(含详细答案,15k级别)
- 写给初中级前端的高级进阶指南
- 为什么 Vue 中不要用 index 作为 key?(diff 算法详解)
- Vue3 的响应式和以前有什么区别,Proxy 无敌?
- 腾讯云TKE-PV使用cos存储案例: 容器目录权限问题
- Vue3 究竟好在哪里?(和 React Hook 的详细对比)
- 前端「N皇后」递归回溯经典问题图解