HTML5表格标签和单元格合并 

表格标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
        <table border="1" width="300px" height="300px">              <!--border表格边框 不推荐使用 witdth 表格宽度 height表格高度-->
            <tr>
                <td>77</td>
                <td>77</td>
                <td>77</td>
            </tr>
            <tr>
                <td>77</td>
                <td>77</td>
                <td>77</td>
            </tr>
            <tr>
                <td>77</td>
                <td>77</td>
                <td>77</td>
            </tr>
            <tr>
                <td>77</td>
                <td>77</td>
                <td>77</td>
            </tr>
            <tr>
                <td>77</td>
                <td>77</td>
                <td>77</td>
            </tr>           
        </table>                    <!--table>tr*n>td*m{} 快捷键-->
</body>
</html>

<tatle>标签为双标签 ，表格标签的基本框架为<tatble> <tr><td></td></tr></tatble>  表格标签有boder、width、height属性 在table标签中添加 快捷方式为table>tr*n>td*m n为行m为列

单元格合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>合并单元格10 11 单元格9和12</p>
    <p>水平合并colspan 垂直合并rowspan</p>
    <p>水平合并保留前面 垂直合并保留后面</p>
    <table border="1" width="300px" heigth="300px">  <!--单元格-->
        <tr>
            <td >1</td>
            <td colspan="2" rowspan="3">235689</td>                 <!--合并水平2 垂直3-->
            
        </tr>
        <tr>
            <td>4</td>
        </tr>
        <tr>
            <td>7</td>
        </tr>
        <tr>
            <td colspan="2"> 1011</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
    </table>
</body>
</html>

水平合并单元格用colspan属性 垂直合并单元格用rowspan属性 这些属性添加在<td>标签之后，且可以两天属性同时使用，在合并单元格后，需将合并的单元格所单独的那一条标签删除

posted @ 2023-09-08 20:22  songs7  阅读(92)  评论(0)    收藏  举报