css里如何合并单元格？HTML以及XHTML中的table元素支持单元格的合并。单元格的合并主要依靠td元素的colspan和rowspan这两个属性，前者表示单元格可以横跨的列数，后者表示单元格可以纵跨的行数。下面介绍如何实现单元格的合并。
step 1 新建一个空白文档，在页面中插入一个由4个单元格组成的表格，如图1所示，所用到的代码如下：
图1 由4个单元格组成的表格
01 <table width="193" height="176" border="1">
02 <tr>
03 <td width="89"> </td>
04 <td> </td>
05 </tr>
06 <tr>
07 <td width="89"> </td>
08 <td width="88"> </td>
09 </tr>
10 </table>
step 2 使用鼠标单击左上角的单元格，然后向右拖动鼠标，同时选中上面的两个单元格。单击这两个单元格，在弹出的快捷菜单中选择“表格”→“合并单元格”命令，将上面的两个单元格合并，其效果如图2所示，代码如下：
01 <table width="193" height="176" border="1">
02 <tr>
03 <td colspan="2"> </td>
04 </tr>
05 <tr>
06 <td width="89"> </td>
07 <td width="88"> </td>
08 </tr>
09 </table>
在上面的代码中，可以看到原来被第一个tr元素包含的两个td元素已经变成一个td元素，并且该元素的colspan属性设置为2，表示该单元格将横跨2列。
如果想要纵向合并单元格，其操作步骤与上面的基本相同，只不过此时需要同时选中左边的两个单元格。合并之后的效果如图3所示，代码如下：
图3 纵向合并单元格
01 <table width="193" height="176" border="1">
02 <tr>
03 <td width="89" rowspan="2"> </td>
04 <td> </td>
05 </tr>
06 <tr>
07 <td width="88"> </td>
08 </tr>
09 </table>
从上面的代码可以看到，被第一个tr元素包含的仍然是两个td元素，只不过第一个td元素增加了一个rowspan属性，其值为2，表示该单元格会纵跨2行。被第二个tr元素包含的td元素变成了一个，这个td元素就是图3中的右下角的单元格。
