【问题标题】:Is it good to put a &nbsp; inside an empty <td>?在空的 <td> 中放一个 ' 好不好?
【发布时间】:2010-03-24 08:56:54
【问题描述】:

如果是这样的结构:

<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?它在语义上是否正确?

【问题讨论】:

    标签: html w3c semantic-markup


    【解决方案1】:

    在语义上正确的恕我直言,将保持一个空单元真的为空。但是,出于务实的原因,我也用&amp;nbsp;s 填充空白单元格。

    至于屏幕阅读器,我必须做出有根据的猜测:空节点可能不会被读取,因为 HTML 主要由空白文本节点组成,读者会忽略这些节点,我假设 &amp;nbsp; 被折叠为阅读器应用程序中的一个简单空间(因为不间断是视觉媒体的属性)。

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

    table {
        empty-cells: show;
    }
    

    【讨论】:

    • 我觉得IE不支持这个属性
    • 这是真的,也是我仍然使用&amp;nbsp;s 的原因,很遗憾。
    • 根据MDNempty-cells 属性在 IE 8 中有支持。
    • 啊,你看,年轻的学徒,在 2010 年的那些日子里,IE 7 仍然是一个东西 ;-) 但是是的,现在empty-cells 无论如何都是要走的路。
    • 三年后显然还有十亿人还在使用 OE,也就是 IE7,所以电子邮件一般还是要遵守 IE7。
    【解决方案2】:

    从语义上讲,HTML 表格实际上只是一个数据数组(矩阵),没有理由不能将不间断空格字符视为数据。它是否真的有意义取决于表格的目的、结构和内容。在大多数情况下,有更好的解决方案。请参阅Empty cells in HTML tables 中的一些建议。

    在技术方面,不间断空间具有宽度和高度,具体取决于字体,这对单元格的尺寸提出了最低要求。这可能很重要,但主要是在行或列仅用作分隔符的情况下,例如创建水平线或垂直线。

    与使用普通空格或让单元格完全为空相反,使用不间断空格的另一个影响是,它可能会影响单元格周围的边框外观以及单元格内的背景颜色和背景图像。

    屏幕阅读器在指示空单元格的方式上有所不同(如果有的话),这也可能取决于阅读模式。在任何情况下,用户都没有得到真正发生了什么的指示,即空单元格(如果空虚完全传达给用户)意味着什么。在视觉浏览中,含义可能(或可能不)相当明显。

    【讨论】:

    • 我修复了链接。
    【解决方案3】:

    感谢 Dreamweaver 这样的编辑器,这种做法在某种程度上成为了一种标准,因此即使它不是一个完美的解决方案 - 至少您不会孤军奋战。此外,它比 CSS 的 empty-cells 更兼容旧版浏览器。

    【讨论】:

      【解决方案4】:

      没有什么确切说您不应该使用空白 TD,当您尝试验证时它通过了。

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

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

      但这会将您的内容向左对齐,并且您必须手动(通过 css)应用样式,以便将内容对齐到您想要的位置。

      将它与 colspans 一起使用的好处是,屏幕阅读器只会读取那里的内容,而不是空白处

      【讨论】:

      • colspan 没有必要更加优雅或语义化。 colspan 有效地表示,表格单元格的值是通常属于两个不同单元格的值的有效组合。在上述情况下:如果第一行是标题,那么colspan 会给出完全错误的结果(即,单元格内容被标记为 both 列的标签)。
      猜你喜欢
      • 2010-12-28
      • 1970-01-01
      • 1970-01-01
      • 2019-02-15
      • 1970-01-01
      • 2013-01-06
      • 1970-01-01
      • 2011-01-26
      • 1970-01-01
      相关资源
      最近更新 更多