如何对HTML嵌套表进行语义编码，使其与父表的表头对齐(并关联
编辑:选择的答案包含一个链接，指向我可以在不使用嵌套表的情况下编写的工作小提琴。
我想用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>回答 2
Stack Overflow用户
发布于 2012-10-09 09:17:13
没有图像就很难说，但我认为比嵌套表更好的解决方案是简单地使用colspan和rowspan属性。
编辑:看到图片，我会说你可以使用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 (至少在视觉上)，该小提琴的源代码如下：
<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>Stack Overflow用户
发布于 2012-10-09 17:34:14
是的，正如上面所有人所暗示的那样，这一切都是关于行跨度的。
下面是你的代码的重写：
<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>https://stackoverflow.com/questions/12791541
复制相似问题
腾讯云开发者
