PDA

Click to See Complete Forum and Search --> : Uniform Column Widths - Tables

hdogg
09-20-2007, 11:53 AM
Here's the Problem that has been stumping me:
I want each table to display the max table width.
So table 2's size would match table 1's....

And if table 2's has some bigger cells than table one's respective column would match.




<!-- Table 1-->
Full Months
<table>
<td>January</td>
<td>February</td>
<td>March</td>
<td>April</td>
<td>May</td>
<td>June</td>
<td>July</td>
<td>August</td>
<td>Septemper</td>
<td>October</td>
<td>November</td>
<td>December</td>
</tr>
</table>
<!-- Table 2-->
Abreviated Months
<table>
<td>Jan</td>
<td>Feb....Large column</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
<td>Jul</td>
<td>Aug</td>
<td>Sep</td>
<td>Oct</td>
<td>Nov</td>
<td>Dec</td>
</tr>
</table>
RGL
09-20-2007, 01:14 PM
You could set the width of each table cell. HTML Code:

<!-- Table 1-->
Full Months
<table>
<tr>
<td width="50" align="center">January</td>
<td width="50" align="center">February</td>
<td width="50" align="center">March</td>
<td width="50" align="center">April</td>
<td width="50" align="center">May</td>
<td>June</td>
<td>July</td>
<td>August</td>
<td>Septemper</td>
<td>October</td>
<td>November</td>
<td>December</td>
</tr>
</table>
<!-- Table 2-->
Abreviated Months
<table>
<tr>
<td width="50" align="center">Jan</td>
<td width="50" align="center">Feb....Large column</td>
<td width="50" align="center">Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
<td>Jul</td>
<td>Aug</td>
<td>Sep</td>
<td>Oct</td>
<td>Nov</td>
<td>Dec</td>
</tr>
</table>
kiwibrit
09-20-2007, 04:14 PM
The table width is styled to be whatever you want. As the two tables are to be the same width, common styling applies.


<head>
<style type="text/css">
table {
width:100%;
}
</style>
</head>


BTW, I think you want the month names to be column heads? If so, they should be assigned to the element th.

More on tables (http://www.w3.org/TR/html4/struct/tables.html)
kiwibrit
09-20-2007, 07:56 PM
I have just re-read this thread. The thread title does not match the opening post. If you want to define column (rather than table) widths, then something like the following will do it. (I have a nagging feeling there is a less verbose way - but it's late at night here, and I can't figure it).

<table>
<caption>What happened this year</caption>
<COLGROUP span="12">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.3%">
<col width="8.7%">
</COLGROUP>
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
<th>July</th>
<th>August</th>
<th>Septemper</th>
<th>October</th>
<th>November</th>
<th>December</th>
</tr>
</table>