您好,欢迎来到九壹网。
搜索
您的当前位置:首页原生table表格的合并行列

原生table表格的合并行列

来源:九壹网

原生table的单元格合并
简单的原生table表格是由一个或多个` tr `、` th ` 或 ` td `标签组合嵌套
- ` tr `标签定义的表格行
- ` th `标签定义表头
- ` td `标签定义单元格

复杂的表格还包括caption 、col 、colgroup、thead、tfoot、tbody等标签,

合并单元格的主要使用的是colspan 和 rowspan 属性,可以设置横跨列和横跨行的值

课程表demo

<table border='1'>
    <tr> //行
        <th>工作日</th>   //单元格
        <th>工作日</th>
        <th>工作日</th>
        <th>工作日</th>
        <th>工作日</th>
        <th>休息日</th>
        <th>休息日</th>
    </tr>
        <tr> 
        <th>周一</th>   
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>
    <tr> 
        <th>语文</th>  
        <th>语文</th>
        <th>英语</th>
        <th>数学</th>
        <th>科学</th>
        <th>物理</th>
        <th>自习</th>
    </tr>
    </tr>
        <tr> 
        <th>语文</th>  
        <th>数学</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
        <th>科学</th>
        <th>自习</th>
    </tr>
</table>

目标:合并工作日和休息日
过程:工作日个数已定,所以将后面4个工作日隐藏,再将第一个工作日横跨5列

<table border='1'>
    <tr> //行
        <th colspan="5">工作日</th>
        <th style='display:none;'>工作日</th>
        <th style='display:none;'>工作日</th>
        <th style='display:none;'>工作日</th>
        <th style='display:none;'>工作日</th>
        <th colspan="2">休息日</th>  
        <th style="display:none;">休息日</th>
    </tr>
        <tr> 
        <th>周一</th>   
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>
    <tr>  
      <th rowspan="2">语文</th>  
      <th>语文</th>  
      <th>英语</th>  
      <th>数学</th>  
      <th>科学</th>  
        <th>物理</th>  
        <th rowspan="2">自习</th>  
    </tr>  
<tr>  
  <th style="display:none;">语文</th>  
  <th>数学</th>  
  <th>数学</th>  
  <th>英语</th>  
  <th>物理</th>  
  <th>科学</th>  
  <th style="display:none;">自习</th>  
</tr>
</table>

总结:合并单元格需要先隐藏多余的单元格,再进行横跨行和横跨列设置

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- 91gzw.com 版权所有 湘ICP备2023023988号-2

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务