HTML Tables

Hunter · #1 (**permalink**) 05-28-06, 11:12 AM

Hey, I need some help with something im creating. Ive got 3 tables, that are expandable tables so when theirs more info in them they expand. I have one for the left block, one for a middle block and one for a right block. But they are all showing on differnet rows. The tables for the left/right are 20% width and the middle is 60%.

Heres my code -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="20%" height="166" border="1">
  <tr>
    <td width="13%" height="21"> </td>
    <td width="74%"><div align="center">TITLE</div></td>
    <td width="13%"> </td>
  </tr>
  <tr>
    <td height="116"> </td>
    <td valign="top">CONTENT CONTENT CONTENT </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<table width="60%" height="162" border="1">
  <tr>
    <td width="6%" height="21"> </td>
    <td width="88%"><div align="center">TITLE</div></td>
    <td width="6%"> </td>
  </tr>
  <tr>
    <td height="112"> </td>
    <td valign="top">CONTENT CONTENT CONTENT </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<table width="20%" height="166" border="1">
  <tr>
    <td width="13%" height="21"> </td>
    <td width="74%"><div align="center">TITLE</div></td>
    <td width="13%"> </td>
  </tr>
  <tr>
    <td height="116"> </td>
    <td valign="top">CONTENT CONTENT CONTENT </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

And if you need it, heres a preview on the web -http://www.clarkysite.co.uk/test.html

Can someone help me please?

Regards,
Hunter

Can someone help me please?

Regards,
Hunter

alane · #2 (**permalink**) 05-28-06, 11:41 AM

I don't think you can have three tables in you form you have all in the same line.

Why not have a single table with three columns? Left and right with a width of 19% and the centre with a width of 58%.

Not totaling 100% as you will need to leave provision for the borders.

Hunter · #3 (**permalink**) 05-28-06, 12:43 PM

Im not doing that, because its an expanding table. If it was three columns, then when the middle expands, the left and right would follow.

Please help somone?...

King Coder · #4 (**permalink**) 05-29-06, 05:20 AM

not going to happen the way you are doing it. You can either create a table with three columns, or nested tables....

Code:

<table>
  <tr>
    <td>
       <table>
       </table>
    </td>
    <td>
        <table>
        </table>
    </td>
    <td>
        <table>
        </table>
    </td>
   </tr>
</table>

-tg · #5 (**permalink**) 06-04-06, 04:05 PM

Why not do it in css/xhtml?

The xhtml code:

Code:

<div id="container">
	<div id="left"></div>
	<div id="middle"></div>
	<div id="right"></div>
</div>

The css code:

Code:

#container {
	width:100%;
}
#left {
	float:left;
	width:20%;
}
#middle {
	float:left;
	width:60%;
}
#right {
	float:left;
	width:20%;
}

That should do it