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]

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]

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]

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]

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

[gravatar]

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]

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]

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

[gravatar]

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]

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]

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]

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]

i got the same problem.. i hate ie

[gravatar]

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>.