Day05 表格

表格

<table width="300" border="1" cellspacing="0">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>语文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>欧阳</td>
            <td>男</td>
            <td>30</td>
        </tr>
        <tr>
            <td>戴璐</td>
            <td>女</td>
            <td>10</td>
        </tr>
    </tbody>
    
</table>

单元格合并

案例

<table width="500px" height="100" border="1" cellspacing="0">
        <tbody>
            <!-- 第一行 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="2"></td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
            <!-- 第三行 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 第五行 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

练习

<table width="500" height="400" border="1" cellspacing="0" align="center">
        <!-- 1 -->
        <tr>
            <td></td>
            <td colspan="4"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <!-- 2 -->
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 3 -->
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 4 -->
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 5 -->
        <tr>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
        <!-- 6 -->
        <tr>
            <td rowspan="4"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 7 -->
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 8 -->
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 9 -->
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 10 -->
        <tr>
            <td></td>
            <td colspan="4"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
    </table>