html中表格table的行列合并问题解决
2015-02-27 19:51
811 查看
因为要做个网站,里面的内容除了大段文字之外,还有大量的表格,这就发现了表格排版的问题。
一般简单的表格,例如:
这种形式就比较简单,只要简单地将<tr></tr><td></td>(或者<th></th>就行了
代码如下:
但是到了一些比较错落的就需要用到colspan(跨列)和rowspan(跨行)了。
colspan(跨列)和rowspan(跨行)就是表面意思,也可以看为行列合并。
colspan(跨列):
[align=center] [/align]
上图中红色部分即为此格已跨两列。
代码如下(仅是部分代码):
如果想要如此工整的表格,就必须先预算在要跨列的格所在行以下的行中含有最多格子的行的格子数是多少,决定了跨列格要跨的格数。
以上图举例,第二行和第三行的格子数均为3,所以想要形成上图的效果,第一行第一列就想要横跨两列,所以colspan="2"
rowspan(跨行)的方法与colspan(跨列)类似。
rowspan(跨行)与colspan(跨列)同时出现的例子:
[align=left] [/align]
代码如下(仅是部分代码):
一般简单的表格,例如:
这种形式就比较简单,只要简单地将<tr></tr><td></td>(或者<th></th>就行了
代码如下:
<p><!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></p>
但是到了一些比较错落的就需要用到colspan(跨列)和rowspan(跨行)了。
colspan(跨列)和rowspan(跨行)就是表面意思,也可以看为行列合并。
colspan(跨列):
[align=center] [/align]
上图中红色部分即为此格已跨两列。
代码如下(仅是部分代码):
<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(跨列)同时出现的例子:
[align=left] [/align]
代码如下(仅是部分代码):
<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>
相关文章推荐
- 解决itext-rtf.jar 对html转换后生成rtf文档 其中表格行列合并的问题
- table表格合并列的问题,在IE中能够正常显示,但是在火狐中,好像colspan没有起作用一样,解决办法!!!!
- 网页表格表头固定并可以自由拉伸列头的问题解决 (完美方案_html_table_seo)
- 解决 HTML 转到 XHTML 中,表格(Table)不能居中的问题。align="center" 过时问题
- iText7根据html表格(table)代码生成表格、解决跨行跨列问题
- html页面中关于一个table表格中设置上下2个td宽度一致的问题
- [HTML]表格Table宽度设置无效的解决方法
- [原创] asp.net生成HTML的合并table行列rowspan的新方法
- html table宽度设置,本篇方法成功解决了我徒手写html的问题
- 【HTML】【CSS】表格设置了table-layout:fixed后第一行合并单元格其下单元格宽度设置不起作用的解决方法
- 解决 apache poi 转换 word(docx) 文件到 html 文件表格没边框的问题
- 深入解析HTML的table表格标签与相关的换行问题
- 轻松解决HTML + CSS各种表格问题
- 【HTML】【CSS】表格设置了table-layout:fixed后第一行合并单元格其下单元格宽度设置不起作用的解决方法
- 表格table嵌套,边框合并问题
- 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题
- HTML table合并行列后,使用百分比设置列宽
- 解决 ie 下 javascript 设置 table.tBodies.innerHTML 无法设置的问题
- html中table居中和表格内容居中的问题
- POI操作Word中表格 转html的table时解决横跨colspan