HTML表格

基本语法和结构

<table>                 <!--表格开始-->
    <tr>                <!--tr行标签-->
        <td>···</td>    <!--td单元格-->
        <td>···</td>
        ······
    </tr>
    <tr>
        <td>···</td>
        <td>···</td>
        ······
    </tr>
    ······
</table>                <!--表格结束-->

带表头的表格

<table> 
    <tr>
        <th>···</th>    <!--表格头，内容加粗，居中显示-->
        <th>···</th>
        ······
    </tr>
    <tr>
        <td>···</td>
        ······
    </tr>
    ······
</table>

带标题的表格

<table>
    <caption>···</caption>  <!--表格标题，居中显示-->
    <tr>
        <th>···</th>
        ······
    </tr>
    <tr>
        <td>···</td>
        ······
    </tr>
    ······
</table>

带结构的表格

<table>
    <caption>···</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体</td>
        </tr>
    </tbody>
    <tfoot>
         <tr>
            <td>脚注</td>
        </tr>
    </tfoot>
</table>

表格常用属性和专用样式

1.表格对其方式：align（左中右）
2.表格边框宽度：border
3.表格边框颜色：bordercolor
4.表格背景色：bgcolor
5.表格背景图：background
6.单元间间隙：cellspacing
7.表格内边距：cellpadding
8.横向合并单元格（td属性）：colspan="2"
9.纵向合并单元格（td属性）：rowspan="2"
10.合并相邻单元格边框（table样式）：border-collapse:collapse;

表格布局

1.尽量少使用表格嵌套
2.尽量少使用表格的跨行跨列