因为要做个网站,里面的内容除了大段文字之外,还有大量的表格,这就发现了表格排版的问题。
一般简单的表格,例如:
这种形式就比较简单,只要简单地将<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>无标题文档</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>
但是到了一些比较错落的就需要用到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>
如果想要如此工整的表格,就必须先预算在要跨列的格所在行以下的行中含有最多格子的行的格子数是多少,决定了跨列格要跨的格数。
以上图举例,第二行和第三行的格子数均为3,所以想要形成上图的效果,第一行第一列就想要横跨两列,所以colspan="2"
rowspan(跨行)的方法与colspan(跨列)类似。
rowspan(跨行)与colspan(跨列)同时出现的例子:
代码如下(仅是部分代码):
<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>
标签:
html,table,行列合并
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“详解html中表格table的行列合并问题解决”评论...
更新日志
2024年05月13日
2024年05月13日
- 选举日 Founders Day
- 剑与远征启程豹女角色介绍 豹女值得培养吗
- 歧路旅人大陆的霸者开局选哪条路 三支主线
- 鸣潮桃祁声骸推荐 声骸主副词条选什么好
- 星穹铁道2.2糖浆药水的故事怎么达成 糖浆药水的故事隐藏成就攻略
- 星穹铁道2.2黄金与机械表怎么达成 黄金与机械表成就攻略
- 星穹铁道2.2速度加快血糖升高怎么达成 速度加快血糖升高成就攻略
- 《传送门64》被取消后 作者正在制作新任天堂64游戏
- 《塞尔达传说:王国之泪》发售1周年!官方晒出贺图
- 《坦克世界》天蝎与其标志性风格一起上架特惠商城
- 张国荣1978-DAYDREAMIN[Polydor]【APE+CUE】
- ABC唱片《田纳西.尔尼福特.永远的田纳西.尼尔福特》HD德国版[WAV+CUE]
- 区瑞强1980-云外千峰(復黑王)(16bit-44.1kHz)FLAC
- 韩国球迷输不起!不满客队门将庆祝 扔瓶泄愤砸倒球员
- 斗鱼公告登热搜:电棍Otto辱骂Mlxg被封7天