菜鳥工程師肉豬: HTML 使用rowspan屬性合併表格欄位

2019/7/17

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

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

本篇介紹rowspan跨列合併。

<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>

有時因為表格排版上的美觀整齊，會需要上下相鄰的格子合併。

上下格子合併為跨列合併(row span)，設定rowspan來達成。

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

1	2	3	4	5
6	2
11	12
16	17	18
21	22	23	24

HTML碼如下。

<table>
    <tbody>
        <tr>
            <td>1</td><td rowspan="2">2</td><td rowspan="3">3</td><td rowspan="4">4</td><td rowspan="5">5</td>
        </tr>
        <tr>
            <td>6</td>
        </tr>
        <tr>
            <td>11</td><td>12</td>
        </tr>
        <tr>
            <td>16</td><td>17</td><td>18</td>
        </tr>
        <tr>
            <td>21</td><td>22</td><td>23</td><td>24</td>
        </tr>
    </tbody>
</table>

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

1	2	3	4	5
6	2				7
11	12
16	17	18
21	22	23	24

HTML碼如下。

<table>
    <tbody>
        <tr>
            <td>1</td><td rowspan="2">2</td><td rowspan="3">3</td><td rowspan="4">4</td><td rowspan="5">5</td>
        </tr>
        <tr>
            <td>6</td><td>7</td>
        </tr>
        <tr>
            <td>11</td><td>12</td>
        </tr>
        <tr>
            <td>16</td><td>17</td><td>18</td>
        </tr>
        <tr>
            <td>21</td><td>22</td><td>23</td><td>24</td>
        </tr>
    </tbody>
</table>

基本上用法都和colspan相同，只不過rowspan是上下的格子合併。

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

參考：