html 笔记 – 第四章:表 。(xhtml)

<table>元素,是所有表的包含元素。

属性:align。(逐渐淘汰) 他表明表是否与页面的左边、右边或中间对齐。

bgcolor 属性。(逐渐淘汰) 设置表的背景颜色,单位是颜色代码。

border 属性。(逐渐淘汰) 创建外部边框,设置表的外部边框的宽度,单位是像素。

cellpadding 属性。(逐渐淘汰) 用于创建单元格的边和它的内容之间的间隔,单位是像素或者百分比。

cellspacing 属性。(逐渐淘汰) 用于在每个单元格的边框之间创建空格,单位是像素或百分比。

dir 属性。用于指定表中文本的方向,ltr (文本从左到右)和 rtl (文本从右到左)。

frame 属性。(逐渐淘汰)用于控制整个表最外部边框(称为该表的框架)的外观,它的控制程度高于border属性。如果同时使用frame属性和border属性,则frame属性具有更高的优先级。该属性的语法如下:

frame=”frameType”

表中给出了frameType的可能值。

目  的
void 没有外部边框(默认值)
above 仅具有边框
below 仅底部具有边框
hsides 顶部和底部具有边框
lhs 表左边具有边框
rhs 表右边具有边框
vsides 表的左边和右边具有边框
box 所有的边都具有边框
border 所有的边都具有边框

常用的浏览器对frame属性的支持并不是很好,因此最好使用CSS中的相应特性。

rules 属性(逐渐淘汰)用于指示表的哪些内边框将显示,例如行和列。该属性的语法如下所示;默认值是none。

rules=”ruleType”

表中给出了ruleType的可能值。

目    的
none 没有内部边框(默认值)
groups 在所有的表组之间显示内部边框(由<thead>、<tbody>、<tfoot>和<colgroup>元素创建组)
rows 在每一行之间显示水平边框
cols 在每一列之间显示垂直边框
all 在每一行和每一列之间分别显示水平边框和垂直边框

同样,常用的浏览器对该属性的支持并不是很好,凶此最好使用CSS中的相应特性。

summary 属性。用于为非可视化浏览器(例如语音浏览器或盲文浏览器)提供表的目的和结构的概述。这个属性的值不会在IE或Firefox浏览器中显示,但为了可访问性目的,最好在页面中包含它:
summary=”Table shows the operating profit for the last four quarters.The first column indicates the quarter,the second indicates outgoings,the third indicates receipts,and the fourth indicates profit.”

width 属性。(逐渐淘汰)用于指定表的宽度,单位是像素或者是可用空间的百分比。当表没有被嵌套在其他元素中时,可用空间就是屏幕的宽度;否则可用空间是包含它的元素的宽度。
width=”500″或 width=”90%”

包含表行的 <tr> 元素。

出现在同一个<tr>元素中的内容应该显示在相同行中。它可以附带5个属性,其中4个逐渐被淘汰,最好使用CSS中的相应特性替代它们。

align 属性。(逐渐淘汰)指定某行中所有单元格的内容的位置。

目    的
left 内容是左对齐的
right 内容是右对齐的
center 内容在单元格中水平居中
justify 两端对齐单元格中的文本以填充整个单元格
char 单元格的内容与指定字符的第一个实例水平对齐(例如,数字可以与小数点的第一个实例对齐)

默认情况下,<td>单元格通常是左对齐,而<th>单元格通常是居中对齐。遗憾的是,仅有Firefox 2和Netscape 6+浏览器支持文本的两端对齐,并且IE和Firefox浏览器都不支持char值。

bgcolor属性。(逐渐淘汰)设置行的背景色,通常用在<tr>元素中,  以便使得表的行交替显示不同的背景色,从而具有更好的可读性。

char 属性。于指定行中每一个单元格的内容将与特殊字符(该字符称为轴字符)的第一个实例对齐。在HTML中,这个属性的默认字符是小数位,主要思想是小数数字将与小数位对齐,如下所示:
13412.22
232.147
2449.6331
2.12
该属性的语法如下所示:
char=”.”
遗憾的是,在编写本书时,这个潜在非常有用的属性并没有被支持,浏览器没有支持它的需求。

