HTML基础知识点-表格

知识点

• <table>：表格

• <tr>：行

• <td>：单元格

带结构的表格

表格划分三部分：表头，主体，脚注

加载时可以逐个结构加载

• thead：表格的头（放表格的表头）

• tbody：表格的主体（放数据本体）

• tfoot：表格的脚（放表格的脚注）

无论这三个标签的位置如何变化，总是先显示<thead>，然后才是<tbody>，最后是<tfoot>

例：

<table>                                 //表格开始
    <caption>...</caption>              //表格标题
    <thead>
        <tr>                            //tr行标签
            <th>表头</th>               //表格头，内容居中，加粗显示
            ...
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td>主体</td>               //td单元格，默认
            ...
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>脚注</td>                        
            ...
        </tr>
    </tfoot>
</table>                               //表格结束

table标签特殊属性

• cellspacing：单元格之间间距

• cellpadding：单元格内内容和单元格边框的距离

• frame：外部边框的显示

• rules：内部标签的显示

tr标签特殊属性

属性	值	描述
align	Left/center/right/justiy/char	行内容的水平对齐
Valign	top/middle/bottom/baseline	行内容的垂直对齐
Bgcolor	rgb/#xxxxxx/colorname	行的背景颜色

<td>和<th>常用标签属性类似与<tr>

表格布局

• 尽量少的使用表格嵌套

• 尽量少的使用表格跨行跨列

说明：减少代码维护成本，使用表格进行网页布局一般不设置border