深入理解table

如何应用好HTML的表格,就需要对表格有详细清楚的了解。在HTML 4.01 ,XHTML 1.0,HTML 5.0草案中这组标签是用来描述HTML中的表格结构的,而且标签的解释也没有发生变化。
我们先看一下描述表格结构有那些标签。

标签 描述 DTD
<table> 定义表格 STF
<caption> 定义表格标题。 STF
<th> 定义表格中的表头单元格。 STF
<tr> 定义表格中的行。 STF
<td> 定义表格中的单元。 STF
<thead> 定义表格中的表头内容。 STF
<tbody> 定义表格中的主体内容。 STF
<tfoot> 定义表格中的表注内容(脚注)。 STF
<col> 定义表格中一个或多个列的属性值。 STF
<colgroup> 定义表格中供格式化的列组。 STF

下面是一个完整的表格结构实例:

    <table summary="表格描述">
        <caption>表格标题</caption>
        <colgroup>
            <col width="150" />
            <col width="150" />
            <col width="150" />           
        </colgroup>
        <!-- Table Header-->
        <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        </thead>
        <!-- Table Footer-->
        <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
        </tfoot>
        <!-- Table Body-->
        <tbody>
        <tr>
            <td>DATA 1</td>
            <td>DATA 2</td>
            <td>DATA 3</td>
        </tr>
        <tr>
            <td>DATA 4</td>
            <td>DATA 5</td>
            <td>DATA 6</td>
        </tr>
        </tbody>
    </table>

对于注重结构,表现,行为分离的开发模式的现在,很多在表格标签组的属性都不应该在标签中再出现,而应该使用相应的样式表属性取而代之。例如:

  • 用于水平方向对齐的align,应该使用CSS中的text-align属性
  • 用于垂直方向对其的valign,应该使用CSS中的vertical-align属性
  • 用于table的cellspacing属性,应该使用CSS中的border-spacing属性
  • 用于table的cellpadding属性,应该使用CSS中的padding属性

但是值得注意的是,在xhtml中的属性建议中却并没有完全将border,cellpadding,cellspacing完全舍弃,因为各浏览器的支持有限,因此不能完全使用css获取相同的外观。

另外使用样式属性border-collapse:collapse/separate; 可以设置表格的边框是否被合并成单一边框,但是在firefox和IE中仍有微小差异;
样式属性empty-cells:show|hide 可以控制当单元格<td>中内容为空时是否显示单元格,但是该属性是应用在<table>而不是<td><th>的样式中,而你仍然要注意IE6,IE7的状况,可能不会支持。

在表格中仍然有一些显而易见的有用的属性,你需要注意,比如用在<table>标签中的summary属性用于给表格添加摘要。而<colgroup><col>也 是有用的标签,<col>标签可以作为<colgroup>的子标签,会继承<colgroup>的属性,通过组合 可以更好的格式化表格的列内容。但是要注意<colgroup>标签的属性,虽然被广泛的支持,但是,Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。span属性是用来规定列组应该横跨的列数。

注意到表格结构标签中的<thead>、<tfoot>、<tbody>了吗?在书写上你会发现只有当你按 照<thead>、<tfoot>、<tbody>顺序书写时,才会通过w3c的XHTML代码验证,而实际上在浏 览器解释上也是按照这样的顺序显示的,也就是说你会先看到表格头和表格的脚注,然后是表格的内容。


原文地址:https://www.cnblogs.com/radom/p/1954336.html