charoff 属性。charoff属性的名称是其作用的缩写,该属性用于指定一个字符偏移量。它指示使用char属性对齐的字符应该根据作为偏移量的字符数量或者文本长度的百分比进行定位。如果这个属性被省略,默认行为是使偏移量与“char属性中指定字符前面所出现的文本内容的最大长度”等值。
charoff=”5″
遗憾的是,在编写本书时,这个属性并没有被支持,浏览器没有支持它的需求。

表示表单元格的<td>元素和<th>元素。

每一个单元格将由一个<td>元素或<th>元素表示,其中前者用于包含表数据的单元格,后者用于包含表题头的单元格。<th>元素的内容通常以粗体显示,与单元格的中心水平对齐。而<td>元素通常以左对齐和非粗体的形式显示(除非通过CSS或者其他元素指示)。

abbr 属性。用于提供单元格内容的缩写版本。如果在小屏幕中使用浏览器查看页面,将显示这个属性中的内容,而不是单元格的完整内容。
abbr=”description of services”
虽然主要的浏览器当前不支持这个属性,但它的应用将会越来越广泛,因为会有越来越多具有小屏幕的设备访问Internet。

align属性(逐漸淘汰)。设置单元格内容的水平对齐方式。
align=”alignment”
align属性的可能值包括left、right、center、justify和char,在本章前面的“align属性”一节中已经描述过这些值。

axis 属性。利用axis属性可以向单元格添加概念上的分类,从而表示n维数据。这个属性的值将是单元格所属的分类的名称列表,名称之间以逗号隔开。

axis=”heavy,old,valuable”

这个属性并不会带来可视的格式化效果,而是用于保存数据,然后可以编程方式使用这些数据,例如查询所有属于某个特定分类的单元格。

bgcolor 属性(逐渐淘汰)。设置单元格的背景颜色。这个属性的值可以是十六进制代码,也可以是一种颜色名——附录D中有关于十六进制代码和颜色名的介绍。

bgcolor=”#rrggbb”

char 属性。用于指定一个字符,该字符的第一个实例将用于水平对齐单元格的内容(具体内容可查看本章前面“包含表行的<tr>元素”一节的“char属性”子节中的描述)。

charoff 属性。用于指定偏移字符的数量,这些字符可以显示在char属性的值指定的字符之前(具体内容可查看本章前面“包含表行的<tr>元素”一节的“charoff属性”子节中的描述)。

colspan 属性。用于指定一个单元格将跨越的表列的数量。colspan属性的值是单元格伸展的列的数量(具体请查看本章后面“使用colspan属性跨越多列”一节)。

colspan=”2″

headers 属性。用于指示哪一个题头对应该单元格。这个属性的值是题头单元格的id属性值的列表,属性值之间以空格隔开:

headers=”income ql”

这个属性的主要目的是用于支持语音浏览器。当该浏览器向用户朗读表时,通常很难确定当前正在查看的是哪一行和哪一列;因此,header属性用于提醒用户当前单元格的数据属于哪一行和哪一列。

height 属性(逐渐淘汰)。用于指定单元格的高度,单位为像素或者与可用空间的百分比:

height=”20″或 height=”10%”

nowrap 属性(逐渐淘汰)。用于阻止单元格中的文本换行。仅当换行会使文本变得无意义时(例如一行代码如果变成两行将无法工作)才应该使用nowrap属性。在HTML中,使用不带属性值的该属性。但是在Transitional XHTML中,这是不被允许的用法,而是应当使用如下形式:

nowrap=”nowrap”

rowspan 属性。用于指定单元格跨越的表行数量,该属性的值是单元格伸展的行数量(具体内容请查看本章后面的“使用rowspan属性跨越多行”一节)。

rowspan=”2″

