学习笔记 第九章 使用CSS美化表格

第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属性定义的不同表头单元格的名称。

 <table border="1" width="100%">
     <tr>
         <th id="name">姓名</th>
         <th id="E-mail">电子邮件</th>
         <th id="Phone">电话</th>
         <th id="Address">地址</th>
     </tr>
     <tr>
         <td headers="name">张三</td>
         <td headers="E-mail">zhangsan@qq.com</td>
         <td headers="Phone">13455555555</td>
         <td headers="Address">北京</td>
     </tr>
 </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，则表格在每一单元格内所有内容读取计算之后才会显示出来

9.5.1 设计细线表格

使用CSS的border属性代替<table>标签的border属性定义表格边框，以提升设计效率，优化代码结构。

9.5.2 定义单元格间距和空隙

CSS定义了border-spacing属性，该属性能够分离单元格间距。取值包含1个或2个值。当定义一个值时，则定义单元格行间距和列间距都为该值，如：

table{ border-spacing:20px;}

如果分别定义行间距和列间距，就需要定义两个值，如：

table{border-spacing: 10px 30px;}

第一个值表示单元格之间的行间距，第二个值表示单元格之间的列间距，该属性值不可以为负值。定义间距后，空间由表格背景填充。

使用该属性应该注意：

1. 早起IE浏览器不支持该属性，要定义相同效果的样式，需要结合传统<table>标签的cellspacing属性来设置。
2. 使用cellspacing属性时，应确保单元格之间保持相互独立性，不能使用border-collapse:collapse;样式定义合并表格内单元格的边框。
3. cellspacing属性不能够使用CSS的margin属性来代替。对于td元素来说，不支持margin属性。
4. 可以为单元格定义补白，此时使用CSS的padding属性与单元格的cellpadding属性实现效果是相同的。

9.5.3 隐藏空单元格

如果表格单元格的边框处于分离状态（border-collapse:separate;），可以使用CSS的empty-cells属性设置空单元格是否显示。

• 值为show时，显示空单元格；
• 值为hide时，隐藏空单元格。

空单元格——没有可视内容的单元格。如果单元格的visibility属性值为hidden，即便单元格包含内容，也认为是无可视内容。而“&nbsp;”和其它空白字符为可视内容。ASCⅡ字符中的回车符（“\0D”）、换行符（“\0A”）、Tab键（“\09”）和空格键（“\20”）表示无可视内容。

如果表格行中所有单元格的empty-cells属性都为hide，且都不包含任何可视内容，那么整行就等于设置了display:none。

9.5.4 定义标题样式

使用CSS的caption-side属性可以定义标题的显示位置，该属性取值包括top、bottom、left（非标准）、right（非标准）。

如果要水平对齐标题文本，则可以使用text-align属性。对于左右两侧的标题，可以使用vertical-align属性进行垂直对齐，取值包括top、middle和bottom，默认top。

td元素的样式具有最大优先权，以此类推。