rounded corners table (with wide angles)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I've been reading lots of rounded corners table tutorials lately,
because I'm a Perl guru, not an HTML guru. :-)  So far all of the
examples I've seen have edges with narrow angles, which fit easily into
a single corner cell.  Simple stuff.  Piece of cake.  By now I can do
them in my sleep while juggling hippopotamuses and hanging upside down.

But this one is different.  In this particular case, it takes three
corner edges to hold each curve (not two, not four, and five is right
out!)  Each one of those cells is 35x35 pixels, and that is exactly how
much room I allocate for them in the table.  Then I let the browser
decide on the size of the other cells, based on its current width.  But
lo and behold, the results are not pretty:

As you can see, Firefox renders the table perfectly, while IE6 does its
own thing and disregards my 35-pixel width for columns 2 and 8.  The
weird thing is that the problem basically goes away if I specify a width
(in pixels) for each and every single cell in the table.  But how lame
is that?  Now you have a table that's hardcoded and doesn't change its
size in sync with the browser.

So my question to you is whether or not there's a way around this
madness?  I'm aware that IE7 and Firefox have built-in support for
rounded corners in CSS which might be applicable here, but alas I must
be able to support older browsers...

This is the HTML for the table in question.  It's ugly, and it certainly
needs cleaning up and CSS'ing, but it's otherwise working code.

<table width=99% border="1" cellpadding=0 cellspacing=0>
    <td width=35  height=35 background="tlc.gif">1<img src="blank.gif"></td>
    <td width=35  height=35 background="tlr.gif">2<img src="blank.gif"></td>
    <td colspan=1 height=35 background="tb.gif">3<img src="blank.gif"></td>
    <td colspan=3 height=35 background="tb.gif">456<img src="blank.gif"></td>
    <td colspan=1 height=35 background="tb.gif">7<img src="blank.gif"></td>
    <td width=35  height=35 background="trl.gif">8<img src="blank.gif"></td>
    <td width=35  height=35 background="trc.gif">9<img src="blank.gif"></td>
    <td width=35  height=35 background="tll.gif"><img src="blank.gif"></td>
    <td colspan=2 align="right" background="cell.gif">IC Number:&nbsp;</td>
    <td align="center" valign="middle" background="cell.gif"></td>
    <td width=31 background="vb.gif"><img src="blank.gif"></td>
    <td align="right" background="cell.gif">Serial Number:&nbsp;</td>
    <td colspan=2 align="center" valign="middle" background="cell.gif"></td>
    <td width=35 background="trr.gif"><img src="blank.gif"></td>
    <td width=35  height=35 background="lb.gif"><img src="blank.gif"></td>
    <td colspan=2 align="right">IC Number:&nbsp;</td>
    <td align="center" valign="middle"></td>
    <td width=31 background="vb.gif"><img src="blank.gif"></td>
    <td align="right">Serial Number:&nbsp;</td>
    <td colspan=2 align="center" valign="middle"></td>
    <td width=35 background="brr.gif"><img src="blank.gif"></td>
    <td width=35  height=35 background="blc.gif"><img src="blank.gif"></td>
    <td width=35  height=35 background="blr.gif"><img src="blank.gif"></td>
    <td colspan=1 height=35 background="bb.gif"><img src="blank.gif"></td>
    <td colspan=3 height=35 background="bb.gif"><img src="blank.gif"></td>
    <td colspan=1 height=35 background="bb.gif"><img src="blank.gif"></td>
    <td width=35  height=35 background="brl.gif"><img src="blank.gif"></td>
    <td width=35  height=35 background="brc.gif"><img src="blank.gif"></td>

    4149 FD56 D078 C988 9027  1EB4 04CC F80F 72CB 09DA

Re: rounded corners table (with wide angles)

Quoted text here. Click to load it

Rounded corners are styling, this question belongs in
crossposted and follow-up set

Quoted text here. Click to load it

That page seems to contain nothing more than a screenshot

Quoted text here. Click to load it

If so then its an unusual effect you are aiming for, do you really want
solid cell borders to show with a rounded border rendered inside the


Site Timeline