4

我不经常使用表格，但是当我得到一些表格数据时，它会放在表格中。但我想知道除了使用空单元格之外，是否有更好或正确的对齐单元格的方法。

例如，我正在使用一个结帐表，该表连续列出每个产品、价格等，并根据需要添加尽可能多的行。最后，有标准的 sub、shipping、total 字段。

现在他们想要最后一部分都在右边，这是我遇到的一个非常标准的设置。不是每个人都这样，但我已经看到了。所以我不反对它，但我能看到的唯一方法是添加很多空单元格以使对齐正确。

<tr>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td>Sub-Total</td>
</tr>
<tr>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td><!--This cell should be empty--></td>
    <td>Total</td>
</tr>

由于我通常尝试非常密切地遵循语义，这感觉不对。就像我错过了什么。但是在其他领域，一些单元格没有被填充，因为没有特定的数据可以放在那里，即如果一个产品有选项，而其他产品没有。所以不能错，因为这些字段必须为空。所以我被抓住了，我真的不知道这是对的，错的，意见，还是什么。

4

4 回答 4

6

您可以使用该colspan属性。您可能希望将该列中的文本与 CSS 右对齐：

<tr>
    <td colspan="6">Sub-Total</td>
</tr>
<tr>
    <td colspan="6">Total</td>
</tr>
于 2012-07-23T15:32:38.460 回答
4

将空单元colspan格与单独的值组合并保持单元格。列标题 ( <th scope="col">) 指向错误的单元格，否则，因为所有组合单元格都分配给使用的第一列colspan。

于 2012-07-23T17:37:48.353 回答
3

代替 5 个空单元格，您可以使用<td colspan="5"></td>. 然后，您可以将包含小计或总计的单元格包含为正常单元格。这使您可以单独处理该单元格的对齐方式，而不是将其视为跨越多列。

空单元格可能会在渲染中引起一些问题（出于这个原因，您可能希望&nbsp;用作内容和/或 CSS 规则empty-cells: show），但逻辑在这里几乎不是问题。

但是，对于在最后一列中包含一些总和的最后一行（尚不清楚这是否是您想要的），最好在此处进行一些解释，例如

<tr>
   <td colspan="5">Total</td>
   <td>$42,000,000</td>
</tr>
于 2012-07-23T17:40:32.610 回答
1

可能最好的方法是设置 colspan="#" 这些行跨越的列数，然后设置 align="right"

于 2012-07-23T15:33:18.583 回答