HTML表格合并的具體實現(xiàn)方式

發(fā)布時間：2023-01-05 16:54:20 作者： Mark呀

我要評論

表格是日常常用的工具，很多時候需要用到單元合并，本文主要介紹了HTML表格合并的具體實現(xiàn)方式，具有一定的參考價值，感興趣的可以了解一下

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

可以看到這樣是非常不河貍的。這就需要合并單元格了

主要步驟:

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

二、找出需要合并的單元格。

三、如果被合并的單元格有內(nèi)容或者占用了位置，則可以將被合并的單元格在源代碼中刪掉。

特別注意：

我們在合并單元格的時候，如果被合并的單元格有內(nèi)容，雖然不會影響到合并，但因為被合并的單元格內(nèi)容沒做任何處理，所以單元格會自動后移。

解決方案：直接刪除多余的單元格即可。

主要代碼：

跨行合并：rowspan="合并單元格的個數(shù)"

跨列合并：colspan="合并單元格的個數(shù)"

詳解：

目標單元格：

1：跨行：最上側(cè)單元格為目標單元格，寫合并代碼。

2：跨列：最左側(cè)單元格為目標單元格，寫合并代碼。

然后我們跟著主要步驟來一遍：

初始表格
<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><!--根據(jù)要求，找到標題，寫上屬性rowspan,并且寫上參數(shù)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><!--根據(jù)要求，找到標題，寫上屬性colspan,并且寫上參數(shù)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>

到此這篇關(guān)于HTML表格合并的具體實現(xiàn)方式的文章就介紹到這了,更多相關(guān)HTML表格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！