首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何对HTML嵌套表进行语义编码,使其与父表的表头对齐(并关联

如何对HTML嵌套表进行语义编码,使其与父表的表头对齐(并关联
EN

Stack Overflow用户
提问于 2012-10-09 09:08:25
回答 2查看 30.1K关注 0票数 26

编辑:选择的答案包含一个链接,指向我可以在不使用嵌套表的情况下编写的工作小提琴。

我想用HTML对一个表格进行语义编码,布局如下图所示。不幸的是,我在网络上找不到任何类似的东西。

我已经能够通过手动设置单元格宽度来强制执行外观,但我希望确保我生成的代码有意义,但我认为情况并非如此,因为如果不手动设置宽度,标准渲染看起来更像下面的图片。

到目前为止,我想出的有问题的代码如下所示:

代码语言:javascript
复制
<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-09 09:17:13

没有图像就很难说,但我认为比嵌套表更好的解决方案是简单地使用colspanrowspan属性。

编辑:看到图片,我会说你可以使用rowspan (和你已经使用过的colspan )来实现这一点。

此外,如果scope属性为"col“,则不需要设置该属性。默认为"col“。

编辑:正如Marat Tanalin指出的那样,scope属性的默认值实际上是auto,它“使标题单元格应用于基于上下文选择的一组单元格”。在我的经验中,它的作用与将其设置为"col“(对于屏幕阅读器)完全相同。

编辑:这里有两篇关于标记高级表格的很棒的文章:http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/ & http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

编辑:展示所需行为的Here is the fiddle (至少在视觉上),该小提琴的源代码如下:

代码语言:javascript
复制
<table border="1">
  <thead>
    <tr>
      <th>Status</th>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3">Open</td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
票数 20
EN

Stack Overflow用户

发布于 2012-10-09 17:34:14

是的,正如上面所有人所暗示的那样,这一切都是关于行跨度的。

下面是你的代码的重写:

代码语言:javascript
复制
<table>
  <thead>
    <tr>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
      <th>Last Heading</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12791541

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档