美文网首页
【前端】-009-页面制作-HTML-表格标签

【前端】-009-页面制作-HTML-表格标签

作者: 9756a8680596 | 来源:发表于2017-01-03 23:07 被阅读16次

    表格的基本标签

    1. 表格标签:table,<table>...</table>
    2. 表格的标题标签:caption<caption>titleName</caption>
    3. 表格头部:thead,表格的第一行,表头行
    4. 表格主体:tbody,表格主体
    5. 表格尾部:tfoot,表格尾部,例如总计行
    6. 表格的一行:tr ,定义表格的每一行
    7. 表格单元格:th td,单元元素,其中th标签为表头,td标签为普通元素

    表格的跨区域属性

    1. colspan 跨列 ,表示跨列,后面加列数
    2. rowspan 跨行,表示跨行,后面加杭师

    参考代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>HTML的单元作业-2-运费详情</title>
    </head>
    <body>
        <div>
            <table>
                <caption>运费详情</caption>
                <thead>
                    <th>区域</th>
                    <th>寄达地</th>
                    <th>首重(元/1000g)</th>
                    <th>续重(元/1000g)</th>            
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2">一区</th>
                        <td>浙江、上海、江苏</td>
                        <td>6</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>江西、安徽</td>
                        <td>7</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <th >二区</th>
                        <td>吉林、黑龙江、云南</td>
                        <td>10</td>
                        <td>6</td>  
                    </tr>
                    <tr>
                        <th>三区</th>
                        <td>新疆、西藏</td>
                        <td>15</td>
                        <td>10</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:【前端】-009-页面制作-HTML-表格标签

          本文链接:https://www.haomeiwen.com/subject/jbnnvttx.html