HTML 使用colspan屬性合併表格欄位

在HTML的表格中，表示每一格的<th>及<td>的colspan及rowspan屬性可用來合併多個格子。

本篇介紹colspan跨欄合併。

<th>與<td>用法相同，所以下面皆用<td>說明。

例如下面是一個5 x 5的表格。

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25

HTML碼如下。

<table>
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
        </tr>
        <tr>
            <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
        </tr>
        <tr>
            <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
        </tr>
        <tr>
            <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
        </tr>
        <tr>
            <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
        </tr>
    </tbody>
</table>

有時因為表格排版上的美觀整齊，或文字比較多，會需要幾個相鄰的格子合併。

左右格子合併為跨欄合併(column span)，設定colspan來達成。

例如下面第2列第1格向右橫跨1格共佔了2格，因此第2列的<td>要少1個。
同樣地，第3列第1格向右橫跨2格共佔了3格，因此第3列的<td>要少2個。以此類推。

1	2	3	4	5
6		7	8	9
11			12	13
16				17
21

HTML碼如下。

<table">
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
        </tr>
        <tr>
            <td colspan="2">6</td><td>7</td><td>8</td><td>9</td>
        </tr>
        <tr>
            <td colspan="3">11</td><td>12</td><td>13</td>
        </tr>
        <tr>
            <td colspan="4">16</td><td>17</td>
        </tr>
        <tr>
            <td colspan="5">21</td>
        </tr>
    </tbody>
</table>

若第2列沒有扣除相應的<td>數量，那麼就會多出一格顯得很奇怪。

1	2	3	4	5
6		7	8	9	10
11			12	13
16				17
21

HTML碼如下。

<table>
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
        </tr>
        <tr>
            <td colspan="2">6</td><td>7</td><td>8</td><td>9</td><td>10</td>
        </tr>
        <tr>
            <td colspan="3">11</td><td>12</td><td>13</td>
        </tr>
        <tr>
            <td colspan="4">16</td><td>17</td>
        </tr>
        <tr>
            <td colspan="5">21</td>
        </tr>
    </tbody>
</table>

格子不一定要從最左邊向右合併，也可在中間或右邊，規則同上，合併了幾格就要扣除相應的<td>。

1	2	3	4	5
6	8		9	10
11	12			13
16	17
21

HTML碼如下。

<table>
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
        </tr>
        <tr>
            <td>6</td><td colspan="2">8</td><td>9</td><td>10</td>
        </tr>
        <tr>
            <td>11</td><td colspan="3">12</td><td>13</td>
        </tr>
        <tr>
            <td>16</td><td colspan="4">17</td>
        </tr>
        <tr>
            <td colspan="5">21</td>
        </tr>
    </tbody>
</table>

接著請參考HTML 使用rowspan屬性合併表格欄位

參考：

• The td element
• HTML <table> 表格元素 Table Elements 簡介