(auto): 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).

Tricky rowspan tables

Wednesday 18 January 2006This is over 19 years old. Be careful.

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:
Comment text is Markdown.