表格元素

1、生成基本的表格

有三个元素是每个表格都必须要有的：table、tr 和 td。

元素	table
元素类型	流
允许具备的父元素	任何可以包含流元素的元素
局部属性	border
内容	caption、colgroup、thead、tbody、tfoot、tr、th 和 td 元素
标签用法	开始标签和结束标签
习惯样式	table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }

下一个核心表格元素是 tr，它表示表格中的行。HTML 表格基于行而不是列，每个行必须分别标记。

元素	tr
元素类型	无
允许具备的父元素	table、thead、tfoot 和 tbody 元素
局部属性	无
内容	一个或多个 td 或 th 元素
标签用法	开始标签和结束标签
习惯样式	tr { display: table-row; vertical-align: inherit; border-color: inherit;}

三个核心元素中的最后一个是 td，它表示表格中的单元格。

元素	td
元素类型	无
允许具备的父元素	tr 元素
局部属性	colspan、rowspan、headers
内容	流内容
标签用法	开始标签和结束标签
习惯样式	td { display: table-cell; vertical-align: inherit; }

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><table><tr><td>Apples</td><td>Green</td><td>Medium</td></tr><tr><td>Oranges</td><td>Orange</td><td>Large</td></tr></table></body>
</html>

此例定义了一个两行（分别由两个 tr 元素表示）的表格。每行有三列，一个 td 元素代表一列。td 元素可以包含任何流内容，但本例只使用了文字。

浏览器会调整行与列的尺寸以维持表格的形式。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><table><tr><td>Apples</td><td>Green</td><td>Medium</td></tr><tr><td>Oranges</td><td>Orange</td><td>Large</td></tr><tr><td>Pomegranate</td><td>A kind of greeny-red</td><td>Varies from medium to large</td></tr></table></body>
</html>

2、添加表头单元格

th 元素表示表头的单元格，它可以用来区分数据和对数据的说明。

元素	th
元素类型	无
允许具备的父元素	tr 元素
局部属性	colspan、rowspan、scope 和 headers
内容	短语内容
标签用法	开始标签和结束标签
习惯样式	th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><table><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td><td>Varies from medium to large</td></tr></table></body>
</html>

3、为表格添加结构

在设置表格样式的时候就会发现，要区别全是 th 元素的行中的 th 元素和与数据单元格混在一行中的 th 元素并不容易。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>tr > th { text-align:left; background:grey; color:white}tr > th:only-of-type {text-align:right; background: lightgrey; color:grey}</style></head><body><table><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td><td>Varies from medium to large</td></tr></table></body>
</html>

此例使用了两个选择器。一个选择器匹配所有 th 元素，另一个只匹配 tr 元素的子元素中唯一的 th 元素。

要想灵活处理这个问题，可以使用 thead、tbody 和 tfoot 元素。

3.1、表示表头和表格主题

tbody 元素表示构成表格主体的全体行——不包括表头行和表脚行（它们分别由 thead 和 tfoot 元素表示）。

元素	tbody
元素类型	无
允许具备的父元素	table 元素
局部属性	无
内容	零个或多个 tr 元素
标签用法	开始标签和结束标签
习惯样式	tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }

thead 元素用来标记表格的标题行。

元素	thead
元素类型	无
允许具备的父元素	table 元素
局部属性	无
内容	零个或多个 tr 元素
标签用法	开始标签和结束标签
习惯样式	thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

如果没有 thead 元素的话，所有 tr 元素都会被视为表格主体的一部分。下面代码在示例表格中添加了 thead 和 tbody 元素，并且相应地使用了更为灵活的 CSS 选择器。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}</style></head><body><table><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr></thead><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td><td>Varies from medium to large</td></tr></tbody></table></body>
</html>

3.2、添加表脚

tfoot 元素用来标记组成表脚的行。

元素	tfoot
元素类型	无
允许具备的父元素	table 元素
局部属性	无
内容	零个或多个 tr 元素
标签用法	开始标签和结束标签
习惯样式	tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th, tfoot th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}</style></head><body><table><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr></thead><tfoot><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>                </tfoot><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td><td>Varies from medium to large</td></tr></tbody></table></body>
</html>

4、制作不规则表格

不规则表格要用到 td 和 th 元素中的 colspan 和 rowspan 属性。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th, tfoot th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}[colspan], [rowspan] {font-weight:bold; border: medium solid black}thead [colspan], tfoot [colspan] {text-align:center; }</style></head><body><table><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th colspan="2">Size & Votes</th></tr></thead><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td><td>500</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td><td>450</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and sizes. </td><td>203</td></tr><tr><th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td></tr><tr><td>Pineapple</td><td>Brown</td><td>Very Large</td></tr></tbody><tfoot><tr><th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th></tr>                </tfoot></table></body>
</html>

