HTML中table标签的跨多行和多列布局方法

最新推荐文章于 2024-07-26 14:13:22 发布
最新推荐文章于 2024-07-26 14:13:22 发布
阅读量3.4w 收藏 39
点赞数 11
分类专栏： css h5 文章标签： table HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37861326/article/details/80804072
版权
css 同时被 2 个专栏收录
10 篇文章 1 订阅
订阅专栏
h5
5 篇文章 0 订阅
订阅专栏

先放一张布局效果效果图


在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：

HTML布局代码：

<!-- 明细表 -->
  <div class="chartbox">
    <ul class="chartmenu">
      <li>模块</li>
      <li>一级类目</li>
      <li>评估标准满分</li>
      <li>项目得分</li>
      <li>子模块得分（%）</li>
      <li>权重</li>
      <li>*权重得分</li>
    </ul>
    <table cellpadding="0" cellspacing="0">
      <!-- 项目基本信息 -->
      <tbody>
        <tr rowspan="6" class="table-row">
          <th rowspan="5" class="table-name">项目基本信息</th>
          <td rowspan="1" class="table-first">项目基本概况</td>
          <td rowspan="1" class="table-all">-9-</td>
          <td rowspan="1" class="table-score">-9-</td>
          <td rowspan="6" class="table-get">83</td>
          <td rowspan="6" class="table-weight">0.8</td>
          <td rowspan="6" class="table-weiscore">26.4</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">团队基本概况</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">资本市场认可度</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">项目宣传推广力度</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">项目热度</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-lastrow">
          <td class="table-null"></td>
          <td class="table-first">小计</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
      </tbody>
      <!-- 项目团队评估 -->
      <tbody>
        <tr rowspan="6" class="table-row">
          <th rowspan="3" class="table-name">项目团队评估</th>
          <td rowspan="1" class="table-first">创始人背景信息</td>
          <td rowspan="1" class="table-all">-9-</td>
          <td rowspan="1" class="table-score">-9-</td>
          <td rowspan="4" class="table-get">83</td>
          <td rowspan="4" class="table-weight">0.8</td>
          <td rowspan="4" class="table-weiscore">26.4</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心管理团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心开发团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-lastrow">
          <td class="table-null"></td>
          <td class="table-first">小计</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
      </tbody>
      <!-- 项目方案评估 -->
      <tbody>
        <tr rowspan="6" class="table-row">
          <th rowspan="3" class="table-name">项目方案评估</th>
          <td rowspan="1" class="table-first">创始人背景信息</td>
          <td rowspan="1" class="table-all">-9-</td>
          <td rowspan="1" class="table-score">-9-</td>
          <td rowspan="4" class="table-get">83</td>
          <td rowspan="4" class="table-weight">0.8</td>
          <td rowspan="4" class="table-weiscore">26.4</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心管理团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心开发团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-lastrow">
          <td class="table-null"></td>
          <td class="table-first">小计</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
      </tbody>
      <!-- 合计 -->
      <tbody>
        <tr class="addtotal">
          <td colspan="2">合计</td>
          <td>240</td>
          <td colspan="3">240</td>
          <td>240</td>
        </tr>
        <tr class="totalscore">
          <td colspan="6">项目得分</td>
          <td>240</td>
        </tr>
      </tbody>
    </table>
  </div>

css样式代码：