scope属性。用于指示当前的题头向哪些单元格提供标签或者题头信息。在基本表中,可使用它替代headers属性,但是对这种功能的支持并不是很广泛:

scope=”range”

表4给出了该属性可能的值。

目    的
row 单元格包含行的题头信息
col 单元格包含列的题头信息
rowgroup 单元格包含行组的题头信息(使用<thead>、<tbody>或<tfoot>元素创建行中的单元格组)
colgroup 单元格包含列组的题头信息(使用<col>或<colgroup>元素创建列组,本章后面将讨论这两个元素)

valign属性(逐渐淘汰)。用于指定单元格内容的垂直对齐方式。可能的值包括top、middle、bottom和baseline,本章前面“包含表行的<tr>元素”一节的“valign属性”子节中详细讨论这些属性值。

width属性(逐渐淘汰)。用于指定单元格的宽度,单位是像素或者是可用空间的百分比。

width=”150″或 width=”30%”

仅需要为表的第一行中的单元格指定width属性,剩余行将遵循第一行中的单元格宽度。

如果为<table>元素指定了width属性,并且后面单个单元格的宽度总体上大于width属性指定的宽度,则大多数浏览器将缩小这些单元格的宽度以匹配表的宽度。

也可以添加一个特殊的值叫“*”,这意味着这个单元格将占用表中剩余的可用空间。因此,如果表的宽度是300像素,一行中前两个单元格分别被指定为50像素宽,并且第三个单元格具有值“*”,则它将占用200像素——即表剩余的宽度。如果没有指定表宽度,则第三列将占用浏览器窗口的剩余宽度。

需要注意的是,不能为不同表行中的对应列指定不同宽度的<td>元素。因此,如果表的第一行中具有3个100像素宽的<td>元素,则第二行中不能具有一个200像素宽和两个50像素宽的<td>元素。

4.3  高级表

4.3.1  将表划分为表头、表主体和表尾

l  用于创建独立的表头的<thead>元素

l  用于指示表主体的<tbody>元素

l  用于创建独立的表尾的<tfoot>元素

一个表可能包含多个<tbody>元素,以指示不同的“页面”或者数据组。在源文档中,<tfoot>元素必须出现在<tbody>元素之前。

这3个元素附带的属性相同。除了通用属性之外,它们还能够附带如下属性:

align属性(逐渐淘汰)。用于指定文本和被包含元素的水平位置。align属性的可能值包括left、right、center、justify和char,在本章前面“包含表行的<tr>元素”一节的“align属性”子节中已经描述过这些值。

char属性。指定一个字符,该字符的第一个实例用于水平对齐列组中每个单元格的内容(详细描述可查看本章前面“包含表行的<tr>元素”一节中的“char属性”子节)。

charoff属性。用于指定偏移字符的数量,这些字符可显示在char属性值指定的字符之前(详细描述可查看本章前面“包含表行的<tr>元素”一节中的“charoff属性”子节)。

valign属性(逐渐淘汰)。用于指定每一个元素内的单元格内容的垂直对齐方式。可能的值包括top、middle、bottom和baseline,本章前面“包含表行的<tr>元素”一节的“valign属性”子节中讨论过这些属性值。

4.3.2  在表中添加<caption>

为了添加表标题,可以在起始标签<table>后面和第一行或表头之前使用<caption>元素:

<table>

<caption>Spanning columns using the colspan attribute</caption>

<tr>

默认情况下,大多数浏览器将在表上方居中显示这个属性的内容,如图所示:

12222

4.3.3  使用colspan属性跨越多列

在前面介绍<td>元素和<th>元素时提及,它们能够附带一种属性,这个属性允许表单元格扩展到多列。colspan属性允许单元格跨越多列,这意味着它能够水平跨越网格中的多个矩形。请查看下面的示例,该示例使用逐渐淘汰的border、width、height和bgcolor属性可视化地演示了这一点:

<table border=”1″>

<caption>Spanning columns using the colspan attribute</caption>

<tr>

<td bgcolor=”#efefef” width=”100″ height=”100″>&nbsp;</td>

