HTML+CSS教程:表格Table元素网页制作技巧

2013-09-26 21:55:58  来源:网页教学网 

网页制作Webjx文章简介:table元素在HTML中用于呈现表格数据。你可以把它作为一个描述和展示可用于电子表格的数据的方法。

所有的表格相关元素

有几个元素在前面我们是没有提及的,让我们看看HTML表格的相关元素。这里我们也用一个表格来呈现它们:

Element What it is
<table> The table itself
<caption> The caption for the table. Like a figcaption to a figure.
<thead> The table header
<tbody> The table body
<tfoot> The table footer
<tr> A table row
<th> A table cell that is a header
<td> A table cell that is data
<col> A column (a no-content element)
<colgroup> A group of columns

所有的表格相关属性

只有这么一点表格属性实在令人吃惊。当然你可以使用类和ID来使用你所需要的全局属性。以前表格拥有相当多的属性,但大多数都已经被废弃了。

Attribute Element(s) Found On What it does
colspan th, td extends a cell to be as wide as 2 or more cells
rowspan th, td extends a cell to be as tall as 2 or more cells
span col Makes the column apply to more to 2 or more columns
sortable table Indicates the table should allow sorting
headers td space-separated string corresponding to ID's of the <th>elements relevant to the data
scope th row | col | rowgroup | colgroup (default) - essentially specifies the axis of the header. The default is that a header is heading a column, which is typical, but a row might start with a header also, where you would scope that header to the row or rowgroup.

弃用的属性

不要使用它们的任何一个,它们已经被弃用了。尽管它们可能还可以起作用,但未来它们有可能会失效。

Deprecated Attribute What to use instead
align Use floatproperty instead
valign Use vertical-alignproperty instead
char The correct answer is to use text-align: "x";where x is the character to align on, but it's not implemented anywhere yet. But this attribute isn't supported either, so no big loss.
charoff See above
bgcolor Use backgroundproperty instead
abbr "consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the titleattribute"
axis Use the scopeattribute instead
border Use borderproperty instead
cellpadding Using paddingproperty instead
cellspacing Use border-spacingproperty instead
frame Use borderproperty instead
rules User borderproperty instead
summary Use <caption>element instead
width Use widthproperty instead

表格的堆叠

表格元素有一个隐式的垂直堆叠方式,和HTML结构中父元素和子元素的关系相同。这个理解在表格中是相当重要的,因为在应用 background 之类的属性时,我们可以通过在表格或者表格行应用一种背景,再在单元格应用另一种背景来覆盖它。

这就是它的外貌(使用firefox浏览器开发者工具的3D特性呈现):

表格的重要样式规则

在表格元素上你可以使用大多数的CSS属性,font-family在表格元素上的表现和在其他元素时一样,举个例子。如果我们层叠地应用此属性,在 table 元素中使用一种font-family,在 table-cell 元素中使用另一种font-family,文字会使用后一种样式,因为table-cell才是文字的最近父容器。

下面这些属性一些是特别地只能应用与表格元素的,一些则是在表格元素中有不同的特性。

CSS Property Possible values What it does
vertical-align baseline
sub
super
text-top
text-bottom
middle
top
bottom
%
length
Aligns the content inside a cell. Works particularly well in tables, although only the top/bottom/middle make much sense in that context.
white-space normal
pre
nowrap
pre-wrap
pre-line
Controls how text wraps in a cell. Some data may need to be all on one line to make sense.
border-collapse collapse
separate
Applied to the table to determine if borders collapse into themselves (sort of like margin collapsing only bi-directional) or not.
border-spacing length If border-collapseis separate, you can specify how far cells should be spaced out from each other. Modern version of cellspacingattribute. And speaking of that, paddingis the modern version of the cellpaddingattribute.
width length Width works on table cells just about how you would think it does, except when there is some kind of conflict. For instance if you tell the table itself to be 400px wide then the first cell of a three-cell row to be 100px wide and leave the others alone, that first cell will be 100px wide and the other two will split up the remaining space. But if you tell all three of them to be 10000px wide, the table will still be 400px and it will just give each of them a third of the space. That's assuming white-space or elements like an image don't come into play. This is probably a whole post in itself!
border length Border works on any of the table elements and just about how you would expect. The quirks come in when you collapse the borders. In this case all table cells will have only one border width between them, rather than the two you would expect them to have (border-right on the first cell and border-left on the next cell). In order to remove a border in a collapsed environment, both cells need to "agree" to remove it. Like td:nth-child(2) { border-right: 0; } td:nth-child(3) { border-left: 0; }Otherwise, source order/specificity wins which border is shown on which edge.
table-layout auto
fixed
autois the default. The width of the table and its cells depends on the content inside. If you change this to fixed, the table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths, which can speed up rendering. If content in subsequent cells can't fit, the overflow property determines what happens.

以上的属性并不是很详尽,对表格来说还有一些属性的表现是怪异的,举个例子,你不能对单元格进行相对定位从而改变它的位置或者绝定位它的子元素。但可以通过别的办法来实现

如果你想到了更多的有关表格的怪异现象,可以在下方评论区跟大家分享一下。

默认样式/User Agent样式表

Webkit内核的默认样式:

table {     display: table;     border-collapse: separate;     border-spacing: 2px;     border-color: gray }  thead {     display: table-header-group;     vertical-align: middle;     border-color: inherit }  tbody {     display: table-row-group;     vertical-align: middle;     border-color: inherit }  tfoot {     display: table-footer-group;     vertical-align: middle;     border-color: inherit }  table > tr {     vertical-align: middle; }  col {     display: table-column }  colgroup {     display: table-column-group }  tr {     display: table-row;     vertical-align: inherit;     border-color: inherit }  td, th {     display: table-cell;     vertical-align: inherit }  th {     font-weight: bold }  caption {     display: table-caption;     text-align: -webkit-center } 

我在已经更换为Blink内核的Chrome浏览器的开发者工具中检查了这里面的每个元素,它们仍然是相同的。

有意思的是,在<th>标签中的文本默认是居中的(text-align: center;)。但这并没有被声明在UA样式表中。虽然并不是什么大不了的事情,但这让人感到有点神秘,让你还想知道更多在渲染的时候发生的其他神秘东西。

UA样式表在不同的浏览器中是各不相同的。举个例子,在firefox浏览器中(此处是 3.6的 UA 样式表, 但在v23里面也是正确的)单元格具有以下属性:

td {    display: table-cell;   vertical-align: inherit;   text-align: inherit;    padding: 1px; } 

但在WebKit中,这1px的内边距是不存在的。虽然没有造成多大的区别,但它们确实是不一样。这就是CSS Reset(或者其他相似的东西)的作用:去除浏览器造成的差异。因此来让我们看看这个东西吧。

更多