Html合并单元格的使用

时间:2022-11-20 11:24:14

关于单元格的合并其实非常的简单,只需要用到td的两个属性:colspanrowspan

下面用实例来展示一下:

代码1

<table border=1 width="50%">

    <tr>

      <td rowspan=2> rowspan </td>

      <td> 12</td>

    </tr>

    <tr>

      <td>2,列1</td>

    </tr>

  </table>


效果如下:

Html合并单元格的使用Html合并单元格的使用


代码2:

<table border=2 width="50%">

  <tr>

    <td> 1,列1 </td>

    <td> 1,列2</td>

  </tr>

  <tr>

   <td colspan=2 >colspan</td>

  </tr>

</table>

效果如下:

Html合并单元格的使用

下面我们来进行一下合并单元格的拓展

代码如下:

<table width="300" height="300" cellspacing="0" cellpadding="15" border="1" >

<caption>合并单元格升级</caption>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td rowspan="3">5</td>

<td>6</td>

<td>7</td>

<td>8</td>

</tr>

<tr>

<td rowspan="2">9</td>

<td>10</td>

<td>11</td>

</tr>

<tr>

<td colspan="2">12</td>

</tr>

<tr>

<td>13</td>

<td colspan="3">14</td>

</tr>

<tr>

<td colspan="4">15</td>

</tr>

</table>

效果如下:

Html合并单元格的使用Html合并单元格的使用