DDR爱好者之家 Design By 杰米
因为要做个网站,里面的内容除了大段文字之外,还有大量的表格,这就发现了表格排版的问题。
一般简单的表格,例如:
这种形式就比较简单,只要简单地将<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>
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年05月21日
2024年05月21日
- dnf巴卡尔武器怎么融合
- 《夜族崛起》邪恶技能效果介绍
- 《道衍诀》声望与灵石获取方法
- 《华音》角色图鉴介绍
- 【欧美乡村(H)】MichaelBorger-2024-JustforUs(FLAC)
- 张国荣.2013-MissYouMuch,Leslie【环球】3CD【WAV+CUE】
- 中唱唱片群星《好歌珍藏-士兵旋律》2CDWAV
- 谁说男人只能被女人吸引?有劲爆话题的囧图
- 想看周杰伦却抢到平替音乐会票 被误导的不止一人?
- 全球千万预约,这款和黑神话一起在海外乱杀的游戏要来了
- 高品质耳机测试发烧碟《森海塞尔耳机测试碟合集》 6CD [CUE+FLAC/APE][1.5G]
- 叶倩文《华纳超极品音色系列》MQA 3CD[FLAC][1.3G]
- 《孙燕姿歌曲合集》[WAV/分轨][18GB]
- 萧煌奇.2024-没事的【华纳】【WAV分轨】
- 于冠华.1992-爱情囚犯【新笛】【WAV+CUE】