網頁

2019/7/16

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

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

本篇介紹colspan跨欄合併。


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


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

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

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

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

12345
678910
111213
1617
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>

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


參考:

沒有留言:

張貼留言