<td bgcolor=”#999999″ width=”100″ height=”100″>&nbsp;</td>

<td bgcolor=”#000000″ width=”100″ height=”100″>&nbsp;</td>

</tr>

<tr>

<td bgcolor=”#efefef” width=”100″ height=”100″>&nbsp;</td>

<td colspan=”2″ bgcolor=”#999999″>&nbsp;</td>

</tr>

<tr>

<td colspan=”3″ bgcolor=”#efefef” height=”100″>&nbsp;</td>

</tr>

</table>

从中可以看到,对于单元格跨越的每一个额外列,不需要为该行再添加一个单元格。因此,如果一个表具有3列,其中一个单元格跨越了两列,则该行将仅具有两个<td>元素。

注意,在单元格中使用了空格字符(&nbsp;),包含该字符是为了使单元格具有内容;如果表的单元格没有内容,则某些浏览器将不显示背景色(无论该背景色是由CSS还是逐渐被淘汰的bgcolor属性指定)。

12222

4.3.4  使用rowspan属性跨越多行

rowspan属性起到的作用与colspan属性类似;该属性允许单元格垂直跨越多个单元格。当使用rowspan属性时,该行下方对应的单元格必须保留出来:

<table border=”1″>

<caption>Spanning rows using the rowspan attribute</caption>

<tr>

<td bgcolor=”#efefef” width=”100″ height=”100″> </td>

<td bgcolor=”#999999″ width=”100″ height=”100″> </td>

<td rowspan=”3″ bgcolor=”#000000″ width=”100″ height=”100″> </td>

</tr>

<tr>

<td bgcolor=”#efefef” height=”100″> </td>

<td rowspan=”2″ bgcolor=”#999999″> </td>

</tr>

<tr>

<td bgcolor=”#efefef” height=”100″> </td>

</tr>

</table>

rowspan属性的效果如图4-8所示。

 

图4-8

对于利用表控制页面布局的设计人员来说,rowspan属性和colspan属性特别有用;但是这种控制布局的技术已经被CSS中的特性所替代。

4.3.5  使用<colgroup>元素分组列

