其他分享
首页 > 其他分享> > html中的表格

html中的表格

作者:互联网

html中的表格

  1. 表格

    <table>
        <caption>标题</caption>
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
            </tr>
        </tbody>
    
        <tfoot>
            <tr>
                <td>表脚一</td>
                <td>表脚二</td>
            </tr>
        </tfoot>
    </table>
  2. 指定列宽

    <table>
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
        </tr>
    
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
    
        <tr>
            <td colspan="3">2</td>
        </tr>
    
        <tr>
            <td rowspan="2">3</td>
            <td>311</td>
            <td>312</td>
        </tr>
    
        <tr>
            <td>321</td>
            <td>322</td>
        </tr>
    </table>
  3. 使用colgroup和col指定列样式

    <table>
        <colgroup>
            <col span="1" style="background-color:red">
            <col span="1" style="width: 100px">
            <col style="background-color:yellow">
        </colgroup>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </table>
  4. 使用scope暗示th是啥

    <table>
        <thead>
            <tr>
                <td></td>
                <th scope="col">标题一</th>
                <th scope="col">标题二</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <th scope="row">标题三</th>
                <td></td>
                <td></td>
            </tr>
    
            <tr>
                <th scope="row">标题四</th>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

标签:表脚,表格,312,指定,标题,html
来源: https://www.cnblogs.com/ye-hcj/p/10355673.html