在HTML中,很容易知道哪些元素属于表,因为像tr和td之类元素的处理已经内置在浏览器中。与此不同,在XML中则没有办法从根本上知道哪些元素可能是表的一部分。
因此引人了一组display值。
这一章中,我们只讨论网页设计与表有关的值,因为其他值已经在其他章节讨论过。与表相关的值可以总结如下:
table
这个值指定一个元素定义了一个块级表。因此,它定义了一个生成块框的矩形块。相应的HTML元素当然是table。
display
值:
none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
初始值:inline
应用于:所有元素
继承性:无
计算值:对于浮动,定位和根元素,计算值可变(见CSS2.1第9.7节否则,根据指定确定
说明:网站建设中还有值compact和marker,不过由于缺乏广泛的支持,在 CSS2.1中已经去掉
inline-table
这个值指定一个元素定义了一个行内级表。这说明,该元素定义了一个生成行内框的矩形块,与之最接近的非表值是inline-block。最接近的HTML元素为table,不过,默认情况下HTML表不是行内元素。
table-row
这个值指定一个元素是一个单元格的行。相应的HTML元素是tr元素。
table-row-group
这个值指定一个元素是一个或多个行的组。相应的HTML值是tbody。
table-header-group
这个值与table-row-group非常相似,只是视觉格式化方面有所不同,标题行组总是在所有其他行和行组之前显示。打印时,如果一个表需要多页打印,用户代理可以在各页顶端重复标题行,规范没有定义如果为多个元素指定table-header-group值会发生什么情况。标题组可以包含多个行。与之对应的HTML元素是thead。
table-footer-group
这个值与table-header-group很类似,不过脚注行组总是在所有其他行之后显示,如果最下面有页脚标S,要在该总标题之前显示。打印时,如果一个表需要多页打印,用户代理可以在各页底端重复页脚行。规范没有定义如果为多个元素指定table-foo.ter-group值会有什么结果。与之对应的HTML元素是tfoot。
table-column
这个值声明元素描述了一个单元格的列。按网站建设的术语来说,有这个display值的元素并不显示,就好像它的display值为none—样。之所以存在这个值,主要是为了帮助定义列中单元格的表示。相应的HTML元素是col元素。
table-column-group
网站建设这个值声明一个元素是一个或多个列的组。类似于table-column元素,table- column-group元素也不显示,不过这个值有助于定义列组中元素的表示。相应的HTML元素是colgroup元素。
table-cell
这个值指定一个元素表示表中的单个单元格。HTML元素th和td都属于table- eell元素。
table-caption
这个值定义一个表的总标题。网站建设没有定义如果多个元素的display值都为caption时会发生什么情况,不过CSS确实明确地警告,“……创作人员不要在一个表或行内表元素中放多个有display: caption的元素。”
下面从附录C给出的示例HTML 4.0样式表中节取一部分,对这些值的一般效果做了一个简短的总结:
table {display: table;}
tr {display: table-row;}
thead {display: table-header-group;}
tbody {display: table-row-group;}
tfoot {display: table-footer-group;}
col {display: table-column;}
colgroup {display: table-column-group;}
td, th {display: table-cell;}
caption {display: table-caption;}
在XML中,默认地元素没有显示语义,所以这些值非常有用。考虑以下标记:
<scores>
<headers>
<label>Team</label> clabel>Score</label>
</headers>
<garne sport="MLB" league="NL">
<name>Reds</name>
<score>8</score>
</team>
<name>Cubs</name>
<score>5</score>
</team>
</ganle>
</scores>
可以用以下样式将其格式化为一种表格形式:
scores {display: table;}
headers {display: table-header-group;}
game {display: table-row-group;}
team {display: table-row;}
label, name., score {display: table-cell;}
然后根据需要对各个单元格应用样式,例如,将label元素变为粗体,对scores右对齐。
注意:尽管理论上可以为任何HTML元素指定与表有关的display值,不过在IE7之前,Internet Explorer并不支持这个功能,