Html合并table单元格显示相关问题


<body>
        <table width="99%" align="center" bgcolor="#BBBBBB" border="1px">
            
            <tr height="40px">
                <td>
                    <table width="100%">
                        <tr><td width="20%"></td>
                        <td width="60%" align="center" style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;color:green">Welcome to PDC!</td>
                        <td align="center"><img src="Image/PDC.png" height="38px"></td >
                        </tr>
                    </table>
                </td>
            </tr>
            
            
            <tr height="200px">
                <td>
                    <table width="100%" border="1px">
                        <tr>
                            <td width="25%">
                                <table>
                                    <tr><td><a href="PDCSI.html" target="iframe1">大会简介</a></td></tr>
                                    <tr><td><a href="PDCCI.html" target="iframe2">大会介绍</a></td></tr>
                                    <tr><td><a href="BASEJOB.html" target="iframe3">基本业务</a></td></tr>
                                    <tr><td><a href="GAP.html"target="iframe4">大会人事</a></td></tr>
                                    <tr><td><a href="POTC.html"target="iframe5">大会宗旨</a></td></tr>
                                </table>
                            </td>
                            
                            <td>
                                <iframe name="iframe1" src="" width="100%" height="100%" border="none"></iframe>
                                <iframe name="iframe2" src="" width="100%" height="100%" border="none"></iframe>                            
                                <iframe name="iframe3" src="" width="100%" height="100%" border="none"></iframe>                                                        
                                <iframe name="iframe4" src="" width="100%" height="100%" border="none"></iframe>                                                    
                                <iframe name="iframe5" src="" width="100%" height="100%" border="none"></iframe>                                        
                            </td>
                                                        
                        </tr>
                    </table>
                </td>
            </tr>
            
            
            
            
            <tr height="30px">
                <td align="center">BASE/ALL</td>
            </tr>
        </table>

我的代码如上面
我的图片如下

第二行右边的五行单元格怎么整合在一起，用什么语句整合，达到点一个右边就只显示一个的效果

引用皆我百晓生小程序回复内容作答：
要把第二行右边的五行单元格合并成一个单元格，可以使用colspan属性来实现。

将这五个单元格合并为一个单元格，可以在最外层的<td>标签上添加colspan="5"属性，如下所示：

<tr height="200px">
    <td colspan="5">
        <table width="100%" border="1px">
            <!-- 其他代码 -->
        </table>
    </td>
</tr>

这样就会将这五个单元格合并为一个单元格，并且占据整行的宽度。通过设置colspan属性的值为合并的单元格数目。

注意，由于合并了单元格，所以在内层的表格中的单元格数量应该和合并的数量保持一致，或者使用合适的colspan属性来进行调整。

希望能帮到你！

【相关推荐】

这个问题的回答你可以参考下: https://ask.csdn.net/questions/730494
这篇博客你也可以参考下：html表格标签table单元格合并演示及行合并列合并的规律
您还可以看一下孟光焱老师的Tableau从入门到大伽视频教程课程中的奥迪销售架驶舱_右下角切换销量前三后三名小节, 巩固相关知识点
除此之外, 这篇博客: html学习(一)为什么不建议用table进行布局中的 为什么不建议用table进行布局 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
在实际的项目开发过程中，我们不建议用table进行布局，原因如下：
- table比其它html标记占更多的字节。（造成下载时间延迟，占用服务器更多流量资源）
- table会阻挡浏览器渲染引擎的渲染顺序。（会延迟页面的生成速度，让用户等待更久的时间）
- table里显示图片时需要你把单个、有逻辑性的图片切成多个图。（增加设计的复杂度，增加页面加载时间，增加http会话数）
- 在某些浏览器中，table里的文字的拷贝会出现问题。（会让用户不悦）
- table会影响其内部的某些布局属性的生效（比如里的元素的height:100%) （限制页面设计的自由性）
- 一旦学了CSS的知识，你会发现使用table做页面布局会变得更麻烦。（先花时间学一些CSS知识，会省去你以后大量的时间）
- ‘table对’对于页面布局来说，从语义上看是不正确的。（它描述的是表现，而不是内容）
- table代码会让阅读者抓狂。（不但无法利用CSS，而且会不知所云，尤其在进行页面改版或内容抽取的时候）
- table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
以上都是比较专业的回答，从我个人使用的角度来白话说一下，首先table是个规则的显示，几行几列都是比较确定的，而我们的页面布局并不是那么有规律，所以有时要让数据同时占几行或占几列来打破这种规律，还有就是数据在表格中居左、居中、居右都得进行控制，无形加大了编码的难度，得照顾各个方面，不像使用div+css定位来的快些。升华地说，在一个有局限性的框架里面是创造不出特别好的作品的，只有在一片自由、没有限制的空间中才方便人进行创造、简单的创造。。。
当然，有些情况下使用table布局会很好用，就是那些一看就很有“表格感”的界面。没有了，就先写这些吧。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^