网页设计中的表显示值

  • 2019-04-01 17:58:43
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

在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并不支持这个功能,

当前文章标题:网页设计中的表显示值

当前URL:http://www.lyjtt.cn/news/wzzz/shows-values.html

上一篇:网页设计中表编排规则

下一篇:网页设计中的行列

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)