html中表格table的行列合并问题解决
来源:互联网 发布:淘宝网羊绒面料批发 编辑:程序博客网 时间:2024/05/17 23:11
因为要做个网站,里面的内容除了大段文字之外,还有大量的表格,这就发现了表格排版的问题。
一般简单的表格,例如:
这种形式就比较简单,只要简单地将<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(跨列):
上图中红色部分即为此格已跨两列。
代码如下(仅是部分代码):<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>
0 0
- html中表格table的行列合并问题解决
- table表格行列的合并处理
- NO.11 HTML之表格标签中最后一个知识点---行列合并
- HTML 中表格table 的相关知识
- HTML中table表格的常用使用
- HTML table合并行列后,使用百分比设置列宽
- table表格合并第一列中相同的内容!
- table表格合并第一列中相同的内容!
- cppwebbrower中获取html中table表格的代码
- html的table跨行跨列合并
- html中常用的table表格的css
- 解决itext-rtf.jar 对html转换后生成rtf文档 其中表格行列合并的问题
- 通过javascript实现html中table单元格的合并
- html 中 table 的练习 关于合并单元格
- HTML中构建自动伸缩的表格Table
- html中表格table的内容居中显示
- html中表格table的内容居中显示
- html中表格table的内容居中显示
- java知识点:dom4j 由map转字符串
- [周五]关于android项目下引入第三方jar包注意
- XCode添加文件夹形式
- hp-ux11.31操作系统上的filecache参数:filecache_max和filecache_min
- adb shell获取root权限
- html中表格table的行列合并问题解决
- ListView Adapter适配器的布局实例及相关问题
- iOS中基本UI控件的介绍和使用
- Card Collector - HDU 4336 状压期望dp
- 配置go语言vim
- 智能手机之硬件开发知识篇一
- oracle生成AWR报告
- 2015读书计划
- [BZOJ 2727][HNOI 2012]双十字(树状数组+计数问题)