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.
Related
I'm a newb to CSS. I have a page that where an html table is generated at runtime by a bunch of tags. However,data is generated only in one of those cells and the adjacent cells end up being empty.
<tr>
<td> Really long data that is forced to wrap around.</td>
<td> empty cell</td>
<td empty cell </td>
</tr>
Is there a clean(cross browser compatible) way to get the first cell to span multiple columns via CSS without force a wrap around. Ideally, one would set the colspan on the first cell to get it to stretch multiple cells but since the html is generated on the server, this isnt much of an option.
This is the closest set of solution Ive found to my question and it doesnt seem to solve the problem.
Looks like you are trying to use tables for presentation, rather than tabular content. You should give a look into display: flexbox which may help you achieve the effect you want.
Here is a great tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a table that is being generated by means of a loop.
Each loop creates 2 rows of the table.
What I want to achieve is when this page is printed the the 2 rows created in each loop iteration stay together and do not get split over a page boundary.
I have tried applying the CSS rule {page-break-inside: avoid;} on both the tr and td elements with not much luck (I hear this is an known issue with non-block elements).
Apart from rebuilding the view using divs, is there a solution that I can apply to the table?
You need to combine these two styles together (although auto is the default value)
if those two rows are supposed to attach together, you might consider using a single table for each of those two rows instead of having a single table for all rows.
{page-break-inside: avoid;page-break-before:auto}
Also check comments for this answer
The discovery of the styles page-break-inside: avoid; page-break-before: auto was very useful to me when looking for a way to do exactly this. However, I found a way of making it work without having to use separate tables. Wrap each set of rows that you want to keep together in a <tbody> element, and give that element the two styles that control page breaks. As far as I can tell, that has exactly the desired effect: if the printed document is split across multiple pages, the rows within each <tbody> element will always appear on the same page.
Unfortunately CSS page break properties are not always reliable across all browsers and platforms.
For a more sure-fire approach, as AaA mentions, I find it better to wrap the rows that you don't want split into a table of their own.
Like so:
<table>
<thead>
//headers
</thead>
<tbody>
<tr> //Create your for loop on this element
<td>
<table>
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each table can be more reliably kept together as needed, and the table can have as many rows and columns needed.
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
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
I have seen many HTML table related questions in SO. Many questions about browser specific bugs like CSS and JavaScript by involving HTML table is usually asked. An earlier version of DataTable YUI markup looks like as follows:
// dynamically generated
<table>
<tr>
<td>Some content</td>
<td>Other content</td>
</tr>
</table>
Current version now looks like
// dynamically generated
<table>
<tr>
<td><div>Some content</div></td>
<td><div>Other content</div></td>
</tr>
</table>
Notice a div inserted inside a column.
<div> advantages includes
stable behavior and event support across browser
JavaScript framework support
display block by default
easy to create and insert inside a HTML page
You can think a HTML table element as follows
<div class="collection">
<div class="row">
<div>Some content</div>
<div>Other content</div>
</div>
</div>
I need it because I have designed a custom "like a table" component by using div. My custom "like a table" component purpose is to show tabular data. Stable behavior and event support (single and double-click in a row and a column) across many browsers is one feature that i have considered. Notice, for instance, ExtJS uses a custom "like a select" component by using div, and you know many bugs related to HTML select.
So what you think about design a HTML table by using div?
I think it really depends on why you need the divs instead of a table.
If you just want to show tabular data, such as an excel spreadsheet, then you can make it interactive and still use a table.
But, if you are doing something where the appearance may change, or the table may be around another object, then be creative and do your html table.
It sounds like you are not boxed in by how things have been done, but are willing to go outside that box and write a solution that solves your problem best.
But, once you go this route you will want to do extensive testing on whatever browsers you support to ensure that the table appears as you expect, as tables are table, we know what to expect, css and javascript just need more testing.
Divs are always considered if semantics is taken into account.
Tables are easy to design and can be managed quickly without much CSS.
If all you're doing is re-creating it, I think it's quite ridiculous. Though there are legitimate uses for it. Tables have uses, divs have uses, boring arguments about it are just a waste of time.
-- Edit:
See also Why not use tables for layout in HTML?