【转】html 代码中 table 跨行跨列的操作

例1 跨2列:

<table border="1">
    <tr>
         <td colspan="2" align="center">111</td>
    </tr>
    <tr>
         <td>222</td>
         <td>333</td>
     </tr>
</table>

显示的效果如下：

111
222	333

Html代码总是一行一行读的，先读第1行，碰到了colspan＝2 那么就预先占用2列的位置，然后第2行读时就先读第一列，再读第2列

例2 右跨2行:

<table border="1">
    <tr>
        <td>111</td>
       <td rowspan="2">222</td>
    </tr>
    <tr>
        <td>333</td>
    </tr>
</table>

显示效果如下：

111	222
333

Html代码先读第1行第1列，然后读到第2列时遇到rowspan＝2 ，那么预留2行的位置，然后再读第2行第1列。

例3 左跨2行:

<table border="1">
    <tr>
        <td rowspan="2">111</td>
        <td>222</td>
    </tr>
    <tr>
        <td>333</td>
    </tr>
</table>

显示效果如下：

111	222
	333

例4 跨2行和跨2列结合:

<table border="1">
     <tr>
         <td rowspan="2">111</td>
         <td>222</td>
         <td>333</td>
     </tr>
     <tr>
         <td>444</td>
         <td>555</td>
    </tr>
    <tr>
        <td>666</td>
        <td colspan="2">777</td>
    </tr>
</table>

显示效果如下：

111	222	333
	444	555
666	777

开始先读第1行第1列，预留2行，读出第1行的2，3列，然后读第2行的1，2列，然后读第3行的第一列，后来再读第2列横跨2列。