搜索
第4章表表通常用于显示各种样式的数据，例如时间表、财政报告和体育运动结果。因此，当需要以行和列的形式显示信息时，可以使用本章中介绍的标记来创建表。本章首先介绍用于创建各种表的基本元素。然后介绍表的一些高级功能，例如表标题、题头以及一些较复杂的表布局。本章也将介绍一些用于控制表外观的标记，这些标记已经被逐渐淘汰。尽管更提倡使用CSS控制页面的外观，但是有时也需要使用较老的标记，以便较老的浏览器能够按照您的意图正确显示页面。本章最后讨论与表相关的一些可访问性问题，因为它们能够带来明显的效果，特别是针对视力受损的用户。4.1表简介为了操作表，需要首先将其想像为网格。类似于电子数据表，表由行和列组成，如图4-1所示。图4-1在图4-1中可以看到由一些矩形组成的网格，每一个矩形称为一个单元格。一行由从左到右相同行中的单元格集合组成，而一列由从上到下的一行单元格集合组成。到目前为止您已经了解到，XHTML中元素的名称趋向于表示它们所包含的标记的类型。因此在XHTML中使用table元素来创建表是常见的情况。在table元素内，通过逐行的方式创建表。—行包含在一个tr元素内——该元素代表表的行。然后在每个行元素使用td元素编写每个单元格——td元素代表表的数据。下面是一个非常基本的表示例(ch04_egOl.html)。tableborder=1align=lefttrtdRow1,Column1/tdtdRow1,Column2/td/trtrtdRow2,Column1/tdtdRow2,Column2/td/tr/table本书始终仔细地缩进表代码，以便读者更容易看出表的结构，并且在新的代码行中开始编写每一行和单元格。虽然这只是一种个人偏好，但是在表中如果遗漏一个结束标签或一个尖括号，都会导致整个表无法正确地显示。当查看代码时（特别是当查看本章后面介绍的复杂嵌套表时），缩进有助于跟踪所处的位置。在Web浏览器中，该示例显示非常基本的表，但是它给出了表的组成方式的思想。可以在图4-2中看到该示例的结果。图4-2所有的表都将遵循这个基本结构，但是存在一些其他元素和属性可以用于控制表的外观。如果一行或一列需要包含题头，可以使用th元素代替表数据或td元素。默认情况下，大多数浏览器以粗体文本呈现th元素内的内容。说明：每个单元格必须由一个td元素或者th元素来表示，以便即使该元素为空时也能够正确显示表。下面是一个稍微复杂一些的表示例，该表包含了题头(ch04_eg02.html)。tableborder=1trth/ththOutgoings($)/ththReceipts($)/ththProfit($)/th/trtrthQuarter1(Jan-Mar)/thtd11200.00/tdtd21800.00/tdtdb10600.00/b/td/trtrthQuarter2(Apr-Jun)/thtd11700.00/tdtd22500.00/tdtdb10800.00/b/td/trtrthQuarter3(Jul-Sep)/thtd11650.00/tdtd22100.00/tdtdb10450.00/b/td/trtrthQuarter4(Oct-Dec)/thtd11850.00/tdtd22900.00/tdtdb11050.00/b/td/tr/table注意：表可能占用大量的空间，使得文档变长，但是具备清晰格式的表将使得代码更容易被理解。在编写代码时无论如何熟悉它，如果以良好的结构编写代码，那么在一年之后重新阅读它时，您将会感到很高兴。这个示例中的表给出了一一个小型公司的财政总结。从顶部的第一行开始，可以看到表示收入、支出和利润的3个题头。第一个单元格实际上是空的，但是仍然必须在代码中为其添加一个td元素或th元素；否则第一行比其他行将少一个单元格，并且列的排列也不协调。在每一行中，第一个表单元格也是表题头单元格(tlh)，用于指示是哪一个季度的结果。然后每一行剩余3个单元格包含了表数据，因此它们包含在td元素中。表明利润的数字包含在b元素中，从而以粗体字型显示利润数字。事实上，这个示例演示了任何单元格都可以包含所有样本式的标记。在表中放置标记的唯一约束是它必须嵌套在表单元格元素（td元素或th元素）中。不能将元素的起始标签放置在一个单元格内，而将其结束标签放置在该单元格的外部———反之亦然。图4-3中给出了这个表在Web浏览器中的外观。图4-3注意：很多人在创建表时实际上不愿意使用th元素，，而是对每一个单元格（包括题头）都使用td元素。但是，th元素有助于改进表的可访问性，在本章末尾将会对此进行介绍。如果出于某种原因已经存在该元素，那么使用它也是不错的想法。当使用CSS赋予表样式时，th元素也有助于以不同的方式显示单元格。4.2基本表元素和属性现在您已经了解如何创建基本的表，本节将更详细地描述上面提到的几种元素，并且介绍它们能够附带的属性。利用这些属性，可以创建更复杂的表布局。4.2.1创建表的table元素table元素是所有表的包含元素，它可以附带如下属性：所有的通用属性用于脚本的基本事件属性table元素可以附带如下逐渐淘汰的属性。尽管这些属性逐渐被淘汰，但目前仍然会看到大量使用它们：alignbgcolorbordercellpaddingcellspacingdirframerulessummarywiclth1.align属性（逐渐淘汰）尽管align属性逐渐被淘汰，但它仍然频繁用于表中。当用于table元素时，它表明表是否与页面的左边（默认情况）、右边或中间对齐（当用于单元格时，它用于对齐单元格的内容，后面将对此进行介绍）。该属性的语法如下所示：align=center如果表包含在另外一个元素中，则align属性将表明表是否应当与该元素的左边、右边或中间对齐。如果表对齐，则文本应当紧跟其后并环绕它。例如，下面是一个左对齐表，后面紧跟着一些文本(ch04_eg03.html)：tableborder=1align=lefttrtdRow1,Column1/tdtdRow1,Column2/td/trtrtdRow2,Column1/tdtdRow2,Column2/td/tr/tableLoremipsumdolorsitamet,consectetueradipiscingelit.....文本应该紧跟表并环绕它，如图4-4中的第一个表所示。图4-4为了防止这种情况发生，可以在表后面放置一个换行符，并添加clear属性(brclear=left/)，结果如图4-4中的第二个表所示。clear属性用于指示浏览器如何显示换行符后面的文本。如果该属性的值是left，则表明仅当浏览器窗口的左边页边空白没有内容时，文本才能开始显示（如果文本包含在一个元素中，则需要该元素的左边页边空白没有内容时才能显示文本）。clear属性能够采用的值包括all、left、right、none;附录I中更详细地介绍clear属性，虽然clear属性已被CSS中的clear特性所替代，两者完成相同的工作，并且后者是更好的选择。2.bgcolor属性（逐渐淘汰）bgcolor属性用于设置表的背景颜色。这个属性的值应该是一个6位数字的代码（称为十六进制代码）或一种颜色名。附录D中详细介绍了在XHTML和CSS中指定颜色的方式。该属性的语法如下：3.border属性（逐渐淘汰）如果使用border属性，则在表的周围和每一个单元格的周围创建边框。这个属性值是表的外部边框的宽度，单位为像素。如果将该属性的值设置为0，或者没有使用这个属性，则表的周围和任何单元格的周围将没有边框。说明：虽然这个属性逐渐被淘汰，但在本章中的多个示例中都使用了它，因此可以清楚地到每一个表单元格的边。4.cellpadding属性（逐渐淘汰）cellpadding属性用于创建单元格的边和它的内容之间的间隔。这个属性的值可以是单元格的每条边中的空间量或补白，单位是像素或者百分比值（表宽度的百分比）。可以想像的是，如果两个单元格都具有文字，而单元格的边和文字之间没有间隔，则内容将难于阅读。5.cellspacing属性（逐漸淘汰）cellspacing属性用于在每个单元格的边框之间创建空格。这个属性的值可以是想要创建的单元格之间的空间量，单位为像素或者百分比值（表宽度的百分比）。6.dir属性dir属性用于指定表中文本的方向。该属性的可能值包括ltr(文本从左到右)和rtl(文本从右到左，用于希伯来语和阿拉伯语这样的语言)：dir=rtl如果在table元素中使用了一个具有rtl值的dir属性，则单元格将从右边开始出现，每一个后续的单元格放置在该单元格的左边。7.frame属性（逐渐淘汰）frame属性用于控制整个表最外部边框（称为该表的框架）的外观，它的控制程度高于border属性。如果同时使用frame属性和border属性，则frame属性具有更高的优先级。该属性的语法如下：frame=frameType表4-1中给出了frameType的可能值。表4-1值目的void没有外部边框（默认值）above仅具有边框below仅底部具有边框hsides顶部和底部具有边框lhs表左边具有边框rhs表右边具有边框vsides表的左边和右边具有边框box所有的边都具有边框border所有的边都具有边框常用的浏览器对frame属性的支持并不是很好，因此最好使用CSS中的相应特性。8.rules属性（逐渐淘汰）rules属性用于指示表的哪些内边框将显示，例如行和列。该属性的语法如下所示；默认值是none。rules=ruleType表4-2中给出了ruleType的可能值。表4-2值目的none没有内部边框（默认值）groups在所有的表组之间显示内部边框（由thead、tbody、tfoot和colgroup元素创建组）rows在每一行之间显示水平边框cols在每一列之间显示垂直边框all在每一行和每一列之间分别显示水平边框和垂直边框同样，常用的浏览器对该属性的支持并不是很好，凶此最好使用CSS中的相应特性。9.summary属性summary属性用于为非可视化浏览器（例如语音浏览器或盲文浏览器）提供表的目的和结构的概述。这个属性的值不会在IE或Firefox浏览器中显示，但为了可访问性目的，最好在页面中包含它：summary=Tableshowstheoperatingprofitforthelastfourquarters.Thefirstcolumnindicatesthequarter,thesecondindicatesoutgoings,thethirdindicatesreceipts,andthefourthindicatesprofit.10.width属性（逐渐淘汰）width属性用于指定表的宽度，单位是像素或者是可用空间的百分比。当表没有被嵌套在其他元素中时，可用空间就是屏幕的宽度；否则可用空间是包含它的元素的宽度。width=500或width=90%4.2.2包含表行的tr元素tr元素用于包含表中的每一行。出现在同一个tr元素中的内容应该显示在相同行中。它可以附带5个属性，其中4个逐渐被淘汰，最好使用CSS中的相应特性替代它们。1.align属性（逐渐淘汰）align属性指定某行中所有单元格的内容的位置。表4-3列举了align属性的所有可能值。表4-3值目