如果正在创建复杂的表,可以使用<colgroup>元素将一个或多个相邻列分组在一起。当两个或多个相邻列包含相似(类型的信息时,进行分组就非常有用。这样可以将格式应用于列组,而不是单独地赋予每一列样式。在第7章中学习CSS时,将看到如何使用class属性将特定样式与列组关联在一起。

例如,下面的表具有12列。前8列位于第一个列组,接下来的两列位于第二个列组,最后两列位于第三个列组:

<table>

<colgroup span=”8″ width=”75″ class=”mainColumns” />

<colgroup span=”2″ width=”50″ class=”subTotalColumns” />

<colgroup span=”2″ width=”80″ class=”totalColumns” />

<tr>

<td>1</td>

<td>2</td>

<td>12</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>12</td>

</tr>

</table>

当使用<colgroup>元素时,它紧接在起始标签<table>之后。span属性用于指示列组中包含多少列,width属性设置组中每一列的宽度(但在XHTML中应当使用CSS替代该属性),class属性可以用于附加更多的CSS样式。

除了通用属性之外,<colgroup>元素还能附带如下属性:

align  char  charoff  span  valign  width

虽然使用该元素可以执行一些基本的格式化,例如背景色修改,但浏览器对它的支持有限。

align属性(逐渐淘汰)。用于指定<colgroup>元素所包含单元格中的文本的水平位置。align属性可能的值包括left、right、center、justify和char,本章前面“包含表行的<tr>元素”一节中的“align属性”子节中描述过这些属性值。

char属性。用于指定一个字符,该字符的第一个实例用于水平对齐列组中每一个单元格的内容(具体内容可查看本章前面“包含表行的<tr>元素”一节的“char属性”子节中的描述)。

charoff属性。用于指定偏移字符的数量,这些字符可显示在char属性值指定的字符之前(具体内容可查看本章前面“包含表行的<tr>元素”一节的“charoff属性”子节中的描述)。

span属性。用于指定<colgroup>元素所跨越的列的数量,例如:span=”5″

valign属性(逐渐淘汰)。用于指定单元格内容的垂直对齐方式。可能的值包括top、middle、bottom和baseline,关于这些属性值的描述可查看本章前面“包含表行的<tr>元素”一节中的“valign属性”子节。

width属性。用于指定列中每个单元格的宽度,单位为像素或者可用空间的百分比。width属性也可以采用特殊的值“0*“,该值指定列的宽度为显示该列中所有内容所需要的最小宽度。

4.3.6  利用<col>元素让列共享样式

使用<col>元素可以获得与<colgroup>元素类似的效果,但是没有实际地指定结构化的列组。它也可以用于指示某一列与该组中剩余的列具有不同的格式。

<col>元素始终是空元素,因此仅用于附带属性,而不附带内容。

例如,下面的表具有10列,前面的9列虽然不处于一个组中,但它们的格式可以与最后一列不同,因为它们属于独立的集合。

<table>

<colgroup span=”10″>

<col span=”9″ width=”100″ id=”mainColumns” />

<col span=”1″ width=”200″ id=”totalColumn” />

</colgroup>

<tr>

<td>1</td>

<td>2</td>

<td>10</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>10</td>

</tr>

</table>

<col>元素所能附带的属性与<colgroup>元素相同。

遗憾的是,浏览器当前对分组列的支持是有限的。

4.4  表的可访问性问题

因为表能够用于创建网格,很多设计人员过去经常使用它们控制整个文档的布局,并且整个Web页面都建立在一个表中。在考虑如何使用表控制文档的布局之前,重点是要理解它们如何被非可视化用户代理(例如语音浏览器)处理;否则,视觉受损的人可能无法法访问您的页面。为了理解如何使表具有可访问性,首先需要了解表如何线性化页面。

4.4.1  表的线性化

为了理解屏幕阅读器如何阅读表,考虑下面的简单表:

<table border=”1″>

<tr>

<td>Column 1, Row 1</td>

<td>Column 2 Row 1</td>

</tr>

<tr>

<td>Column 1, Row 2</td>

<td>Column 2, Row 2</td>

</tr>

</table>

图4-9给出了这个简单表在浏览器中的外观。

 

图4-9

屏幕阅读器在为访问者阅读表时,趋向于对表执行线性化。这意味着它们从第一行开始,从左到右一个接一个地阅读该行中的单元格,然后移动到下一行中,直到阅读完表中的每一行。图4-9中的单元格的阅读顺序如下所示:

l  第1行第1列

l  第1行第2列

l  第2行第1列

l  第2行第2列

4.4.2  用于布局的表线性化

因为表可以用于控制元素在页面中的显示位置,所以Web开发者经常习惯于使用表安排文本或图像在页面中显示的位置。因为设计人员可以控制表的一些特性,例如每个单元格的宽度,所以可以创建具有多个文本列的布局,并确定每列的宽度。通常整个Web页面的主体包含于一个表中。

注意:

虽然W3C的意图是让表单独用于存放数据,而让CSS作为定位页面中的元素的首选机制,但实现该意图的前提是浏览器需要改进对CSS定位功能的支持(第9章中将介绍这方面的内容),并且更多的设计人员需要了解如何使用CSS进行定位。因此,在很长一段时间内,表很可能仍将用于控制Web页面的布局。

第9章和第10章中将更多地介绍如何使用表和CSS来控制元素在页面中的位置,但是现在应当考虑如何在为屏幕阅读器用户线性化的表中编写页面,并且应当在确定表能够正确线性化之后才使用其进行布局。

本章前面提及,可以在表单元格内包含标记,只要整个元素包含在该单元格中。这意味着可以在表单元格中放置另外一个表,创建所谓的嵌套表。

如果使用嵌套表,当屏幕阅读器遇到包含另一个表的单元格时,它必须对嵌套表线性化之后,才能移动到下一个单元格。例如,图4-10中给出了一种常用的页面布局。

 

图4-10

图4-10中的布局由一个具有三行两列的表创建。

l  在第一行中,题头和徽标位于一个跨越两列的单元格中。

l  在第二行中,第一个单元格包含了导航栏,第二个单元格包含了一个嵌套表,该嵌套表具有3行1列。

l  在第三行中,单元格跨越了两列,类似于第一行。

下面是这个页面的代码(注意,在该源文档中也具有一些CSS规则,用于赋予该表样式,ch04_eglO.html):

<table>

<tr>

<td colspan=”2″ class=”heading”>Page heading and logo</td>

</tr>

<tr>

<td class=”navigation”>Navigation item 1 <br />

Navigation item 2 <br />

Navigation item 3 <br />

Navigation item 4 <br />

</td>

<td>

<table>

<tr><td>Article 1</td></tr>

<tr><td>Article 2</td></tr>

<tr><td>Article 3</td></tr>

</table>

</td>

</tr>

<tr>

<td colspan=”2″ class=”footer”>Footer</td>

</tr>

</table>

注意:

这个示例本来可以对第一行使用<thead>元素,对最后一行使用<tfoot>元素。但是因为表的内容实际上不是表列数据,所以<table>元素的使用并不是它的真正意图;此处将仅依赖于一些基本元素。

在这个示例中,页面中元素的阅读顺序如下:

l  Page heading and logo

l  Navigation item 1

l  Navigation item 2

l  Navigation item 3

l  Navigation item 4

l  Article 1

l  Article 2

l  Article 3

l  Footer

实际上最好使用语音浏览器测试表,例如www.w3.org/WAIUReferences/Browsing#2中列举的某个语音浏览器。

记住,如果使用表控制页面布局,应当使用样式表而不是标记来控制表中文本的外观(例如,不要只是使用<th>元素来获得文本的居中和加粗效果,<th>元素仅用于题头。不要使用<em>元素获得斜体文本,因为屏幕阅读器可能在语音中添加音调变化以强调该文本)。

4.4.3  用于数据的表线性化

如果使用表表示数据,应当尽量使表简单,单元格不要跨越多行和多列,因为它们会使表变得非常复杂。下面是创建用于存放数据的表所使用的一些一般性指导原则:

l  尽量使用<th>元素指示表题头。如果不喜欢它们的可视化表示,可以使用CSS样式覆盖该元素。

l  如果不能使用<th>元素指示表题头,可以对带有题头的单元格使用具有row或col值的scope属性。

l  始终将题头放置在表的第一行第一列中。

l  如果表比较复杂,并且其中包含一些跨越多个单元格的单元格,则对这些单元格使用headers属性,并且清晰地指示哪一个题头应用于线性化过程中的下一个单元格。

4.5  本章小结

在本章中您已经看到,对于web开发人员来说,表是一种非常强大的工具。表不仅可以用于布局表列数据,也经常用于控制页面的布局。

本章介绍所有的表如何基于一种网格模式以及如何使用4种基本元素:<table>,用于包含每个表;<tr>,用于包含表行;<td>,用于包含表数据的单元格;<th>,用于表示包含题头的单元格。

本章也介绍了如何为表添加表头、表尾和标题。当表的长度大于浏览器窗口或者一页打印纸张时,最好在表中添加<thead>元素和<tfoot>元素,它们有助于读者通过表头和表尾中的信息了解表中的内容。

单元格也可以跨越多行或多列,但对于包含数据的表来说应当尽量避免这样操作,因为这将使听觉浏览器很难向用户阅读表中的内容。也可以将列分组到一起,以便能够多保持一致的结构,从而让它们共享相同的样式和属性。

最后,本章给出了关于表使用的一些可访问性问题。清楚了解表的线性化过程是非常重要的(屏幕阅读器在为用户阅读表之前执行线性化过程),以便视觉受损的用户能够更好地访问网站。本章最后给出了一些能够使表对所有访问者具有更好的可访问性的指导原则。

发表评论