Can get my HTML tables to render correctly.

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

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> 
    <!-- <td colspan="5">There is quite a lot of text here...and it messes up the table :(</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.

**Rick Bull** · Jul 6th, 2002, 02:16 PM

Looks fine to me in IE 6.

**Martin Wilson** · Jul 6th, 2002, 03:35 PM

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

The two tables should look the same:

**Rick Bull** · Jul 7th, 2002, 05:54 AM

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?

**Martin Wilson** · Jul 7th, 2002, 06:50 AM

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

**Rick Bull** · Jul 7th, 2002, 08:15 AM

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.

**Martin Wilson** · Jul 7th, 2002, 08:35 AM

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

**Martin Wilson** · Jul 7th, 2002, 08:43 AM

I think i'll have to use spans instead.

**Rick Bull** · Jul 7th, 2002, 12:50 PM

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

Code:

<head>
  <style type="text/css"><!--
    .cell, .cell2 {
       border:1px solid black;
    }
    .cell2 {
       float:left; 
       width:20px;
    }
    .table {
      border:1px solid black;
    }
  --></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.

**Martin Wilson** · Jul 12th, 2002, 03:54 PM

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

Thread: Can get my HTML tables to render correctly.

Thread Tools

Display

Can get my HTML tables to render correctly.

Posting Permissions