开发者

Is it good to put a &nbsp; inside an empty <td>?

开发者 https://www.devze.com 2022-12-23 19:10 出处:网络
If this is the structure: <table cellspacing=\"0\" cellpadding=\"0\"> <tr> <td>I don\'t need anything here, should I always put a &nbsp; here?</td>

If this is the structure:

<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>
开发者_StackOverflow</table>

How will a screen reader read a blank td? Is it semantically correct?


Semantically correct IMHO would be to keep an empty cell really empty. However, I, too, fill empty cells with &nbsp;s for pragmatic reasons.

As for screen readers, I'll have to make an educated guess: Empty nodes will likely not be read, because HTML consists mostly of whitespace text nodes, which readers ignore, and I assume, that &nbsp; is collapsed to a simple space in reader applications (since non-breaking is a property of visual media).

For rendering visually, one could rely on the CSS table property empty-cells:

table {
    empty-cells: show;
}


Semantically, an HTML table is really just an array (matrix) of data, and there’s no reason why a no-break space character could not be treated as data. Whether it really makes sense depends on the purpose, structure, and content of the table. In most cases, there is a better solution. See some suggestion in Empty cells in HTML tables.

On the technical side, the no-break space has width and height, depending on the font, and this imposes minimum requirements on the dimensions of the cell. This may matter, though mostly in cases where the row or the column is used just as a separator, e.g. to create horizontal or vertical line.

Another impact of using a no-break space, as opposite to using a normal space or leaving the cell completely empty, is that it may affect the appearance of borders around the cell and background color and background image inside the cell.

Screen readers differ in the way they indicate empty cells, if at all, and this may also depend on the reading mode. In any case, the user gets no indication of what’s really going on, i.e. what an empty cell (if the emptiness is conveyed to the user at all) means. In visual browsing, the meaning may (or may not) be rather obvious.


Thanks to editors like Dreamweaver this practice became somewhat of a standard, so even if it is not a perfect solution - at least you won't be alone in doing it. Plus it is more compatible with older browser than CSS's empty-cells.


there isn't anything exactly saying you shouldn't use use a blank TD, and it passes when you try to validate.

Although, a more elegant approach would be to use colspan.

i.e.

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

But this will align your content to the left, and you will have to manually (via css) apply styles so the content is aligned where you want.

The good thing about using it with colspans, is that screen readers will read only what's there, and not the empty spaces

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号