首頁>網頁設計教程>HTML教程

HTML表格合併的具體實作方式

作者：Eve Cole 更新時間：2024-12-18 10:51:45

當我們在做一份HTML表格的時候

可以看到這樣是非常不河狸的。這就需要合併儲存格了

主要步驟:

一、先確認是要向右合併（列合併），還是向下合併（行合併）。

二、找出需要合併的儲存格。

三、如果被合併的儲存格有內容或佔用了位置，則可以將被合併的儲存格在原始碼中刪除。

特別注意：

我們在合併儲存格的時候，如果被合併的儲存格有內容，雖然不會影響到合併，但因為被合併的儲存格內容沒有做任何處理，所以儲存格會自動後移。

解決方案：直接刪除多餘的儲存格即可。

主要代碼：

跨行合併：rowspan="合併儲存格的個數"

跨列合併：colspan="合併儲存格的個數"

詳解：

目標單元格：

1：跨行：最上側儲存格為目標儲存格，寫入合併程式碼。

2：跨列：最左側儲存格為目標儲存格，寫入合併程式碼。

然後我們跟著主要步驟來一次：

初始表格<body>
  <table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
    <tr>
      <th>全明星資訊收集</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
      <th>嗜好</th>
    </tr>
    <tr>
      <td></td>
      <td>哥哥</td>
      <td>男</td>
      <td>24</td>
      <td>唱跳rap打籃球</td>
    </tr>
    <tr>
      <td></td>
      <td>理塘</td>
      <td>男</td>
      <td>20</td>
      <td>測碼抽銳刻五</td>
    </tr>
    <tr>
      <td></td>
      <td>夢淚</td>
      <td>男</td>
      <td>27</td>
      <td>出名刀偷塔變終極獵手</td>
    </tr>
  </table>
</body>

這顯示出來就是上面的圖片樣子

跨行合併（rowspan）：如果我們想要下面的效果就需要使用到rowspan屬性

<body>
  <table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
    <tr>
      <th rowspan="5">全明星資訊收集</th><!--根據要求，找到標題，寫上屬性rowspan,並且寫上參數5，代表合併第一行至第五行，同時，註解掉每一行的第一列-->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <!-- <th></th> -->
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
      <th>嗜好</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>哥哥</td>
      <td>男</td>
      <td>24</td>
      <td>唱跳rap打籃球</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>理塘</td>
      <td>男</td>
      <td>20</td>
      <td>測碼抽銳刻五</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>夢淚</td>
      <td>男</td>
      <td>27</td>
      <td>出名刀偷塔變終極獵手</td>
    </tr>
  </table>
</body>

跨列合併（colspan）：如果我們想要下面的效果就需要使用到colspan屬性

<body>
  <table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
    <tr>
      <th colspan="5">全明星資訊收集</th><!--根據要求，找到標題，寫上屬性colspan,並且寫上參數5，代表合併第一列至第五列，同時，註解掉每一列的第一行-->
      <!-- <td></td>
      <td></td>
      <td></td>
      <td></td> -->
    </tr>
    <tr>
      <!-- <th></th> -->
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
      <th>嗜好</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>哥哥</td>
      <td>男</td>
      <td>24</td>
      <td>唱跳rap打籃球</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>理塘</td>
      <td>男</td>
      <td>20</td>
      <td>測碼抽銳刻五</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>夢淚</td>
      <td>男</td>
      <td>27</td>
      <td>出名刀偷塔變終極獵手</td>
    </tr>
  </table>
</body>

到這篇關於HTML表格合併的具體實現方式的文章就介紹到這了,更多相關HTML表格合併內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes. com！

相關文章