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-13HTML中table表格拆分合并(colspan、rowspan)
這篇文章主要介紹了HTML中table表格拆分合并(colspan、rowspan),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編2021-04-07- 這篇文章主要介紹了html+css合并表格邊框的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2021-03-31
- 這篇文章主要介紹了詳解html中表格table的行列合并問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來2020-07-28
html原生table實現(xiàn)合并單元格以及合并表頭的示例代碼
表格是常見的數(shù)據(jù)統(tǒng)計的一種形式,合并單元格及合并表頭經(jīng)常在復(fù)雜表格中遇到,本文主要介紹了html原生table實現(xiàn)合并單元格以及合并表頭的示例代碼,感興趣的可以了解一下2023-04-28