• 【HTML】HTML基础6.2(表格之合并单元格)


    目录

    合并单元格效果

    与<>

    ​编辑 合并属性

    使用方法

     步骤总结


    合并单元格效果

    代码

     

    1. <table align="center" border="2">
    2. <thead>
    3. <tr><th>演员th><th>成就th><th>剧照th>tr>
    4. thead>
    5. <tbody>
    6. <tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E5%85%8B%E9%87%8C%E6%96%AF%C2%B7%E5%B8%95%E6%8B%89%E7%89%B9/891886?fromModule=lemma_inlink" target="_blank">克里斯·帕拉特a>td> <td>美国MTV电影奖最佳男演员td> <td rowspan="2"><img src="img/写真.webp" width="100">td>tr>
    7. <tr><td>第41届土星奖最佳男主角td>tr>
    8. <tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E6%88%B4%E5%A4%AB%C2%B7%E5%B7%B4%E8%92%82%E6%96%AF%E5%A1%94/14493953?fromModule=lemma_inlink#3" target="_blank">戴夫·巴蒂斯塔a>td> <td>世界重量级冠军td> <td rowspan="2"><img src="img/大块头.webp" width="100">td>tr>
    9. <tr><td>OVW重量级冠军td>tr>
    10. <tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E4%BD%90%E4%BC%8A%C2%B7%E7%B4%A2%E5%B0%94%E8%BE%BE%E5%A8%9C/6131187" target="_blank">佐伊·索尔达娜a>td> <td>第36届土星奖最佳女主角奖td> <td rowspan="2"><img src="img/女主.webp" width="100">td>tr>
    11. <tr><td>第19届MTV电影奖最佳女演员奖(提名)td>tr>
    12. tbody>
    13. table>

    接下来是效果实现解析

    与<>

    这两种标签没有实际意义,只是能够增加可读性,并且可以收缩,很常用

    如:收缩状态

    打开之后

     合并属性

    rowspan="合并单元格的个数"

    跨行

    colspan="合并单元格的个数"跨列

    使用方法

    如果要实现跨行操作,这时候可以,找到最上面的一个单元格为目标,插入属性,如

    	<tr><td rowspan="2"><a href="某个链接">克里斯·帕拉特a>td> <td>美国MTV电影奖最佳男演员td> <td rowspan="2"><img src="img/写真.webp" width="100">td>tr>

    这个时候的表格就是合并了的

    这个时候还要特别注意,合并过后的表格一定要删掉他已经合并了的表格的内容

    这个实际上是两行,但是第一列和第三列都已经被合并了

    所以代码的下一行只需要写上你还要的就可以了

    1. <tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E5%85%8B%E9%87%8C%E6%96%AF%C2%B7%E5%B8%95%E6%8B%89%E7%89%B9/891886?fromModule=lemma_inlink" target="_blank">克里斯·帕拉特a>td> <td>美国MTV电影奖最佳男演员td> <td rowspan="2"><img src="img/写真.webp" width="100">td>tr>
    2. <tr><td>第41届土星奖最佳男主角td>tr>

     步骤总结

    ①确认您想要合并的是行还是列

    ②找到最上边或者最左边的单元格

    ③删除已经合并的单元格的多余内容

    今天的分享就到这里啦~希望能帮到您! 

  • 相关阅读:
    HarmonyOS开发(一):开发工具起步
    跟着MindSpore一起学习深度概率
    纯前端 excel 导出
    基于华为云云耀云服务器L实例开展性能评测|MySQL性能测评
    原创 | Pro无法与arcgis.com连接
    C++ enum与enum class对比
    微信小程序WeUI项目weui-miniprogram如何运行起来?
    Python基础_模块操作
    kafka_2.10启动Kafka broker
    【接口自动化测试】第一节.接口自动化测试基础和框架介绍
  • 原文地址:https://blog.csdn.net/2301_79982543/article/details/136432660