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.

Answer 1

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:

<style type="text/css">   td {     padding: 0 15px;   } </style> 

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

Answer 2

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