《HTML、CSS、JavaScript 网页制作从入门到精通》——6.7 表格的结构

简介:

本节书摘来自异步社区《HTML、CSS、JavaScript 网页制作从入门到精通》一书中的第6章,第6.7节,作者:【美】John Resig(莱西格) , Bear Bibeault(贝比奥特) 译者: 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。

6.7 表格的结构

还有一些标记是用来表示表格结构的,包括表首标记< thead >、表主体标记< tbody >以及表尾标记< tfoot >。这些通过成对出现的标记设置,应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改,从而省去了逐一修改单元格属性的麻烦。

6.7.1 表格的表首标记< thead >
表首样式的开始标记是< thead >,结束标记是 thead >。它们用于定义表格最上端表首的样式,可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。

语法:
screenshot

说明:

在该语法中,bgcolor、align、valign的取值范围与单元格中的设置方法相同。在< thead >标记内还可以包含< td >、< th >和< tr >标记,而一个表元素中只能有一个< thead >标记。

举例:
screenshot
screenshot

在代码中加粗部分的代码标记为设置表格的表首,在浏览器中预览效果,如图6.33所示。
screenshot

6.7.2 表格的表主体标记< tbody >
与表首样式的标记功能类似,表主体样式用于统一设计表主体部分的样式,标记为。

语法:
screenshot

说明:

在该语法中,bgcolor、align、valign的取值范围与< thead >标记中的相同。一个表元素中只能有一个< tbody >标记。

举例:
screenshot
screenshot

在代码中加粗部分的代码标记为设置表格的表主体,在浏览器中预览效果,如图6.34所示。
screenshot

6.7.3 表格的表尾标记< tfoot >
< tfoot >标记用于定义表尾样式。

语法:

screenshot

说明:

在该语法中,bgcolor、align、valign的取值范围与< thead >标记中的相同。一个表元素中只能有一个< tfoot >标记。

举例:
screenshot
screenshot

在代码中加粗部分的代码标记为设置表格的表尾,在浏览器中预览效果,如图6.35所示。
screenshot

相关文章
|
13天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
21 0
|
23小时前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
5 1
|
3天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
6天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
19 10
|
6天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
11 0
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
14天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
16天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0