當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

詳解html中表格table的行列合并問(wèn)題解決

 2020-10-18 15:41  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

這篇文章主要介紹了詳解html中表格table的行列合并問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

因?yàn)橐鰝€(gè)網(wǎng)站,里面的內(nèi)容除了大段文字之外,還有大量的表格,這就發(fā)現(xiàn)了表格排版的問(wèn)題。

一般簡(jiǎn)單的表格,例如:

這種形式就比較簡(jiǎn)單,只要簡(jiǎn)單地將(或者就行了

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank >
<html xmlns="<a target=_blank >http://www.w3.org/1999/xhtml<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(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的行列合并問(wèn)題解決的文章就介紹到這了,更多相關(guān)html表格table行列合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

來(lái)源:腳本之家

鏈接:https://www.jb51.net/web/737593.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
html

相關(guān)文章

熱門排行

信息推薦