详解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队列归并内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
