table中的colspan和rowspan
经常手写表格时 查半天的两个属性，记下来
<!DOCTYPE html> <html lang="en" > <head> <meta charset="GBK" /> <style> .tableStyle1 table td { border:1px solid #ff8866; background:#FFFFFF; } .tableStyle1 table { height:50px; float:left; background:#eeeeee; } .tableStyle table td { border:1px solid #ff8866; float:right; } .tableStyle table { height:50px; float:left; } </style> </head> <body > <div class="tableStyle1" style="100%; text-align: center; border:1px solid #778899;"> <div style="1%; float:left; height:5px;"></div> <div style="float:left"> <table style="120px;text-align:center; border:1px solid #ff8866;"> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td colspan="3"> 1</td> </tr> <tr> <td> 1</td> <td rowspan="2"> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> </tr> <tr> <td rowspan="2" > 1</td> </tr> <tr> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td rowspan="2" > 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> <td> 1</td> </tr> <tr> <td rowspan="2" > 1</td> <td> 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> <td rowspan="2" > 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="15" rowspan="5"> 1</td> <td rowspan="15" > 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <div> <div class="tableStyle" style="100%; text-align: center; border:1px solid #778899;"> <div style="1%; float:left; height:5px;"></div> <div style="float:left"> <table style="120px;text-align:center; border:1px solid #ff8866;"> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td colspan="3"> 1</td> </tr> <tr> <td> 1</td> <td rowspan="2"> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> </tr> <tr> <td rowspan="2" > 1</td> </tr> <tr> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td rowspan="2" > 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> <td> 1</td> </tr> <tr> <td rowspan="2" > 1</td> <td> 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="2" rowspan="3"> 1</td> <td rowspan="2" > 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <table style="120px;text-align:center; border:1px solid #ff8866; "> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td colspan="15" rowspan="5"> 1</td> <td rowspan="15" > 1</td> </tr> <tr> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> <tr> <td> 1</td> <td> 1</td> <td> 1</td> <td> 1</td> </tr> </table> <div> </div> <footer> </footer> </body> </html> <!------------- 得出以下总结 colspan 合并同行单元格 用多列属性 这个简单点 即 在同列标签内保留 第一对td 标签 colspan 属性设为合并后的单元格的跨列数 rowspan 合并同列单元格 用多行属性 这个复杂点 其实也是一样 将要合并的单元格保留第一对 ，不过呢，在删除的时候是删除下一个tr 中的td html 不管其它他是从左到右一个个找tr 然后 找td 如果找到单元格的 colspan rowspan属性 就扩展开，如果下行为空则少扩展一格 然后 继续找下一个 简单的说就是html是按td 逐个填充 找到单元格td的 colspan 属性时 会去确认有没有 tr 及 tr是否为空，只有存在不为空的tr（里面有td的tr）时才向纵向方向展开一个空间 找到单元格td的 rowspan 属性时 不管如何都会向横向展开一个单元格的横向空间 td init x定位是以实际己占空间最后位置开始，y轴定位是以单元格所在的tr 是第几个tr（在数第几时忽略没有装有td的tr）* 单元格高度 重复这个过程直到 所有td init 所以不正确的设置可能会造成 x轴不对齐 但不会出现y轴不对齐。 （按默认的不会，但将td设为 飘浮时会在这个基础之上改变,飘浮时扩展大小将失效，其余按盒子模） ------------------->