If this is the structure:
<table cellspacing="0" cellpadding="0">
<tr>
<td>I don't need anything here, should I always put a 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>
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 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 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
Related
Here is some very simple HTML. On Chrome (v57) and Firefox (v55) the two cells to the right are the same height, and on Safari (v11) they are not. On Safari the top cell is only as big as needed for the content, and the bottom cell gets the rest of the space.
My question is - is one of these behaviours correct and one a bug? Is there something simple I can do to get Safari to produce the same results as Chrome (like is there a browser styling difference at play here)? I've inspected it and there are no user agent stylesheet differences that I can see.
img {
max-width: 100%;
display: block;
}
.image-cell {
width: 150px;
}
<table border=1 cellspacing=0 cellpadding=0 bgcolor="#3faaed">
<tr>
<td rowspan="2" class="image-cell">
<img src="http://www.rizwanashraf.com/wp-content/uploads/2009/04/gorgeous-chrysanthemum-3d-wallpaper.jpg" />
</td>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
I know there are a limitless number of ways that I can produce a image with two equal sized boxes next to it - that isn't the question. The question is, why the difference, and, can simple styling be added to homogenize them? (This is a learning question, as I say, there are a million ways to display two boxes beside a box. That's not what I'm asking.)
The spec leaves this explicitly undefined:
CSS 2.2 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
This means in particular that CSS does not define how the height of a cell spanning more than one row is distributed across the rows that it spans.
There is no good way to homogenize the table's appearance except by providing absolute heights to the table and/or the table rows. Given an arbitrary image whose height is not known in advance, this is pretty much impossible with CSS table layout.
Table cells are rendered arbitrarily depending on their content, so you can never be sure how they are going to be rendered. Specifying dimensions is the way to get specific results.
I've been using bootstrap for a while now but I can't do this thing (I don't even know how to do it without Bootstrap).
What I want to is is indent either a table or divs. I've seen something like this done in Bootstrap with <li> but nothing with tables. Basically I want a table with the <th> which is the title and below the names of the projects. The reason I need to indent is because the projects depend on other projects; so the project below anoher project has to be possitioned slightly to the right of its parent (which is basically indenting, right?)
Here are a couple options if what you need is a small indentation to suggest a hierarchy. They're not specific to Bootstrap tables.
The first is to add a couple nonbreaking spaces per level of indent that you want. This has the advantage that the spaces can be added by whatever code is producing the table content without disturbing the html of the table. It has the disadvantage that if the text wraps within the cell the wrapped lines will not be indented. Also, all those invisible nonbreaking spaces can lead to copy/paste surprises.
<td> Indented Text</td>
<td> Indented More</td>
If your code is emitting the html of the table, a better solution is to change the padding of the table cell by increasing amounts. It has the advantage of finer control than increments of nonbreaking space, and wrapped text is also indented. The disadvantage here is you're emitting html from code and that may make it more difficult to adjust the layout.
<td style="padding-left:20px">Indented Text</td>
<td style="padding-left:40px">Indented More</td>
Could this be solved using offsets? It's somewhat difficult to help when we dont know the situation or how the markup is looking.
The offset* class will add a margin-left to your element. Maybe that will help you?
I have a table.
For example:
<table>
<tr>
<td>apple</td>
<td>big</td>
</tr>
<tr>
<td>pickle</td>
<td>small</td>
</tr>
</table>
after some fancy jQuery...
<table>
<tr>
<td>apple</td>
<td>big</td>
<td>10kg ------ Is this nice to do, any potential issues?</td>
</tr>
<tr>
<td>pickle</td>
<td>small</td>
</tr>
</table>
Just for fun: http://jsfiddle.net/Czcby/
You will end up with three cells on the first row and two on the second row.
This will not normally display, but if your styling has margins/border/padding on table cells, it can effect the display and layout of the table.
The short answer, for me, is yes you do.
The more detailed answer is: you don't strictly need to be consistent but it certainly helps if you want your table to look consistent across browsers. Not to mention the fact that being inconsistent now, even though it doesn't seem to cause problems currently, will have a bigger effect when you want to do more to your table, its styling, or the data inside it.
If you check out this JSFiddle in different browsers, you may see different behaviour:
Chrome and IE8: Render the table as having extra cells that jut out
from the two ordinary cells.
Firefox: effectively looks as though it has extra empty cells in a
third column.
Imagine the complications when it comes to styling for these different situations as your table grows.
Arguably, the colspan property is a way around this. I think colspan is pretty ugly; tables should be presented so that you can look at a column header and scroll down it to see the information relevant to that header. Having some other data reaching across into the column is a distraction. But that depends exactly on what you're trying to do.
Presentation and information design issues aside, there may be no way for someone looking at your code to know how many cells end up in each row. Better to have a consistent number in each row so you can check it quickly and easily should you need to anything else with the table or the data inside it. Useful for debugging.
Hope this helps.
There's no problem to do that, however, you may face some formatting issues as there will now be 3 td's on row one and 2 on row two.
use colspan="2" when a td use 2 columns.
I want to space the headers above the form unevenly on one line and not really sure what the best way to do this using HTML and CSS. I have used span tags and padding in the past but this works differently in different browsers and does not line up correctly. Im sure there is a better way then wrapping all of the headers in span tags. Thanks so much for your help. I have attached an image of what I would like to achieve.
If you use a table, the cells will auto size to the content in them. Tables are still useful when dealing purely with tabular data. Alternatively, you can assign a class to each header cell to set specific widths.
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td>one</td>
<td>this one needs more space and will grow</td>
<td>this guy isn't as long</td>
<td>short</td>
</tr>
Example on JSFiddle: http://jsfiddle.net/JdSy2/
I have something like this:
<table>
<tr>
<td><nobr>hello</nobr></td>
<td>this column can contain a lot of text, for some rows</td>
<td><nobr>world</nobr></td>
<td><nobr>hello world</nobr></td>
</tr>
... more rows to come
</table>
Basically 3 of the columns have very short text, and I want them to be <nobr>. The other one can have very long text, and I want it to take all the remaining space. But what happens is that the table gets bigger than the whole browser window to accommodate the big column. If the text is really big it will eventually break, but it still gets quite a bit outside the window.
I tried setting width, max-width, but no luck. What am I doing wrong?
Your example definitely behaves well as Zyphrax says.
The problem you report can only happen if, in the long column, there is a word which is very large or the content has no whitespace in it. Is that the case? May be you are using instead of spaces, and it is preventing the normal wrap that browsers do automatically.
If the text in the column is not wrapping at all, mostly you are using or you forgot to close a <nobr> somewhere.
Not sure if that helps.
I just threw this into my browser (tried both IE8 and Firefox). It stayed well within the Browser window:
<html>
<body>
<table>
<tr>
<td><nobr>hello</nobr></td>
<td>this column can contain a lot of text, for some rows.</td>
<td><nobr>world</nobr></td>
<td><nobr>hello world</nobr></td>
</tr>
</table>
</body>
</html>
Otherwise you might want to try tricks like width: 100% or margin: 0 auto; on the table.
You shouldn't be using the nobr tag, it is not a valid HTML tag. Use "white-space: nowrap" CSS instead.
eg.
<td style="white-space:nowrap">your long text</td>