学习笔记 第九章 使用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>标签属性说明如下：
| 属性 | 说明 |
|---|---|
| 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>属性说明如下：
| 属性 | 说明 |
|---|---|
| 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个专用属性，详细说明如下：
|
属性 |
取值 |
说明 |
|---|---|---|
|
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;}
第一个值表示单元格之间的行间距，第二个值表示单元格之间的列间距，该属性值不可以为负值。定义间距后，空间由表格背景填充。
使用该属性应该注意：
- 早起IE浏览器不支持该属性，要定义相同效果的样式，需要结合传统<table>标签的cellspacing属性来设置。
- 使用cellspacing属性时，应确保单元格之间保持相互独立性，不能使用border-collapse:collapse;样式定义合并表格内单元格的边框。
- cellspacing属性不能够使用CSS的margin属性来代替。对于td元素来说，不支持margin属性。
- 可以为单元格定义补白，此时使用CSS的padding属性与单元格的cellpadding属性实现效果是相同的。
9.5.3 隐藏空单元格
如果表格单元格的边框处于分离状态（border-collapse:separate;），可以使用CSS的empty-cells属性设置空单元格是否显示。
- 值为show时，显示空单元格；
- 值为hide时，隐藏空单元格。
空单元格——没有可视内容的单元格。如果单元格的visibility属性值为hidden，即便单元格包含内容，也认为是无可视内容。而“ ”和其它空白字符为可视内容。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元素的样式具有最大优先权，以此类推。
