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
This question is related to
html
css
html-table
Make a surrounding div-tag, and set for it display: grid
in its style attribute.
<div style='display: grid;
text-align: center;
background-color: antiquewhite'
>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</div>
The text-align property is set only to show, that the text in the regular table cells are affected by it, even though it is set on the surrounding div. The same with the background-color but it is hard to say which element actually holds the background-color.
If you want all your columns a fixed size, you could use CSS:
td.PerformanceCell
{
width: 100px;
}
Or better, use th.TableHeader
(I didn't notice that the first time around).
I'm also open to suggestion on how to tidy this up, if there are any? :-)
Well, you could not use the span
element, for semantic reasons.
And you don't have to define the class PerformanceCell
. The cells and rows can be accessed by using PerformanceTable tr {}
and PerformanceTable tr {}
, respectively.
For the spacing part, I have got the same problem several times. I shamefully admit I avoided the problem, so I am very curious to any answers too.
You could always just set the width of each td to 100%/N columns.
<td width="x%"></td>
In your CSS file:
.TableHeader { width: 100px; }
This will set all of the td
tags below each header to 100px. You can also add a width definition (in the markup) to each individual th
tag, but the above solution would be easier.
I was designing a html email and had a similar problem. But having every cell with the fixed width is not what I want. I'd like to have the equal spacing between the contents of the columns, like the following
|---something---|---a very long thing---|---short---|
After a lot of trial and error, I came up with the following
<style>
.content {padding: 0 20px;}
</style>
table width="400"
tr
td
a.content something
td
a.content a very long thing
td
a.content short
Issues of concern:
Outlook 2007/2010/2013 don't support padding. Having the width of the table set will allow the widths of the columns to automatically set. This way, though the contents will not have equal spacing. They at least have some spacing between them.
Automatic width setting for table columns will not give equal spacing between the contents The padding added for the contents will force the equal spacing.
Take the width of the table and divide it by the number of cell ().
PerformanceTable {width:500px;}
PerformanceTable.td {width:100px;}
If the table dynamically widens or shrinks you could dynamically increase the cell size with a little javascript.
Source: Stackoverflow.com