PDA

View Full Version : Proportional Tables


markveld
04-30-2003, 12:04 PM
I have a fixed width table of "760" pixels. I split the table into 5 columns. They are for now automatically (in Dreamweaver MX) proportionatly equal so that each cell is as large as the next. I am planning to put my navigation links into each cell.

Problem is, when I start adding text to a cell, my nice proportioned tables break away and go all over the place, hugging the right, etc.

I found out about a code for proportioned cells but I do not understand it.

Here is my HTML for the table:

<table width="760" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr bordercolor="#E0E4C0">
<td height="18">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>


If somebody could point out how to do it, help me in any way, I would be very thankfull.

markveld
04-30-2003, 03:09 PM
Here is the page. Take no interest in the writing, I used it as filler for the meantime. If somebody could try and get the five cells at the top to work proportionately (Just name em CELL1, CELL2, etc) then that would be great.

And ignore the popups this is a temporary host.

http://home.1asphost.com/markveld/index.html

ronaldb66
05-01-2003, 09:56 AM
Mark,

could you put something into those cells? It would make it easier to see what you want to achieve and what goes wrong.
Anyway, I reckon you mean spacing out those cells evenly across the width of the page; if you set each cell's width to "20%" (for 5 cells) they should divide the total width up into five equally wide chunks.
I would suggest not using a fixed width for the tables as well; setting them at "100%" makes them fit the available window width in most cases.

Update:

I tried following bit of code and it worked a treat; I enveloped the table in a div though to center it since I wanted to experiment with several width settings (which all worked nicely):
...
<div>
<table width="100%" callspacing="0" cellpadding="0">
<tr>
<td width="20%">keuze 1</td>
<td width="20%">keuze 2</td>
<td width="20%">keuze 3</td>
<td width="20%">keuze 4</td>
<td width="20%">keuze 5</td>
</tr>
</table>
</div>
...