Can get my HTML tables to render correctly.

Printable View

Jul 6th, 2002, 10:39 AM
Martin Wilson

Can get my HTML tables to render correctly.

Code:

<table border="1" width="400" height="200"> <tr> <td width="20" > One </td> <td width="20" > Two </td> <td width="20" > Three </td> <td width="20" > Four </td> <td > Padding </td> </tr> <tr> <td colspan="5">Not much text!</td>  </tr> <tr> <td colspan="5">Test</td> </tr> </table>

Stick this code in an html file and view it...that is how is should look. The first four cells are small and the forth fills up the width.
Now comment the first bold line and uncomment the second. Now the width of the cells on the first row are buggered :( WTH is happening?

I am using IE 6 btw.
Jul 6th, 2002, 02:16 PM
Rick Bull

1 Attachment(s)

Looks fine to me in IE 6.

http://209.120.143.185/attachment.php?s=&postid=1082783
Jul 6th, 2002, 03:35 PM
Martin Wilson

1 Attachment(s)

That is wrong, the first four cells are too wide...they should be about half that width.

The two tables should look the same:
http://209.120.143.185/attachment.php?s=&postid=1082846
Jul 7th, 2002, 05:54 AM
Rick Bull

Oh yeah I see, sorry. Are you allowed to add "px" to the width attributes, I can't remember? Maybe that would fix it. IE is buggy with a lot of things it does, and I assume this is another one of its bugs. Is it alright in Mozilla/Netscape/Opera?
Jul 7th, 2002, 06:50 AM
Martin Wilson

I don't have Mozilla/Netscape/Opera, but the page will be viewed using IE 99% of the time. Maybe I can replace the 5 columns in the first row with another table. Silly IE :(
Jul 7th, 2002, 08:15 AM
Rick Bull

I don't know exactly what you want, but maybe you would be better off using CSS and DIVs, there's a good chance you could solve this problem then.
Jul 7th, 2002, 08:35 AM
Martin Wilson

I am already using CSS...same problem...I'll give divs a try but I am not sure if they'll do what I want...
Jul 7th, 2002, 08:43 AM
Martin Wilson

I think i'll have to use spans instead.
Jul 7th, 2002, 12:50 PM
Rick Bull

You could try something like this with DIVs, it seems to get rid of the problem:

Code:

<head> <style type="text/css"></style> </head> <body> <div class="table"> <div class="cell2">One</div> <div class="cell2">Two</div> <div class="cell2">Three</div> <div class="cell2">Four</div> <div class="cell">Padding</div> <div class="cell">There is quite a lot of text here... does it still mess up the "table"?</div> <div class="cell">Test</div> </div> </body>

The only problem is (if you don't want this effect that is), is that if the browser is too small the "cells" break down a line. I'm sure there is a work around though.
Jul 12th, 2002, 03:54 PM
Martin Wilson

I found a fix:
table-layout: fixed;
That stops IE doing what it wants and solves all the problems :D