.chartbox {
    width: 95%;
    margin: 0 auto;
    min-height: 300px;
  }

  .chartmenu {
    width: 100%;
    height: 50px;
    background-color: #f6fafd;
    letter-spacing: -0.5em;
    font-size: 0;
  }

  .chartmenu li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 50px;
    color: #333;
    text-align: center;
  }

  .chartmenu li:nth-of-type(1) {
    width: 135px;
  }

  .chartmenu li:nth-of-type(2) {
    width: 185px;
  }

  .chartmenu li:nth-of-type(3) {
    width: 130px;
  }

  .chartmenu li:nth-of-type(4) {
    width: 110px;
  }

  .chartmenu li:nth-of-type(5) {
    width: 150px;
  }

  .chartmenu li:nth-of-type(6) {
    width: 100px;
  }

  .chartmenu li:nth-of-type(7) {
    width: 140px;
  }

  .table-row .table-name {
    width: 134px;
    vertical-align: middle;
    font-size: 14px;
    color: #333;
    border-left: 1px solid #c8e5fa;
  }

  .table-row .table-first {
    width: 183px;
    text-align: center;
    vertical-align: top;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #c8e5fa;
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-all {
    width: 130px;
    text-align: center;
    vertical-align: top;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #c8e5fa;
  }

  .table-row .table-score {
    width: 108px;
    text-align: center;
    vertical-align: top;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #c8e5fa;
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-get {
    width: 149px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-weight {
    width: 99px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-weiscore {
    width: 139px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-lastrow {
    height: 30px;
    line-height: 30px;
    background-color: #f6fafd;
    text-align: center;
  }

  .table-lastrow td:last-child {
    border-right: 1px solid #c8e5fa;
  }

  .table-lastrow td:first-child {
    border-left: 1px solid #c8e5fa;
  }

  .addtotal {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .addtotal td:nth-of-type(1) {
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .addtotal td:nth-of-type(3) {
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .addtotal td:last-child {
    border-right: 1px solid #c8e5fa;
  }

  .totalscore {
    height: 50px;
    background-color: #f6fafd;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
  }

  .totalscore td {
    border-bottom: 1px solid #c8e5fa;
  }

  .totalscore td:nth-of-type(1) {
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .totalscore td:nth-of-type(2) {
    border-right: 1px solid #c8e5fa;
  }
通过以上，就能达到本文开篇效果图的布局了。


_cris
关注
专栏目录
html中table表格的行、列怎么进行合并
naozibuok的博客
05-24 3240
在HTML中，使用 <table> 元素来创建表格，而行（tr）和列（td或th）的合并可以通过和属性来实现。这两个属性允许单个表格单元格（td或th）跨越多个列或行。colspan：用于合并列。它定义了一个表格单元格应该横跨多少列。rowspan：用于合并行。它定义了一个表格单元格应该横跨多少行。
html中实现table跨行跨列
qq_35511307的博客
07-12 2720
原创作品，请勿转载，谢谢合作啦~          今天在公司做个打印需求时，被table难住了，网上给的跨行跨列没有能解决我的问题的，于是乎想给基础较差的同行说道说道。          普通的跨行跨列在这里我就不说了，网上一大片！！！ 这里要给大家举个相对来讲复杂的例子。如下图所示：          我们由图不难看出，出现的跨列比较复杂。在这里我把本表分成了14列（table中，设置不
【HTML+CSS】HTML表格：从基础到进阶的全面指南
最新发布
Xiaoxin的博客
07-26 1391
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
HTML table跨行跨列
growdu的网络博客
06-28 1294
HTML table跨行跨列 table读取 读取时，表格行数与列数都已经确定，且每行单元格个数相同,每列单元格个数也相同。 跨行跨列时，相应的单元格就要多占行单元格的位置和列单元格的位置。 跨行 跨多少行，相应的该单元格就要多占据行数-1个单元格，每跨一行，该单元格下一行就减少一个单元格。跨行时下一行单元格数减少。 <table border="1"> <tr> &l...
HTML--table--跨行跨列
weixin_46858088的博客
12-14 2105
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跨行跨列</title> <style type="text/css"> table{ border: 1px solid; width: 500px; } table td,th{ border: 0.0625rem solid; ...
HTML表格（格式、跨行、跨列）
jabajhdjvd的博客
10-25 891
内容</td><td colspan="所跨列数">内容</td><th> 内容</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容
【转】html 代码中 table 跨行跨列的操作
魂-淡
01-06 3587
例1 跨2列: <table border="1"> <tr> <td colspan="2" align="center">111</td> </tr> <tr> <td>222</td> <td>333<...
css多行多列的新闻模式
10-30
在这篇文档中，提到了实现多行多列新闻模式的关键点：a的浮动和li的清除浮动。在CSS中，浮动（float）属性是用来实现文字环绕的效果。然而，当元素应用了浮动之后，它会脱离正常的文档流，因此可能导致父元素高度...
JS组件Bootstrap Table表格多行拖拽效果实现代码
11-26
以上就是实现Bootstrap Table多行拖拽效果的基本步骤。在实际应用中，可能还需要处理更多细节，如防止误操作、优化用户体验等。记住，持续优化和改进是软件开发过程中的常态，所以即使现在的解决方案不尽如人意，也...
HTML中table表格标签的基础学习教程
09-28
1. 表格的基本结构和标签组成：HTML中的表格以<table>标签开始，它用于定义表格的边界和结构。每个表格行由标签定义，而每个行内的单元格则由标签定义。一个完整的表格结构至少包含一个<table>，一个或多行，以及每...
bootstraptable冻结列例子.doc
01-14
Bootstrap Table 是一个流行的开源前端组件库，用于创建交互式的、响应式的数据展示表格。在一些情况下，特别是数据列较多...在实际应用中，可能还需要结合其他参数和方法，如排序、搜索、分页等，以提供更全面的功能。
js Table 选中行排序 多列锁定（多个OrderBy）
06-03
比较乱~没来得及优化 有需要的可以参考 IE6 Opera 测试通过
SwiftUI WWDC21 新布局组件之 01 多行多列表格组件Table （教程含源码）
iCloudEnd的博客
06-10 541
SwiftUI WWDC21 新布局组件之 01 多行多列表格组件 （教程含源码） Table 一种容器，用于呈现按一列或多列排列的数据行，可选择提供选择一个或多个成员的能力。 struct Table<Value, Rows, Columns> where Value == Rows.TableRowValue, Rows : TableRowContent, Columns : TableColumnContent, Rows.TableRowValue == Columns.TableRo
【HTML】表格的跨行跨列
林伊的博客
12-08 4563
表格的跨行跨列 第一行第一列的单元格要跨两列，利用colspan属性来实现跨列 <tablealign="center"border="1"width="200"height="200"cellspacing="0"> <tr> <thcolspan="2">1.1</th> <td>1.3</td> </tr> <tr> <td>2.1</td>...
表格标签（table）的用法以及跨行跨列
weixin_72431184的博客
05-16 794
表格标签（table）的用法以及跨行跨列
html表格 多行、多列
weixin_33895657的博客
07-01 6208
colspan="2"//表示跨两列 rowspan="2"//表示跨两行例如：<tableborder=1> <tr><tdcolspan=3>标题</td> <tr><td>第一列</td><td>第二列</td><td...
html中table如何占位,HTML中table标签如何跨行跨列详解
weixin_42097819的博客
05-30 1596
原标题：HTML中table标签如何跨行跨列详解标签table：以前非常流行于网页的布局，现在主要用于后台页面的制作，还有做一些记录数据的表格，所以在很多数据表格中有些栏目要求合并显示，这时就要用到table的跨行跨列方法才能达到那种需求。首先，我们来看一下表格的结构，效果如下图所示 知道表格的一些结构后，我相信大家对表格的代码编写一定很熟悉，下面就先从简单的跨行跨列讲解：跨2列的例子： 效果如下...
HTML表格
qq_62881798的博客
01-03 926
1.基本属性 <!-- border 设置边框线的粗细 --> <!-- tb 表标题 --> <!-- colspan 后面的数字是多少就包括多少列--> <!-- rowspan 后面的数字是多少就包括多少行--> <!-- caption 表头--> 2.不会跨行的表格（基本表格） <table border="2"> 1.不会跨行的...
HTML ＜table＞＜/table＞跨行跨列
qq_27232945的博客
11-01 239
<table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr>.
div css较table布局的优点
06-28
### 回答1： table布局的优点包括： 1. 可以实现较复杂的布局，比如实现多行合并、多列合并等特殊效果； 2. 标签简单，易于理解和维护； 3. 可以用于实现页面的网格化布局； 4. 在某些情况下，表格优于div布局具有更好的语义化。 ### 回答2： Div（即HTML的 <div> 元素）和CSS样式表是前端网页开发中必不可少的组成部分。相比之下，table布局已经逐渐被视为过时的设计方法。下面是div css布局的优点： 1. 更灵活的布局：使用 div css 可以轻松地创建复杂的网页布局。相比之下，table布局有许多限制，例如表格只能在行和列中移动，无法灵活地组合内部元素。 2. 更好的可访问性：使用 div css 布局可以更好地满足辅助技术的需要，例如屏幕阅读器和语音控制。相比之下，table布局的可访问性较差，因为表格不易于阅读和使用辅助技术。 3. 更好的性能：相比之下，div css 布局通常比table布局更快。这是因为 table布局需要在每个单元格中使用额外的HTML标记，但 div css 可以使用更小和更简单的HTML元素来达到布局目的，从而减少了页面的负载时间。 4. 更好的SEO：使用div css布局可以在页面上更好地定义内容的结构，从而使搜索引擎更容易理解页面的内容。相比之下，table布局可能会混淆搜索引擎，使搜索引擎难以准确地理解页面内容。 5. 更好的开发体验：使用div css布局可以使前端开发人员更方便地维护CSS样式表，因为CSS样式表可以更好地与HTML代码分离，更容易实现可重用的CSS样式表。而使用table布局会使代码更容易出现冗余，逻辑更难理解。 综上所述，使用div css布局可以提供更好的灵活性、可访问性、性能、SEO和开发体验。与table布局相比，它已经成为现代前端网页布局设计的标准方法。 ### 回答3： 随着网页设计的不断发展，CSS布局已经成为了一种必不可少的网页布局技术，而div CSS布局和table布局在网页布局中有着很大的不同。下面是div CSS布局与table布局的比较： 1. 结构分离 div CSS布局能够将html结构进行分离，使得结构和表现完全分离，使得代码更易于维护，代码结构更加清晰，而table布局在实现上相对比较混乱，结构和表现没有完全分离，代码相对较为复杂。 2. 灵活性 div CSS布局能够根据不同的浏览器和不同的分辨率进行适应性布局，很方便制作响应式布局，而table布局因为其强制性布局，所以很难实现响应式布局。 3. 维护性 div CSS布局可以通过外部样式来改变所有页面的布局，而table布局则需要每个页面的布局都进行更改，这使得维护代码更加方便。 4. 语义化 div CSS布局可以使得网页设计更加具有语义化，使得网页更易于搜索引擎的搜寻，而table布局因为强制性布局，其代码结构和语义化相对比较弱。 综上所述，div CSS布局优于table布局的优点在于：更好的灵活性、结构分离，更易于维护，更加具有语义化，而table布局的优点在于兼容性较好，但其在实际应用中已经被明显地取代。因此，在网页布局过程中应该优先选择div CSS布局。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值