主要是利用td标签或者th标签的rowspan(行合并)colspan(列合并)两个属性。

我们以程序实例来说明:

1.首先构建一个表格如图

<table border="1" style="height: 200px;width: 200px;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td >4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

运行结果如图所示:

2.使用colspan列合并合并第一行的所有列

<table border="1" style="height: 200px;width: 200px;">
        <tr>
            <td colspan="3">1</td> <!--注意此处的td标签由原来的三个变为一个-->
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

运行结果如图所示:

3.使用rowspan(行合并)合并第一列的所有行

<table border="1" style="height: 200px;width: 200px;">
        <tr>
            <td rowspan="3">1</td><!--使用rowspan进行合并-->
            <td>2</td>
            <td>3</td> 
        </tr>
        <tr>
            <td>4</td>
            <td>5</td><!--注意此处的只有两列 td标签变为2个-->
        </tr>
        <tr>
            <td>7</td>
            <td>8</td><!--注意此处的只有两列 td标签变为2个-->
        </tr>
    </table>

运行结果如下:

如此就通过rowspan和colspan实现了表格的行列合并。

一定要注意的是,合并之后td标签的行列数的变化。否则会得不到预期结果,只相当于占位。

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