• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    详解html中表格table的行列合并问题解决

    发布者: 琛瑞 | 发布时间: 2025-8-13 08:01| 查看数: 76| 评论数: 0|帖子模式

    因为要做个网站，里面的内容除了大段文字之外，还有大量的表格，这就发现了表格排版的问题。
    一般简单的表格，例如：

    这种形式就比较简单，只要简单地将<tr></tr><td></td>(或者<th></th>就行了
    代码如下：
    1. <!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>">
    2. <html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>无标题文档</title>
    6. <style>
    7. td{width:200px;
    8.    height:100px;
    9.    border:#000 2px solid;
    10.    margin:0px;
    11.    padding:0px;
    12. }
    13. </style>
    14. </head></p><p><body>
    15. <table>
    16. <tr>
    17. <td></td>
    18. <td></td>
    19. <td></td>
    20. </tr>
    21. <tr>
    22. <td></td>
    23. <td></td>
    24. <td></td>
    25. </tr>
    26. <tr>
    27. <td></td>
    28. <td></td>
    29. <td></td>
    30. </tr>
    31. </table>
    32. </body>
    33. </html>
    复制代码
    但是到了一些比较错落的就需要用到colspan（跨列）和rowspan（跨行）了。
    colspan（跨列）和rowspan（跨行）就是表面意思，也可以看为行列合并。
    colspan（跨列）：

    上图中红色部分即为此格已跨两列。
    代码如下（仅是部分代码）：
    1. <table>
    2. <tr>
    3. <td colspan="2" style="background:#F00"></td>
    4. <td></td>
    5. </tr>
    6. <tr>
    7. <td></td>
    8. <td></td>
    9. <td></td>
    10. </tr>
    11. <tr>
    12. <td></td>
    13. <td></td>
    14. <td></td>
    15. </tr>
    16. </table>
    复制代码
    如果想要如此工整的表格，就必须先预算在要跨列的格所在行以下的行中含有最多格子的行的格子数是多少，决定了跨列格要跨的格数。
    以上图举例，第二行和第三行的格子数均为3，所以想要形成上图的效果，第一行第一列就想要横跨两列，所以colspan="2"
    rowspan（跨行）的方法与colspan（跨列）类似。
    rowspan（跨行）与colspan（跨列）同时出现的例子：

    代码如下（仅是部分代码）：
    1. <table>
    2. <tr>
    3. <th></th>
    4. <th colspan="5"></th>
    5. </tr>
    6. <tr>
    7. <th></th>
    8. <th <span style="color:#000000;">colspan</span>="3"></th>
    9. <th></th>
    10. <th></th>
    11. </tr>
    12. <tr>
    13. <th></th>
    14. <th></th>
    15. <th></th>
    16. <th></th>
    17. <th></th>
    18. <th></th>
    19. </tr>
    20. <tr>
    21. <th rowspan="3"></th>
    22. <th></th>
    23. <th colspan="2"></th>
    24. <th></th>
    25. <th></th>
    26. </tr>
    27. <tr>
    28. <th></th>
    29. <th colspan="2"></th>
    30. <th></th>
    31. <th></th>
    32. </tr>
    33. <tr>
    34. <th></th>
    35. <th colspan="2"></th>
    36. <th></th>
    37. <th></th>
    38. </tr>
    39. </table>
    40. <table>
    41. <tr class="zj">
    42. <th rowspan="4"></th>
    43. <th colspan="8"></th>
    44. </tr>
    45. <tr>
    46. <th></th>
    47. <th></th>
    48. <th></th>
    49. <th></th>
    50. <th></th>
    51. <th></th>
    52. <th></th>
    53. <th></th>
    54. </tr>
    55. <tr>
    56. <th></th>
    57. <th colspan="4"></th>
    58. <th></th>
    59. <th colspan="2"></th>
    60. </tr>
    61. <tr>
    62. <th></th>
    63. <th colspan="7"></tr>
    64. </table>
    复制代码
    到此这篇关于详解html中表格table的行列合并问题解决的文章就介绍到这了,更多相关html表格table行列合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表