小白写表格容易忘记的表格结构

105 阅读1分钟

小白自学表格容易忘记的表单结构

一、表格标题和表头单元格标签caption/th

caption作用:使表格整体大标题,默认在表格整体顶部居中位置显示

th作用:表示一列小标题,通常用于表格第一行,默认内部文字加粗居中显示

注意点:caption标签书写在table标签内部,th标签书写在tr标签内部(用于替换td标签)

二、表单结构标签 thead头部/tbody主体/tfoot底部

作用:让表格的内容结构分组,突出表格的不同部分,使语义更加清晰

注意点:表格结构标签内部用于包裹tr标签,表格的结构标签可以省略

    <head>
        
    </head>
    
    <body>
        
        <table border="1" >
            <caption>大标题且居中</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>身高</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>16</td>
                    <td>170</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>16</td>
                    <td>155</td>
                </tr>
            </tbody>
            
            <tfoot>
                <tr>
                    <td>总结</td>
                    <td>优</td>
                    <td>一般</td>
                </tr>
            </tfoot>
            
        </table>
        
    </body>
    
 </html>