Tricky rowspan tables

Wednesday 18 January 2006

I’m trying to create a table layout with a lot of cells spanning rows, but it doesn’t render properly. Both Firefox and IE add extra gaps into the table cells (differently, of course). I’m hoping someone has a suggestion for how to get the browsers to display the table correctly. I know this is a particularly troublesome area, but I have a great deal of faith in all of you!

Here’s what it looks like in Firefox (1.5, if that matters):

Bad grid in Firefox

And here’s what it looks like in Internet Explorer:

Bad grid in Internet Explorer

The two layouts should of course be the same, and there should be no gaps beneath the images.

Here’s the HTML:

<html>
<head>
<style>
table {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    vertical-align: top;
    border: 1px solid black;
}
</style>
</head>
<body>
<table>

<tr>
<td colspan='2' rowspan='2'><img width='103' height='103' src='00.png'/></td>
<td><img width='50' height='50' src='01.png'/></td>
<td><img width='50' height='50' src='02.png'/></td>
<td colspan='2' rowspan='2'><img width='103' height='103' src='03.png'/></td>
</tr>

<tr>
<td colspan='2' rowspan='2'><img width='103' height='103' src='04.png'/></td>
</tr>

<tr>
<td colspan='2' rowspan='2'><img width='103' height='103' src='05.png'/></td>
<td colspan='2' rowspan='2'><img width='103' height='103' src='06.png'/></td>
</tr>

<tr>
<td><img width='50' height='50' src='07.png'/></td>
<td><img width='50' height='50' src='08.png'/></td>
</tr>

</table>
</body>
</html>

Is there anything I can do to get this layout to work properly? Answers along the lines of “use CSS like this instead” will be gladly accepted within reason.

» 13 reactions

Comments

[gravatar]
Mat 8:16 AM on 18 Jan 2006

Hi Ned,

Have you tried nesting tables? Colspan/rowspan trouble is common, as you've already noticed. Maybe a table in the middle column would do the trick, so you'd have to have the outer table with two rows and three columns, the 2nd column having a rowspan of 2.

BTW, Opera renders your table perfectly, so I presume you're hitting some Firefox and IE bugs.

[gravatar]
Markus 8:55 AM on 18 Jan 2006

you might try to add a "column 0" that contains no colspans, but defines explicit row heights. such a column will probably be at least 1px wide, though.

[gravatar]
Mat 9:48 AM on 18 Jan 2006

And it can be done with CSS (floating), but the HTML would then contain images in the order or 0 5 1 2 4 7 8 3 6 when CSS is turned off. If that's not an issue to you, then it's a piece of cake to do.

[gravatar]
Ned Batchelder 10:16 AM on 18 Jan 2006

Mat: Any chance you could mail me an example CSS implementation of the layout?

[gravatar]
Justin 10:23 AM on 18 Jan 2006

This isn't a job for floats. Oh sure, you could probably manage it, but that's certainly not what they were designed to do. This is a job for CSS absolute positioning.

[gravatar]
Tim Parkin 11:03 AM on 18 Jan 2006

This should do you ok...

<html>
<head>
<style>

.container {
width:312px;
}

.column {
width:104px;
float:left;
}

.container img {
display:block;
float:left;
width:100px;
border:2px solid white;
}

.smallcontainer img {
width:50px;
border:1px solid white;
}
</style>
</head>
<body>

<div class="container">

<div class="column">
<img src='01.png'/>
<img src='01.png'/>
</div>

<div class="column">
<div class="smallcontainer">
<img src='01.png'/>
<img src='01.png'/>
</div>
<img src='01.png'/>
<div class="smallcontainer">
<img src='01.png'/>
<img src='01.png'/>
</div>
</div>

<div class="column">
<img src='01.png'/>
<img src='01.png'/>
</div>

</div>
</body>
</html>

[gravatar]
Will Rickards 12:03 PM on 18 Jan 2006

You might see if this css property of tables helps you out.
table-layout: auto;

[gravatar]
Ned Batchelder 12:18 PM on 18 Jan 2006

Thank you everyone! Justin's solution is perfect: it displays properly, and has a simple logical markup that is perfect for my needs.

I love you guys!

[gravatar]
Tim Parkin 12:23 PM on 18 Jan 2006

Only one thing to be wary of with absolute positioning is what happens if you are including text copy and font sizes change from one browser to another (very often a problem when websites absolutely position boxes with verdana content in them. When a browser substitutes anothe font, the content expands outside the bounds of the containing box). If it's just images however absolute positioning is perfect..

[gravatar]
Mat 3:27 PM on 18 Jan 2006

I was under the impression that images weren't exactly images, but objects which could contain text - just like Tim said. That's why I suggested floating the stuff.

But the Gecko (Firefox) and Triton (IE) buggy misbehaviour is interesting... Does anyone have Safari and/or Konqueror to check how Ned's HTML looks in them?

[gravatar]
scott lewis 5:30 PM on 18 Jan 2006

Safari 2.0.3 (the latest version) renders the table properly.

FireFox 1.5/Mac (unsurprisingly) has the same rendering error as it's Windows counterpart.

[gravatar]
sdfg 11:59 PM on 11 Feb 2006

i got the same problem.. i hate ie

[gravatar]
Fro 3:14 AM on 4 Jun 2008

Hi !

Same problem for me (stupid IE) !
It's no use to fix the problem with the "absolute positionning" technique... the cells are fill with dynamics elements (text, images, flashs, ...) and the height can't be forced.

Rhaaa... X-0

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.