26

编辑：所选答案包含指向工作小提琴的链接，我可以在不使用嵌套表的情况下进行创作。

我想在 HTML 中使用如下图所示的布局对表格进行语义编码。不幸的是，我无法在网络上找到类似的东西。

在此处输入图像描述

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

在此处输入图像描述

到目前为止，我提出的有问题的代码如下所示：

<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>
4

2 回答 2

20

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

编辑：看到我想说的图像，您绝对可以使用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/

编辑：这是展示所需行为的小提琴（至少在视觉上），该小提琴的源代码如下：

<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>
于 2012-10-09T01:17:12.537 回答
1

是的，正如上面所有的窥视所暗示的那样，这都是关于行跨度的。

这是您的代码的重写：

<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>
于 2012-10-09T09:34:14.117 回答