Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get table cells evenly spaced?

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

like image 329
DaveDev Avatar asked May 18 '10 16:05

DaveDev


People also ask

How do you evenly space a table cell?

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.

How do I distribute table rows evenly in Word?

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.

How do you evenly space columns in a table in HTML?

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.

How do you make a table equal the width of a column in Word?

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."


2 Answers

You could always just set the width of each td to 100%/N columns.

<td width="x%"></td> 
like image 44
James Van Boxtel Avatar answered Nov 04 '22 14:11

James Van Boxtel


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.

like image 77
Olly Hodgson Avatar answered Nov 04 '22 15:11

Olly Hodgson