html table syntax validation - html

This should be an easy one.
I have a table like so:
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
My firefox 3 validator says this is acceptable code. It just seems wrong to me, are there any possible issues leaving the table rows uneven like this? It works in IE7 too.

You should use 'rowspan' or 'colspan' attributes
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>

Table rows are not required to have the same number of cells. The number of columns in the table is determined from the row with most cells.
Your second table row will just have three cells that are blank (which is not the same as empty cells).

If you want to use uneven amounts of rows/columns, you need to should use rowspan and/or colspan attributes to indicate this.
eg:
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3"></td></tr>
</table>
As guffa corrected me below, colspan isn't technically needed, but it never hurts to be explicit about your intent.

Well, there are no syntax errors there, and I really can't see why you should be sceptical about a table like that, as long as you use the colspan attribute of the td-element:
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
Hope that helped.

That code is fine from a structural point of view. It's valid XHTML. Compare this:
<orders>
<order id='2009/1'>
<item id='1'/><item id='2'><item id='3'/>
</order>
<order id='2009/2'>
<item id='33'/>
</order>
</orders>
It might look strange though, hence the suggestion to use colspan. That way you can get the single TD to fill up the row, instead of being the width of the TD above it.

Related

Rowspan upwards

I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.

Html table with multiple rows

I want to expand a column and display a set of rows inside it.
What I am trying to achieve :
What I have achieved so far
My code:
<table style="background-color:lightgreen" border="1">
<tr >
<td>Id</td>
<td>Name</td>
<td>Col1</td>
<td>Col2</td>
<td>Group Related Column (value for each expanded cell)</td>
<td>Col4</td>
</tr>
<tr >
<td rowspan="5" >#1</td>
<td rowspan="5">AFSBEESS1</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td>x</td>
<td>x</td>
</tr>
​
My fiddle input : http://jsfiddle.net/yDUZg/78/
What is the best table format to do the same?
Is there some plugins to achieve the same effect of easily grouping the column?
Or a better approach to the problem?
Doing in ASP.NET, but as this is a basic thing , I am tagging it as HTML
Have you looked at something like - http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ?
This plugin allows you to collapse/expand table rows as required.
You html above is wrong, as you nesting tr within td elements. When you add rowspan="x" to a column, you should omit it for the next x rows. eg,
<table>
<tr>
<td rowspan="2">Funky</td>
<td>Joy</td>
</tr>
<tr>
<td>Fun</td>
</tr>
</table>
You are getting confused over the concept of rowspan - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
For now, I have created a JSFiddle that does what you have requested. The example is highly specialised, and may not work in a generalised way. In the fiddle, I have removed the rowspan and colspan properties. Feel free to add them in when you are comfortable with what they do.
If you're set on using tables then why not just nest them? Where you want the rows to appear within a cell, just add another table.
You can probably do this with JavaScript. I think it would look something like this:
<script type="text/javascript">
...
// You could use these in an event (inside some callback function)
$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'
// OR you could use these...
$('tr.expand').show();
$('tr.expand').hide();
...
</script>
<!-- And then of course the group of <tr>'s you want to expand
on an event would all have the same class -->
<table>
...
<tr class="expand">
<td>...</td>
</tr>
<tr class="expand">
<td>...</td>
</tr>
...
</table>

Why would someone use invalid html?

I think I found some typos in code I'm supporting and posted it to a local site as a funny example of invalid code, and then someone said that sometimes this invalid usage is correct.
Why would someone might need this code?
<table>
<form>
<tr>
<td></td>
</tr>
</form>
<form>
<tr>
<td></td>
</tr>
</form>
</table>
When can it be better than the following?
<table>
<tr>
<td>
<form></form>
</td>
</tr>
<tr>
<td>
<form></form>
</td>
</tr>
</table>
Or this:
<form>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
<form>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
I played with JSFiddle and can't find HTML decision, so maybe that's a reason.
But I think that JavaScript or CSS way would be better.
And then some person said me that sometimes this invalid usage is correct.
By definition, invalid code isn't correct.
Can you please explain me why someone might need this code?
With a single cell per row? There isn't even a half good reason. There shouldn't be a table there in the first place because it wouldn't be tabular data.
If there were multiple cells per row, then it would be nice to be able to have a form per row (for an "edit this entry" thing). It isn't necessary though, as you can give each input a unique name, and then determine which row to process based on which submit button was clicked (since only the clicked submit button will be successful and therefore have its name/value pair submitted to the server).
This is a way to get the two form elements to align with each other using table-based UI alignment. It used to be quite common before CSS was widely supported in browsers.
Today one would do that in CSS with your preferred markup.

HTML: Width for a td independent of the upper tr?

if i have a table like following, I didn't make it to define a special width for a single element. Is this possible?
For illustration, i've tried it like this:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td>Blub</td>
<td style="width: 100px;">Bli</td>
<td>Hello</td>
</tr>
</table>
Is this possible?
Not really, no. The only thing that exists is the colspan and rowspan attributes that can make a cell span across two columns like so:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td colspan="2">Blub Bli - I will span across the whole large line!</td>
<td>Hello</td>
</tr>
</table>
but the exact thing that you want - being completely flexible in cell widths - can be achieved only by two separate tables.
Since you have not specified width explicitly, your other TDs will also be as large as the largest one:
<td>_____________________________________________________</td>
Same is the case with table tag because you have not set width for it too.

Colspan in IE7/8 not respected

The DOM looks like this:
<table>
<tr>
<td>a</td>...<td>g</td>
</tr>
<tr>
<td colspan="3">
<table>
...
</table>
</td>
</tr>
<tr>
<td></td>...<td></td>
</tr>
</table>
Any idea why this wouldn't work in IE? I tried setting width:auto on the TD holding the inner table, and table-layout:fixed isn't viable because the tabular data is generated dynamically.
What could be going wrong?
Currently, the table only fills the first column, and it will not span.
Update: EXAMPLE
http://stefankendall.com/files/example.html
Use colSpan, not colspan
The only thing that comes to mind is that you may have to fill the columns with something for them to get rendered in IE.
<td> </td>