How to get table cells evenly spaced

Question

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    lt span class  Emphasis  gt Interest rates lt  span gt  lt br   gt   lt table cellpadding  0px  cellspacing  0px  class  PerformanceTable  gt       lt tr gt  lt th class  TableHeader  gt  lt  th gt  lt th class  TableHeader  gt Current rate as at 31 March 2010 lt  th gt  lt th class  TableHeader  gt 31 December 2009 lt  th gt  lt th class  TableHeader  gt 31 March 2009 lt  th gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt Index1 lt  td gt  lt td class  PerformanceCell  gt 1 00  lt  td gt  lt td gt 1 00  lt  td gt  lt td gt 1 50  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index2 lt  td gt  lt td class  PerformanceCell  gt 0 50  lt  td gt  lt td gt 0 50  lt  td gt  lt td gt 0 50  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index3 lt  td gt  lt td class  PerformanceCell  gt 0 25  lt  td gt  lt td gt 0 25  lt  td gt  lt td gt 0 25  lt  td gt  lt  tr gt   lt  table gt   lt span gt Source  Bt lt  span gt  lt br   gt  lt br   gt    lt span class  Emphasis  gt Stock markets lt  span gt  lt br   gt   lt table cellpadding  0px  cellspacing  0px  class  PerformanceTable  gt       lt tr gt  lt th class  TableHeader  gt  lt  th gt  lt th class  TableHeader  gt As at 31 March 2010 lt  th gt  lt th class  TableHeader  gt 1 month change lt  th gt  lt th class  TableHeader  gt QTD change lt  th gt  lt th class  TableHeader  gt 12 months change lt  th gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index1 lt  td gt  lt td class  PerformanceCell  gt 1169 43 lt  td gt  lt td class  PerformanceCell  gt 5 88  lt  td gt  lt td class  PerformanceCell  gt 4 87  lt  td gt  lt td class  PerformanceCell  gt 46 57  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index2 lt  td gt  lt td class  PerformanceCell  gt 1958 34 lt  td gt  lt td class  PerformanceCell  gt 7 68  lt  td gt  lt td class  PerformanceCell  gt 5 27  lt  td gt  lt td class  PerformanceCell  gt 58 31  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index3 lt  td gt  lt td class  PerformanceCell  gt 5679 64 lt  td gt  lt td class  PerformanceCell  gt 6 07  lt  td gt  lt td class  PerformanceCell  gt 4 93  lt  td gt  lt td class  PerformanceCell  gt 44 66  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index4 lt  td gt  lt td class  PerformanceCell  gt 2943 92 lt  td gt  lt td class  PerformanceCell  gt 8 30  lt  td gt  lt td class  PerformanceCell  gt -0 98  lt  td gt  lt td class  PerformanceCell  gt 44 52  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index5 lt  td gt  lt td class  PerformanceCell  gt 978 81 lt  td gt  lt td class  PerformanceCell  gt 9 47  lt  td gt  lt td class  PerformanceCell  gt 7 85  lt  td gt  lt td class  PerformanceCell  gt 26 52  lt  td gt  lt  tr gt       lt tr class  TableRow  gt  lt td gt index6 lt  td gt  lt td class  PerformanceCell  gt 3177 77 lt  td gt  lt td class  PerformanceCell  gt 10 58  lt  td gt  lt td class  PerformanceCell  gt 6 82  lt  td gt  lt td class  PerformanceCell  gt 44 84  lt  td gt  lt  tr gt   lt  table gt   lt span gt Source  B lt  span gt  lt br   gt  lt br   gt    I m also open to suggestion on how to tidy this up  if there are any   -   edit  I should add that the cellpadding  amp  cellspacing attributes are require by a 3rd party PDF conversion app that we use

User · Accepted Answer

You can use CSS  One way is to set table-layout to fixed  which stops the table and it s 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   lt h2 gt   instead of  lt span class  Emphasis  gt  and a  lt p gt  or a table  lt caption gt  instead of the Source  lt span gt   You wouldn t need the  lt br gt  elements either  because you d be using proper block level elements

User · Answer

Make a surrounding div-tag  and set for it display  grid in its style attribute    lt div style  display  grid               text-align  center              background-color  antiquewhite   gt     lt table gt       lt tr gt         lt th gt Month lt  th gt         lt th gt Savings lt  th gt       lt  tr gt       lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt     lt  table gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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   lt style gt       content  padding  0 20px    lt  style gt   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

User · Answer

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

User · Answer

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

User · Answer

You could always just set the width of each td to 100  N columns    lt td width  x   gt  lt  td gt

[html] How to get table cells evenly spaced?

Examples related to html

Examples related to css

Examples related to html-table