HTML table 跨欄(col)與跨列(row)

在 HTML 中使用 table 建立表格時，如果想要讓格子跨欄(col)或跨列(row)，佔據較大的位置，就可以使用 rowspan 和 colspan 來達成。

下面有一個範例的 table:

1-1	2-1	3-1
1-2	2-2	3-2
1-3	2-3	3-3

程式碼如下:

    
<table>
    <tr>
        <th>1-1</th>
        <th>2-1</th>
        <th>3-1</th>
    </tr>
    <tr>
        <th>1-2</th>
        <th>2-2</th>
        <th>3-2</th>
    </tr>
    <tr>
        <th>1-3</th>
        <th>2-3</th>
        <th>3-3</th>
    </tr>
</table>
    

如果要讓 1-2 和 2-2 合併可以這樣做：
在 1-2 的 th 加上 colspan="2" ，代表占用兩欄(col)的寬度，也因為會占用到右側的位置，所以要刪掉右邊的內容：

1-1	2-1	3-1
1-2		3-2
1-3	2-3	3-3

    
<table>
    <tr>
        <th>1-1</th>
        <th>2-1</th>
        <th>3-1</th>
    </tr>
    <tr>
        <th colspan="2">1-2</th>
        <th>3-2</th>
    </tr>
    <tr>
        <th>1-3</th>
        <th>2-3</th>
        <th>3-3</th>
    </tr>
</table>
    

如果要讓 1-2 和 1-3 合併， 則在 1-2 的 th 加上 rowspan="2" ，代表占用兩列(row)的寬度，也因為會占用到下方的位置，所以要刪掉下方的內容：

1-1	2-1	3-1
1-2	2-2	3-2
	2-3	3-3

    
<table>
    <tr>
        <th>1-1</th>
        <th>2-1</th>
        <th>3-1</th>
    </tr>
    <tr>
        <th rowspan="2">1-2</th>
        <th>2-2</th>
        <th>3-2</th>
    </tr>
    <tr>
        <th>2-3</th>
        <th>3-3</th>
    </tr>
</table>