I'm trying to create a page with a number of static html tables on them.
What do I need to do to get them to display each column the same size as each other column in the table?
The HTML is as follows:
<span class="Emphasis">Interest rates</span><br /> <table cellpadding="0px" cellspacing="0px" class="PerformanceTable"> <tr><th class="TableHeader"></th><th class="TableHeader">Current rate as at 31 March 2010</th><th class="TableHeader">31 December 2009</th><th class="TableHeader">31 March 2009</th></tr> <tr class="TableRow"><td>Index1</td><td class="PerformanceCell">1.00%</td><td>1.00%</td><td>1.50%</td></tr> <tr class="TableRow"><td>index2</td><td class="PerformanceCell">0.50%</td><td>0.50%</td><td>0.50%</td></tr> <tr class="TableRow"><td>index3</td><td class="PerformanceCell">0.25%</td><td>0.25%</td><td>0.25%</td></tr> </table> <span>Source: Bt</span><br /><br /> <span class="Emphasis">Stock markets</span><br /> <table cellpadding="0px" cellspacing="0px" class="PerformanceTable"> <tr><th class="TableHeader"></th><th class="TableHeader">As at 31 March 2010</th><th class="TableHeader">1 month change</th><th class="TableHeader">QTD change</th><th class="TableHeader">12 months change</th></tr> <tr class="TableRow"><td>index1</td><td class="PerformanceCell">1169.43</td><td class="PerformanceCell">5.88%</td><td class="PerformanceCell">4.87%</td><td class="PerformanceCell">46.57%</td></tr> <tr class="TableRow"><td>index2</td><td class="PerformanceCell">1958.34</td><td class="PerformanceCell">7.68%</td><td class="PerformanceCell">5.27%</td><td class="PerformanceCell">58.31%</td></tr> <tr class="TableRow"><td>index3</td><td class="PerformanceCell">5679.64</td><td class="PerformanceCell">6.07%</td><td class="PerformanceCell">4.93%</td><td class="PerformanceCell">44.66%</td></tr> <tr class="TableRow"><td>index4</td><td class="PerformanceCell">2943.92</td><td class="PerformanceCell">8.30%</td><td class="PerformanceCell">-0.98%</td><td class="PerformanceCell">44.52%</td></tr> <tr class="TableRow"><td>index5</td><td class="PerformanceCell">978.81</td><td class="PerformanceCell">9.47%</td><td class="PerformanceCell">7.85%</td><td class="PerformanceCell">26.52%</td></tr> <tr class="TableRow"><td>index6</td><td class="PerformanceCell">3177.77</td><td class="PerformanceCell">10.58%</td><td class="PerformanceCell">6.82%</td><td class="PerformanceCell">44.84%</td></tr> </table> <span>Source: B</span><br /><br />
I'm also open to suggestion on how to tidy this up, if there are any? :-)
edit: I should add that the cellpadding & cellspacing attributes are require by a 3rd party PDF conversion app that we use
On the Layout tab, in the Cell Size group, click in the Table Column Width box, and then specify the options you want. To make the columns in a table automatically fit the contents, click on your table. On the Layout tab, in the Cell Size group, click AutoFit, and then click AutoFit Contents.
Select the columns or rows that you want to make the same size, and then click the Table Layout tab. Under Cells, click Distribute Rows or Distribute Columns.
Take the width of the table and divide it by the number of cell (). If the table dynamically widens or shrinks you could dynamically increase the cell size with a little javascript.
To adjust table row and column size in Word: Click anywhere in the table. In "Table Tools" click the [Layout] tab > locate the "Cell Size" group and choose from of the following options: To fit the columns to the text (or page margins if cells are empty), click [AutoFit] > select "AutoFit Contents."
You could always just set the width of each td to 100%/N columns.
<td width="x%"></td>
You can use CSS. One way is to set table-layout
to fixed
, which stops the table and its children from sizing according to their content. You can then set a fixed width on the relevant td
elements. This should do the trick:
table.PerformanceTable { table-layout: fixed; width: 500px; } table.PerformanceTable td.PerformanceCell { width: 75px; }
Suggestions for for tidying up? You don't need the cellpadding
or cellspacing
attributes, or the TableRow
and TableHeader
classes. You can cover those off in CSS:
table { /* cellspacing */ border-collapse: collapse; border-spacing: 0; } th { /* This covers the th elements */ } tr { /* This covers the tr elements */ } th, td { /* cellpadding */ padding: 0; }
You should use a heading (e.g. <h2>
) instead of <span class="Emphasis">
and a <p>
or a table <caption>
instead of the Source <span>
. You wouldn't need the <br>
elements either, because you'd be using proper block level elements.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With