網頁

2019/7/17

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

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


本篇介紹rowspan跨列合併。

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

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

12345
678910
1112131415
1617181920
2122232425

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個。以此類推。

12345
6
1112
161718
21222324

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>數量,那麼就會多出一格顯得很奇怪。

12345
67
1112
161718
21222324

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屬性合併表格欄位


參考:

2 則留言:

  1. 肉豬你好:
    想跟你詢問從資策會java班出來,前端跟後端都有人在做嗎,還是以後端居多?

    回覆刪除
  2. @Max 多數以後端為主,極少數會轉到前端去,畢竟Java是後端的語言。

    回覆刪除