想要一个单元格纵跨多行要用 rowspan 属性，为该属性设置的值就是所跨行数。同样，想让一个单元格横跨多列要用 colspan 属性。

colspan 和 rowspan 属性应该用在要占据的网格左上角那个单元格上。正常情况下位于它所跨越的位置上的 td 和 th 元素此时则被省略。

5、把表头与单元格关联起来

td 和 th 元素都定义了 header 属性，它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。header 属性的值可被设置为一个或多个 th 单元格的 id 属性值。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th, tfoot th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}thead [colspan], tfoot [colspan] {text-align:center; }</style></head><body><table><thead><tr><th id="rank">Rank</th><th id="name">Name</th><th id="color">Color</th><th id="sizeAndVotes" colspan="2">Size & Votes</th></tr></thead><tbody><tr><th id="first" headers="rank">Favorite:</th><td headers="name first">Apples</td><td headers="color first">Green</td><td headers="sizeAndVote first">Medium</td><td headers="sizeAndVote first">500</td></tr><tr><th id="second" headers="rank">2nd Favorite:</th><td headers="name second">Oranges</td><td headers="color second">Orange</td><td headers="sizeAndVote second">Large</td><td headers="sizeAndVote second">450</td></tr></tbody><tfoot><tr><th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th></tr>                </tfoot></table></body>
</html>

此例为 thead 和 tbody 中的每一个 th 元素都设置了全局 id 属性值。tbody 中的每一个 td 和 th 元素都通过设置 header 属性将相应单元格与列表头关联起来。其中 td 元素还指定了所关联的行表头（出现在第一列中的表头）。

6、为表格添加标题

caption 元素可以用来为表格定义一个标题并将其余表格关联起来。

元素	caption
元素类型	无
允许具备的父元素	table 元素
局部属性	无
内容	流内容（但不能是 table 元素）
标签用法	开始标签和结束标签
习惯样式	caption { display: table-caption; text-align: center; }

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th, tfoot th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}[colspan], [rowspan] {font-weight:bold; border: medium solid black}thead [colspan], tfoot [colspan] {text-align:center; }caption {font-weight: bold; font-size: large; margin-bottom:5px}</style></head><body><table><caption>Results of the 2011 Fruit Survey</caption><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th colspan="2">Size & Votes</th></tr></thead><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td><td>500</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td><td>450</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and sizes. </td><td>203</td></tr><tr><th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td></tr><tr><td>Pineapple</td><td>Brown</td><td>Very Large</td></tr></tbody><tfoot><tr><th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th></tr>                </tfoot></table></body>
</html>

一个表格只能包含一个 caption 元素。它不必是表格的第一个子元素，但是无论定义在什么位置，它总会显示在表格的正上方。

7、处理列

HTML 中的表格是基于行的。单元格的定义都要放在 tr 元素，而表格则是一行一行地组建出来的。因此对列应用样式有点不方便，对于包含不规则单元格的表格更是如此。这个问题的解决方法是使用 colgroup 和 col 元素。colgroup 代表一列。

元素	colgroup
元素类型	无
允许具备的父元素	table 元素
局部属性	span
内容	零个或多个 col 元素（只能未设置 span 属性时才能使用）
标签用法	开始标签和结束标签
习惯样式	colgroup { display: table-column-group; }

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th, tfoot th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}[colspan], [rowspan] {font-weight:bold; border: medium solid black}thead [colspan], tfoot [colspan] {text-align:center; }caption {font-weight: bold; font-size: large; margin-bottom:5px}#colgroup1 {background-color: red}#colgroup2 {background-color: green; font-size:small}</style></head><body><table><caption>Results of the 2011 Fruit Survey</caption><colgroup id="colgroup1" span="3"/><colgroup id="colgroup2" span="2"/><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th colspan="2">Size & Votes</th></tr></thead><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td><td>500</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td><td>450</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and sizes. </td><td>203</td></tr><tr><th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td></tr><tr><td>Pineapple</td><td>Brown</td><td>Very Large</td></tr></tbody><tfoot><tr><th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th></tr>                </tfoot></table></body>
</html>

此例中定义了两个 colgroup 元素。span 属性指定了 colgroup 元素负责的列数。代码中第一个 colgroup 负责表格中的前三列，另一个 colgroup 负责剩余两列。两个 colgroup 元素都设置了 id 属性，并以其 id 值为选择器定义了相应的 CSS 样式。

