常春岛资源网 Design By www.syssdc.com
因为要做个网站,里面的内容除了大段文字之外,还有大量的表格,这就发现了表格排版的问题。
一般简单的表格,例如:
这种形式就比较简单,只要简单地将<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,行列合并
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 出发吧麦芬噩兆降临之谷试炼怎么过 噩兆降临之谷阵容打法攻略
- 《黑神话:悟空》定价268元,8月20日同步上线WeGame!
- 博主称《七龙珠:电光炸裂!ZERO》或将在10月发售
- 《星期一的丰满》:新角色“热波师”变阿黑颜!?
- 张琍敏1986-群星会29[台湾版][WAV+CUE]
- 张宇《雨一直下》台首版[WAV整轨]
- 叶蕴仪1990-原宿[日本版][WAV+CUE]
- 看《庆余年2》腾讯SVIP被指VIP套娃 客服:所有用户都有广告的
- 刘畊宏脚踝受伤坐轮椅:暂时不能带大家跳操了
- 《燕云十六声》优美舞蹈幕后揭秘 国家级大师助力呈现
- 群星《2005香港高级视听展纪念大碟 SACD 》[DFF][1.9G]
- 王杰《同名精选辑》引进首版 首创[WAV+CUE][826M]
- 群星《爱情101情歌101延续篇 牵动心灵的情歌》6CD[WAV+CUE][4.2G]
- 【原神】璃月特产“人间美味”绝云椒椒的收集(58)
- 无相之草BOSS怎么打?无相草打法攻略