HTML table needs spacing between columns not rows

Question

I have an HTML table  I need to have spacing between the table columns  but not the table rows   If I use the cellspacing CSS property it does it between both rows and columns  I also cannot use CSS in what I doing  I need to use pure HTML

User · Answer

lt table cellpadding  pixels cellspacing  pixels  gt  lt  table gt   lt td align  position valign  position  gt  lt  td gt    cellpadding  length in pixels    The cellpadding attribute  used in the  lt table gt  tag  specifies how much blank space to display in between the content of each table cell and its respective border  The value is defined as a length in pixels  Hence  a cellpadding  10  attribute-value pair will display 10 pixels of blank space on all four sides of the content of each cell in that table   cellspacing  length in pixels    The cellspacing attribute  also used in the  lt table gt  tag  defines how much blank space to display in between adjacent table cells and in between table cells and the table border  The value is defined as a length in pixels  Hence  a cellspacing  10  attribute-value pair will horizontally and vertically separate all adjacent cells in the respective table by a length of 10 pixels  It will also offset all cells from the table s frame on all four sides by a length of 10 pixels

User · Answer

In most cases it could be better to pad the columns only on the right so just the spacing between the columns gets padded  and the first column is still aligned with the table   CSS     padding-table-columns td       padding 0 5px 0 0     Only right padding       HTML    lt table className  padding-table-columns  gt     lt tr gt       lt td gt Cell one lt  td gt        lt  -- There will be a 5px space here-- gt       lt td gt Cell two lt  td gt        lt  -- There will be an invisible 5px space here-- gt     lt  tr gt   lt  table gt

User · Answer

This can be achieved by putting padding between the columns using CSS  You can either add padding to the left of all columns except the first  or add padding to the right of all columns except the last  You should avoid adding padding to the right of the last column or to the left of the first as this will insert redundant white space  You should also avoid being too prescriptive with classes to specify which columns should have the additional padding as this will make maintenance harder if you later add a new column  The  lobotomised owl selector  allows you to select all siblings  regardless of if they are a th  td or something else   x000D   x000D  tr  gt            padding-left  4em    x000D   lt table gt     lt thead gt       lt tr gt         lt th gt Column 1 lt  th gt         lt th gt Column 2 lt  th gt         lt th gt Column 3 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt Data 1 lt  td gt         lt td gt Data 2 lt  td gt         lt td gt Data 3 lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

The better approach uses Shredder s  css rule  padding  0 15px 0 15px only instead of inline css  define a css rule that applies to all tds  Do This by using a style tag in your page    lt style type  text css  gt  td       padding 0 15px     lt  style gt    or give the table a class like  paddingBetweenCols  and in the site css use   paddingBetweenCols td       padding 0 15px      The site css approach defines a central rule that can be reused by all pages   If your doing to use the site css approach  it would be best to define a class like above and apply the padding to the class   unless you want all td s on the entire site to have the same rule applied   Fiddle for using style tag  Fiddle for using site css

User · Answer

If you can use inline styling  you can set the left and right padding on each td   Or you use an extra td between columns and set a number of non-breaking spaces as  rene kindly suggested   http   jsfiddle net u5mN4   http   jsfiddle net u5mN4 1   Both are pretty ugly  p css ftw

[html] HTML table needs spacing between columns, not rows

Examples related to html