详解html中表格table的行列合并问题解决
|
因为要做个网站，里面的内容除了大段文字之外，还有大量的表格，这就发现了表格排版的问题。 一般简单的表格，例如： 这种形式就比较简单，只要简单地将<tr></tr><td></td>(或者<th></th>就行了 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href=http://www.jb51.net/web/"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.jb51.net/web/"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的行列合并问题解决的文章就介绍到这了,更多相关html表格table行列合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ （编辑：开发网_运城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
- jsf – 如何在运行时使用数据库中的值初始化inputtextfield
- HTML iframe和frameset的区别_动力节点Java学院整理
- sql-server – 如何从SQL Server Express 2005恢复删除的表
- Sql中session阻塞怎样处理，对阻塞你了解多少？
- Sql Anywhere 11：恢复增量备份失败
- UC在线人数过10万 经典版本V3.0即将现身江湖
- 如何在SQL Server中将多行连接成一列？
- 顺和达被指定为制造业信息化咨询服务机构
- 在ASP.NET 2.0中操作数据之四十七：用SqlDataSource控件插入
- sql-server – 备份master数据库的频率是多少？