该图揭示了 colgroup 元素使用中的一些重要特点。首先，应用到 colgroup 上的 CSS 样式在具体程度上低于直接应用到 tr、td 和 th 元素上的样式。从应用到 thead、tfoot 和第一列 th 元素上的样式未受到 colgroup 元素上的样式的影响可以看出这一点。要是把针对 colgroup 元素的样式之外的样式删除掉，那么所有单元格都会受到 colgroup 样式的影响。

第二，不规则单元格被计入起始列。从表格的第三行可以看出这一点。在此行中有一个应用到了第一种样式的单元格扩展到了由另一个 colgroup 元素负责的区域。

最后，colgroup 元素的影响范围覆盖了列中所有的单元格，包括那些位于 thead 和 tfoot 元素中的单元格，不管它们是用 th 还是 td 元素定义的。colgroup 元素的特别之处就在于它影响到的元素并未包含在其内部。因此该元素无法用做更具体的选择器的基础（如 #colgroup1 > td 这个选择器不会有任何匹配元素）。

7.1、表示个别的列

也可以不用 colgroup 元素的 span 属性，改用 col 元素指定组中的各列。

元素	col
元素类型	无
允许具备的父元素	colgroup 元素
局部属性	span
内容	无
标签用法	虚元素形式
习惯样式	col { display: table-column; }

使用 col 元素的好处在于能够获得更多的控制权。有了它，既能对一组列应用样式，也能对该组中个别的列应用样式。col 元素位于 colgroup 元素之中，每个 col 元素代表列组中的一列。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>thead th, tfoot th { text-align:left; background:grey; color:white}tbody th { text-align:right; background: lightgrey; color:grey}[colspan], [rowspan] {font-weight:bold; border: medium solid black}thead [colspan], tfoot [colspan] {text-align:center; }caption {font-weight: bold; font-size: large; margin-bottom:5px}#colgroup1 {background-color: red}#col3 {background-color: green; font-size:small}</style></head><body><table><caption>Results of the 2011 Fruit Survey</caption><colgroup id="colgroup1"><col id="col1And2" span="2"/><col id="col3"/></colgroup><colgroup id="colgroup2" span="2"/><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th colspan="2">Size & Votes</th></tr></thead><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td><td>500</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td><td>450</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and sizes. </td><td>203</td></tr><tr><th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td></tr><tr><td>Pineapple</td><td>Brown</td><td>Very Large</td></tr></tbody><tfoot><tr><th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th></tr>                </tfoot></table></body>
</html>

可以用 col 元素的 span 属性让一个 col 元素代表几列。不用 span 属性的 col 元素只代表一列。此例分别为一个 colgroup 元素和其中的一个 col 元素设定了样式。

8、设置表格边框

table 元素定义了 border 属性。使用这个属性就是告诉浏览器这个表格是用来表示格式数据而不是用来布置其他元素的。大多数浏览器见到 border 属性后会在表格和每个单元格周围绘出边框。

<!DOCTYPE HTML>
<html><head><title>Example</title><meta name="author" content="Adam Freeman"/><meta name="description" content="A simple example"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><table border="1"><caption>Results of the 2011 Fruit Survey</caption><colgroup id="colgroup1"><col id="col1And2" span="2"/><col id="col3"/></colgroup><colgroup id="colgroup2" span="2"/><thead><tr><th>Rank</th><th>Name</th><th>Color</th><th colspan="2">Size & Votes</th></tr></thead><tbody><tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td><td>500</td></tr><tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td><td>450</td></tr><tr><th>3rd Favorite:</th><td>Pomegranate</td><td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and sizes. </td><td>203</td></tr><tr><th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td></tr><tr><td>Pineapple</td><td>Brown</td><td>Very Large</td></tr></tbody><tfoot><tr><th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th></tr>                </tfoot></table></body>
</html>

border 属性的值必须设置为 1 或空字符串（“”）。该属性并不控制边框的样式，那是 CSS 的工作。

尽管 border 属性会让浏览器为表格和每个单元格添加边框，还是需要用 CSS 选择器分别针对各种元素重设边框样式。在设计 CSS 选择器时可用的办法有很多：表格的外边框可以通过 table 元素控制；表头、表格主体和表脚可以分别通过 thead、tbody 和 tfoot 元素控制；列可以通过 colgroup 和 col 元素控制；各个单元格可以通过 th 和 td 元素控制。而且，就算别的方法都不管用，至少还可以使用全局属性 id 和 class 确定目标。

前端学习笔记之——表格元素相关推荐

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
html5表格所有属性,HTML5学习笔记之表格标签
HTML5学习笔记之表格标签其他HTML5相关文章一.表格标签 image 1.作用: 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.格式 ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
3、Latex学习笔记之表格篇
目录表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...

前端学习笔记之——表格元素