07HTML5学习之表格

1 表格概览

  使用表格的目的在于组织信息。

• 表格定义从<table>标签开始，</table>标签结束。
• 表格中的每一行从<tr>标签开始，</tr>标签结束。
• 表格中的每一个单元格从<td>标签开始，</td>标签结束。
• 表格单元格可以包含文本、图片以及其他HTML元素。

1.1 表格元素

  表格是块显示元素，它包含了表格形式的信息。下表列出了表格的常见属性，现代网页开发使用CSS属性来定义表格样式。

属性名称	取值	用途
align	left(左对齐,默认)，right(右对齐)，center(居中)	表格的水平对齐方式（HTML5不支持）
bgcolor	有效的颜色值	表格背景色（HTML5不支持）
border	0 1~100	0为默认值，表示没有可见边框；1~100内的数为像素值，表示表格的可见边框的宽度
cellpadding	数值	像素值，规定单元格边沿与其内容之间的空白宽度（HTML5不支持）
cellspacing	数值	像素值，规定表格中单元格之间的空白量（HTML5不支持）
summary	文本描述	关于表格内容摘要的文本描述，用于提供无障碍访问（HTML5不支持）
title	文本描述	关于表格简介的文本描述；鼠标移过表格区域时，某些浏览器会显示该值
width	数值或百分比	指定表格的宽度（HTML5不支持）

1.1.1 border属性

  早期HTML中，border属性被用来指定表格是否显示以及显示多宽的可见边框。而在HTML5中，代码border="1"会让浏览器呈现默认的表格以及单元格周围的边框，而表格的样式则由CSS来设置。

1.1.2 表格标题

  表格的caption（标题）元素常用于描述其内容。它从<caption>标签开始，</caption>标签结束，其间文本会显示在网页中的表格上方。这个位置也可以使用CSS来指定。

2 表格行、单元格与表头

2.1 表格行元素

  表格行元素用于在网页上配置表格内的行，它从<tr>标签开始，</tr>标签结束。下表列出HTML5已不再使用的表格行元素属性：

属性名称	取值	用途
align	left(左对齐,默认)，right(右对齐)，center(居中)	表格的水平对齐方式（HTML5不支持）
bgcolor	有效的颜色值	表格背景色（HTML5不支持）

2.2 表格数据元素

  表格数据元素用于在网页上配置表格行内的单元格。单元格从<td>标签开始，</td>标签结束。下表列出了表格数据单元格元素的属性，某些属性已经不再受HTML5支持，应当避免使用。

属性名称	取值	用途
align	left(左对齐,默认)，right(右对齐)，center(居中)	表格的水平对齐方式（HTML5不支持）
bgcolor	有效的颜色值	表格背景色（HTML5不支持）
colspan	数值	单元格跨越的列数
headers	某列或某行的表头单元格的id值	将表的数据单元格与表头单元格关联；可通过屏幕阅读器访问
height	数值或百分比	单元格高度（HTML5不支持）
rowspan	数值	单元格跨越的行数
scope	row（行），col（列）	表格单元格内容的范围（行或列）；可通过屏幕阅读器访问
valign	top（顶对齐），middle（垂直居中，默认），bottom（底对齐）	单元格内容的垂直对齐方式（HTML5不支持）
width	数值或百分比	指定表格的宽度（HTML5不支持）

2.3 表格表头元素

  表头元素显示的文本是居中并加粗的。该元素从<th>标签开始，</th>标签结束。

3 跨行和跨列

  在表格数据或表头元素中运用colspan和rowspan属性，我们可以改变表格的风格外观。设置此类较复杂的表格时，最好先在纸上画好蓝图，在输入HTML代码。

3.1 colspan属性

  colspan属性指定某个单元格所占用的列数。

3.2 rowspan属性

  rowspan属性指定某个单元格所占用的行数。

4 配置一张可无障碍访问的表格

  无障碍建议：

• 使用表头元素来指定列标或行标
• 使用标题元素为表格设置文本标题或简要说明
  示例如下：

<table border="1">
<caption>Bird Sightings</caption>
   <tr>
      <th id="name">Name</th>
      <th id="date">Date</th>
   </tr>
   <tr>
      <td header="name">Bobolink</th>
      <td header="date">5/25/10</th>
   </tr>
   <tr>
      <td header="name">Upland Sandpiper</td>
      <td header="data">6/03/10</td>
   </tr>
</table>`

5 用CSS设置表格样式

  现在流行使用CSS指定表格样式。下表列出了在设置表格样式方面，HTML属性与CSS属性的对应关系。

HTML属性	CSS属性
align	为了对齐表格，需要配置table选择器的width和margin属性。下列代码可使表格居中： table { width: 75%; margin: auto; } 使用text-align属性来对齐单元格中的内容
width	width
height	height
cellpadding	padding
cellspacing	border-spacing；数字值（px或em）或百分比值。如果将其设为0，可省略单位。一个带单位（px或em）的数字值，同时指定了水平和纵向的间距。两个带单位（px或em）数字值：第一个值指定水平间距，第二个指定纵向间距。border-collapse配置边框区域。值为separate（默认）和collapse。border-collapse: collapse;表示去除表格和单元格间的多于间距。
bgcolor	background-color
valign	vertical-align指定内容的纵向位置安排。值可以是像素数值或百分比、baseline（默认）、sub（下标）、super（上标）、top、text-top、middle、bottom以及text-bottom
border	border，border-style，border-spacing
无	background-image
无	caption-side指定caption的位置。值可以是top（默认）或bottom。

实践代码见 博客

6 CSS3结构化伪类

  使用结构化伪类（pseudo-classes）可以高效实现“斑马纹”效果。根据元素在文档结构中的位置就可选择并应用不同的类。下表列出了常用的CSS3结构化伪类选择器以及它们的用途。

伪类	用途
:first-of-type	匹配特定类型中的第一个元素
:first-child	匹配某元素的第一个子元素（CSS2选择器）
:last-of-type	匹配特定类型中的最后一个元素
:last-child	匹配某元素的最后一个子元素
:nth-of-type(n)	匹配指定类型中的第n个元素。值为：某个数字、odd（奇数）或even（偶数）

实践代码见 博客

7 配置表格中的各个部分

  在编写表格代码时，我们面临许多配置选项。可以将表格的行放在一起形成三种类型的组合：用<thead>标签的表头；用<tbody>标签的表格主体；用<tfoot>标签的表格脚注。

在使用行组时，<thead>和<tfoot>节的代码一定要放在<tbody>之前，这样才能通过W3C的XHTML验证。

参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017