Colspan in IE7/8 not respected - html

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>

Related

How To add nest Table in html?

Nest Table i.e. Table under Table. I have tried many time using many attributes but I am not getting what I want.
Please tell me here attributes how to do this. Thanks
Try this:
<table border=1>
<tr>
<td>First cell in first table. The cell to the right has the second table in it.</td>
<td>
<table>
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>

HTML/CSS, getting table cells to balance

I have a table formatted as:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
How can I get them to both display from the top of 'tr'? I assume there's a way to stop automatic vertical alignment with CSS?
To clarify for future viewers, I got it working using:
CSS:
td {
vertical-align: top;
}
HTML:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
(Here's the fiddle)
Hey if you have some questions how to use tables pls look some examples here
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/css/css_table.asp
If you prefer to avoid CSS you can do the same thing inline with the depreciated valign tag. Valign is not supported in HTML5 but is the recommended method if you are working within the context of an HTML email.
<table border="1">
<tr>
<td width="110">
Long list of info Line two
</td>
<td valign="top">
Shorter list of info
</td>
</tr>
</table>
Or you could always use two rows if you can predict and control where your breaks are going to be and want to simplify the markup further.

Colspan with incorrect rows don't render correctly

http://jsfiddle.net/9p7Mx/1/
I'm sure this has been asked before but I can't find the correct search terms:
If you have an HTML table such as:
<table>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td> </td>
</tr>
</table>
The colspan=3 on the last row will not actually line up correctly because you don't actually have 4 td elements. If you look at my example link, I have two tables, one with two tds with colspan=2 and the last with four actual tds. In the first, the td elements are just mimicking 4 tds with their own colspan=2 and thus I assume the table has no way of knowing exactly how large a single colspan is since there is none. Without knowing the exact with on a single colspan, it appears the table doesn't know what to do.
If I can't change the number of td elements in the table, is it possible to get the same effect? I'd rather not assign a width using CSS, and assigning a width WILL work (tested) but I'd like to see if there is another way.
The markup violates the HTML table model, as http://validator.w3.org tells if you use it in HTML5 mode (“Table column 2 established by element td has no cells beginning in it.”). So you should expect inconsistent and unexpected rendering.
If your table logically has just three columns, make it so. Instead of trying to make some columns wider by using colspan, use CSS to set the widths. The colspan=2 attribute means just that the cell spans two columns. And you cannot validly span a column that does not exist.
Using classes and setting the width for the X% you want.
You must consider some divs instead of a table.

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.

html table syntax validation

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.