学习笔记第九章使用CSS美化表格-CSDN博客

第9章使用CSS美化表格

学习重点

正确使用表格标签；
设置表格和单元格属性；
设计表格的CSS样式。

9.1 表格的基本结构

表格由行、列、单元格3部分组成，单元格时行与列交叉的部分。

在HTML中，表格由<table>标签来定义，每个表格均有若干行，行由<tr>标签定义，每行被分割为若干单元格，单元格由<td>标签定义。字母td表示表格数据（即单元格内容）。

9.1.1 早期表格的结构

略，什么实质内容都没有。

9.1.2 标准化的表格结构

设计表格相关标签的语义性与使用规则说明如下：

<table>：定义表格，在<table>标签内，放置其它标签。
<caption>：定义表格标题，紧随<table>标签之后，一个表格只能有一个标题。
<th>：定义表头单元格。
<tr>：定义一行。
<td>：定义一个单元格。
<thead>：定义表头结构。
<tbody>：定义表格主体结构。
<tfoot>：定义表格的页脚结构。
<col>：在表格中定义针对一个或多个列的属性值，只能在<table>或<colgroup>标签中使用。
<colgroup>：定义表格列的分组，可以对列组进行格式化，只能在<table>标签中使用。

9.2 创建表格

9.2.1 简单的表格

略，挺简单的。

9.2.2 包含表头的表格

在数据表格中，每列可以包含一个标题，在HTML中被称为表头单元格，使用th元素定义表头单元格。

9.2.3 包含标题的表格

<caption>title</caption>

9.2.4 结构化的表格

thead、tfoot和tbody元素可以对表格中的进行分组。

使用thead元素可以定义表格的表头，一般与tbody和tfoot元素结合使用。其中tbody元素对主题内容进行分组，而tfoot元素对HTML表格中的表注（页脚）内容进行分组。

注意：当使用thead、tbody和tfoot元素时，必须使用全部的元素，排列的顺序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚。

9.2.5 列分组的表格

col和colgroup元素可以对表格中的列进行分组。

使用<col>标签可以为表格中一个或多个列定义属性值。

使用<colgroup>标签也可以对表格中的列进行组合，以便对其进行格式化。

9.3 设置表格属性

表格标签包含大量属性，HTML5支持的<table>标签属性说明如下：

HTML5支持的<table>标签属性
属性	说明
border	定义表格边框，值为整数，单位为像素，值为0时，隐藏表格边框线
cellspacing	定义数据表单元格的边界
cellpadding	定义数据表单元格
width	定义数据表的宽度
frame	设置数据表的外边框线显示。取值有：void（不显示边框线）、above（顶端边框线）、below（底部）、hsides（顶部和底部）、lhs（左侧）、rhs（右侧）、vsides（左右两侧）、box（四边）、border（四边）
rules	设置数据表的内边线显示，对border属性的功能拓展。取值有：none（不显示）、groups（仅显示分组内边线）、rows（显示每行的水平线）、cols（显示每列的垂直线）、all（显示所有行与列的内边线）
summary	定义表格的摘要

9.3.1 设计单线表格

<table border="1" frame="hsides" rules="rows" width="100%">

通过frame属性定义表格仅显示上下框线，使用rulers属性定义表格仅显示水平内边线，从而设计出单行线数据表格效果。

9.3.2 设计井字表格

<table border="1" frame="void" cellpadding="6" cellspacing="16">

通过frame属性隐藏表格外框，使用cellpadding属性定义单元格内容的边距为6像素，单元格之间的间距为16像素。

9.3.3 设计细线表格

<table border="1" rules="all" width="100%">

9.3.4 设置表格说明

使用<summary>设置摘要，该属性的值不会显示，但是屏幕阅读器可以利用该属性，也方便机器进行表格内容检索。

<table border="1" rules="all" width="100%" summary="rules属性取值说明">

9.4 设置单元格属性

单元格标签（<td>和<th>）包含大量属性，HTML5支持的<td>和<th>属性说明如下：

HTML5支持的<td>和<th>标签属性
属性	说明
abbr	定义单元格中内容的缩写版本
align	定义单元格内容的水平对齐方式。取值：right、left、center、justify（两端对齐）、char（对准指定字符）
axis	对单元进行分类
char	定义根据哪个字符来进行内容的对齐
charoff	定义对齐字符的偏移量
colspan	定义单元格可以横跨的列数
headers	定义与单元格相关的表头
rowspan	定义单元格可横跨的行数
scope	定义将表头数据与单元格数据相关联的方法。取值：col（列的表头）、colgroup（列表的组头）、row（行的表头）、rowgroup（行组的表头）
valign	定义单元格内容的垂直排列方式。取值：top、middle、bottom、baseline（基线对齐）

9.4.1 单元格跨列或跨行显示

colspan和rowspan分别用来定义单元格可跨列或跨行显示，取值为正整数，如果取值为0，则表示浏览器横跨到最后一列/行。

9.4.2 定义表头单元格

使用scope属性，可以把单元格与表头单元格联系起来。

属性值为row，表示将当前行的所有单元格和表头单元格绑定起来；
属性值为col，将当前列的所有单元格和表头单元格绑定起来；
属性值为rowgroup，将单元格所在的行组（由<thead>、<tbody>或<tfoot>标签定义）和表头单元格绑定起来；
属性值为colgroup，将单元格所在的行组（由<col>或<colgroup>标签定义）和表头单元格绑定起来。

不会在普通浏览器中产生任何视觉效果，故很难判断浏览器是否支持scope属性。

9.4.3 为单元格指定表头

使用header属性可以为单元格指定表头，属性值时一个表头名称的字符串，名称使用ID属性定义的不同表头单元格的名称。

 1 <table border="1" width="100%">
 2     <tr>
 3         <th id="name">姓名</th>
 4         <th id="E-mail">电子邮件</th>
 5         <th id="Phone">电话</th>
 6         <th id="Address">地址</th>
 7     </tr>
 8     <tr>
 9         <td headers="name">张三</td>
10         <td headers="E-mail">zhangsan@qq.com</td>
11         <td headers="Phone">13455555555</td>
12         <td headers="Address">北京</td>
13     </tr>
14 </table>

为单元格指定表头

9.4.4 定义单元格信息缩写

使用abbr属性可以为单元格中的内容定义缩写内容，无视觉效果方面的变化，主要为机器检索服务。

9.4.5 对单元格进行分类

使用axis属性可以对单元格进行分类，用于对相关的信息列进行组合。通过分类属性axis，可以快速检索特定信息。

目前，还没有浏览器支持该属性。

9.5 设计CSS样式

CSS为表格定义了5个专用属性，详细说明如下：

CSS表格属性列表
属性	取值	说明
border-collapse	separate（边分开）\|collapse（边合并）	定义表格的行与单元格的边时合并还是分开
border-spacing	length	定义当表格边框独立时，行与单元格的边在横向和纵向上的间距
caption-side	top\|bottom	定义表格的caption对象位于表格的顶部或底部
empty-cells	show\|hide	定义当单元格无内容时，是否显示该单元格的边框
table-layout	auto\|fixed	定义表格的布局算法，可以通过该属性改善表格呈递性能。如果设置fixed，会使IE以一次一行的方式呈递表格内容；如果设置auto，则表格在每一单元格内所有内容读取计算之后才会显示出来