单元格合并(第二天)

199 阅读1分钟
先创建一个表格3*4的表格
<table border="1" width="400" height="300" bgcolor="lime">
    <tr>
       <td width="100" colspan="2">1</td>
       <td width="100">2</td>
       <td width="100">3</td>
       <!-- <td width="100">4</td> -->
    </tr>
    <tr>
       <tdrowspan="2">5</td>
       <td>6</td>
       <td colspan="2" rowspan="2"><font color="red" size="5">7</font></td>
       <!-- <td>8</td> -->
    </tr>
    <tr>
       <td>9</td>
       <!-- <td>10</td>
       <td>11</td> -->
       <td>12</td>
    </tr>
</table>

向table中加入<border="1">用来显示表格边框,

01.PNG

然后定义一下表格整体的宽和高,向table中加入<width="400" height="300">

02.PNG

向列标签<td></td>中加入width="100",只加入第一行所有列即可,下面会自动对齐

03.PNG

合并单元格,合并1,2两列的话使用colspan="2",注意合并单元格的话是在左上角的<td>中实现的

04.PNG

多出的第四列删除

05.PNG

向下合并单元格,合并5,9 :rowspan="2",多出第12格删除。

06.PNG

合并7,8,10,11单元格按照上面的方法向加到7的中colspan="2" rowspan="2",多出8,10,11删除。

07.PNG

还可以加入背景色,需要整体变色就放到<table bgcolor="lime"></table>,bgcolor为背景颜色的缩写,改变单元格颜色的话就加入单元格中比如7变成黄色。

08.PNG

如果需要改变单元格内容的话直接用标签包住内容比如7,7 注意font标签只对内容有效所以应该包住内容,并且被td标签包住

09.PNG