欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用html5實現(xiàn)表格實現(xiàn)標題合并的實例代碼

    在前端開發(fā)中經(jīng)常會遇到標題合并的需求,今天小編給大家?guī)砹耸褂胔tml5實現(xiàn)表格實現(xiàn)標題合并的實例代碼,感興趣的朋友跟隨小編一起看看吧
    2019-05-13
  • HTML中table表格拆分合并(colspan、rowspan)

    這篇文章主要介紹了HTML中table表格拆分合并(colspan、rowspan),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編
    2021-04-07
  • html+css合并表格邊框的示例代碼

    這篇文章主要介紹了html+css合并表格邊框的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習
    2021-03-31
  • 詳解html中表格table的行列合并問題解決

    這篇文章主要介紹了詳解html中表格table的行列合并問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2020-07-28
  • html原生table實現(xiàn)合并單元格以及合并表頭的示例代碼

    表格是常見的數(shù)據(jù)統(tǒng)計的一種形式,合并單元格及合并表頭經(jīng)常在復(fù)雜表格中遇到,本文主要介紹了html原生table實現(xiàn)合并單元格以及合并表頭的示例代碼,感興趣的可以了解一下
    2023-04-28

最新評論