詳解html中表格table的行列合并問題解決

因?yàn)橐鰝€(gè)網(wǎng)站,里面的內(nèi)容除了大段文字之外,還有大量的表格,這就發(fā)現(xiàn)了表格排版的問題。
一般簡(jiǎn)單的表格,例如:
這種形式就比較簡(jiǎn)單,只要簡(jiǎn)單地將<tr></tr><td></td>(或者<th></th>就行了
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style> td{width:200px; height:100px; border:#000 2px solid; margin:0px; padding:0px; } </style> </head></p><p><body> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
但是到了一些比較錯(cuò)落的就需要用到colspan(跨列)和rowspan(跨行)了。
colspan(跨列)和rowspan(跨行)就是表面意思,也可以看為行列合并。
colspan(跨列):
上圖中紅色部分即為此格已跨兩列。
代碼如下(僅是部分代碼):
<table> <tr> <td colspan="2" style="background:#F00"></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
如果想要如此工整的表格,就必須先預(yù)算在要跨列的格所在行以下的行中含有最多格子的行的格子數(shù)是多少,決定了跨列格要跨的格數(shù)。
以上圖舉例,第二行和第三行的格子數(shù)均為3,所以想要形成上圖的效果,第一行第一列就想要橫跨兩列,所以colspan="2"
rowspan(跨行)的方法與colspan(跨列)類似。
rowspan(跨行)與colspan(跨列)同時(shí)出現(xiàn)的例子:
代碼如下(僅是部分代碼):
<table> <tr> <th></th> <th colspan="5"></th> </tr> <tr> <th></th> <th <span style="color:#000000;">colspan</span>="3"></th> <th></th> <th></th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <th rowspan="3"></th> <th></th> <th colspan="2"></th> <th></th> <th></th> </tr> <tr> <th></th> <th colspan="2"></th> <th></th> <th></th> </tr> <tr> <th></th> <th colspan="2"></th> <th></th> <th></th> </tr> </table> <table> <tr class="zj"> <th rowspan="4"></th> <th colspan="8"></th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <th></th> <th colspan="4"></th> <th></th> <th colspan="2"></th> </tr> <tr> <th></th> <th colspan="7"></tr> </table>
到此這篇關(guān)于詳解html中表格table的行列合并問題解決的文章就介紹到這了,更多相關(guān)html表格table行列合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用html5實(shí)現(xiàn)表格實(shí)現(xiàn)標(biāo)題合并的實(shí)例代碼
在前端開發(fā)中經(jīng)常會(huì)遇到標(biāo)題合并的需求,今天小編給大家?guī)砹耸褂胔tml5實(shí)現(xiàn)表格實(shí)現(xiàn)標(biāo)題合并的實(shí)例代碼,感興趣的朋友跟隨小編一起看看吧2019-05-13- 表格是日常常用的工具,很多時(shí)候需要用到單元合并,本文主要介紹了HTML表格合并的具體實(shí)現(xiàn)方式, 具有一定的參考價(jià)值,感興趣的可以了解一下2023-01-05
HTML中table表格拆分合并(colspan、rowspan)
這篇文章主要介紹了HTML中table表格拆分合并(colspan、rowspan),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2021-04-07- 這篇文章主要介紹了html+css合并表格邊框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2021-03-31
html原生table實(shí)現(xiàn)合并單元格以及合并表頭的示例代碼
表格是常見的數(shù)據(jù)統(tǒng)計(jì)的一種形式,合并單元格及合并表頭經(jīng)常在復(fù)雜表格中遇到,本文主要介紹了html原生table實(shí)現(xiàn)合并單元格以及合并表頭的示例代碼,感興趣的可以了解一下2023-04-28