在空的<td>标签里放一个&nbsp;好吗?

34
如果这是结构:
<table cellspacing="0" cellpadding="0">
   <tr>
      <td>I don't need anything here, should I always put a &nbsp; here?</td>
      <td>item </td>
   </tr>
   <tr>
      <td>model</td>
      <td>one</td>
   </tr>
   <tr>
      <td>model</td>
      <td>two</td>
   </tr>
   <tr>
      <td>model</td>
      <td>three</td>
   </tr>
</table>

一个屏幕阅读器会如何读取一个空的 td 标签?这样做在语义上是否正确?
4个回答

18

在我看来,从语义上讲,保持空单元格真正为空是正确的。然而,基于实用原因,我也会用 &nbsp; 来填充空单元格。

至于屏幕阅读器,我只能进行有根据的猜测:空节点可能不会被读取,因为HTML主要由空白文本节点组成,阅读器会忽略它们;同时我认为,在阅读器应用程序中,&nbsp; 会被折叠为一个简单的空格(因为“non-breaking”是视觉媒体的属性)。

对于视觉呈现,可以依靠CSS表格属性empty-cells

table {
    empty-cells: show;
}

2
我认为这个属性在IE中不被支持。 - Jitendra Vyas
4
没错,这就是为什么我不得不继续使用 &nbsp; 的原因。 - Boldewyn
2
根据MDN的说明,empty-cells属性在IE 8中得到支持。 - The DIMM Reaper
3
啊,年轻的学徒,你看,那时候的2010年,IE 7仍然是一件事情;-) 但是是的,现在'empty-cells'才是更好的选择。 - Boldewyn
2
三年后,显然仍有五亿人使用OE(即IE7),因此电子邮件通常仍需遵守IE7的规定。 - mckenzm

6
从语义上讲,HTML表格实际上只是一个数据数组(矩阵),没有理由不将不间断空格字符视为数据。它是否真的有意义取决于表格的目的、结构和内容。在大多数情况下,有更好的解决方案。请参见HTML表格中的空单元格中的一些建议。
在技术方面,不间断空格具有宽度和高度,这取决于字体,并对单元格的尺寸施加最小要求。这可能很重要,但主要是在行或列仅用作分隔符的情况下,例如创建水平或垂直线。
使用不间断空格与使用普通空格或完全留空单元格相反的另一个影响是,它可能会影响单元格周围的边框和单元格内部的背景颜色和背景图像的外观。
屏幕阅读器在指示空单元格的方式上有所不同,如果有的话,这也可能取决于阅读模式。在任何情况下,用户都无法得知实际发生的情况,即空单元格(如果用户根本未传达空白)的含义。在视觉浏览中,含义可能(也可能不)相当明显。

我修复了链接。 - Jukka K. Korpela

2
由于像Dreamweaver这样的编辑器,这种做法已经成为一种标准,所以即使它不是一个完美的解决方案——至少你在做它时不会孤单。此外,它比CSS的empty-cells更兼容旧版浏览器。

0

并没有确切的说明不能使用空白的TD,而且在验证时尝试使用它也可以通过。

不过,更优雅的方法是使用colspan。

例如:

<tr>
   <td colspan="2">item </td>
</tr>

但这将使您的内容左对齐,您将不得不手动(通过CSS)应用样式,以便内容对齐到您想要的位置。

使用colspans的好处是,屏幕阅读器只会读取实际存在的内容,而不是空白处。


6
"colspan"并不一定更加优雅或语义化。 "colspan" 实际上表明,单元格的值是通常应该属于两个不同单元格的有效值组合。在上述情况下:如果第一行是标题,则使用 "colspan" 将会得到完全错误的结果(即单元格内容被标记为两列的标签)。 - Boldewyn

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接