美文网首页
HTML表格

HTML表格

作者: 李丹linda | 来源:发表于2017-11-29 20:21 被阅读0次

基本语法和结构

<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.尽量少使用表格的跨行跨列

相关文章