Horizontal and vertical cell spacing in a table

How can I specify horizontal spacing and vertical spacing between cells *separately*?
For example horizontal spacing is 4pts and vertical is 2pts.
I don't want simply acheiving the effect using inner tables. the properties must be set explicitly.

Acceptable forms of answers:
1) Impossible with current w3 specifications
2) Yes + Solution with CSS or HTML
3) Other methods may be accepted if it is not possible with CSS or HTML

The solution must work with most common browsers (Ntscp4+, IE4+, Mozilla1.1+)

I will increase the point value if considerable effort is needed AND compatibility is maintained.

Thanks
J
LVL 9
jhshuklaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

fentoozlerCommented:
J,

The only way that I think of doing this is by specifying margins in the style sheet and wrapping your cells in a div tag.  For example, set up a class in the style sheet:

.foo { margin: 2px 4px; }

Or, since you want 2px for vertical and 4px for horizontal between cells, then it would like this:

.foo { margin: 1px 2px; }

Then your table would look like this:

<table cellpadding="0" cellspacing="0">
    <tr>
        <td><div class="foo">blah</div></td>
        <td><div class="foo">blah</div></td>
    </tr>
    <tr>
        <td><div class="foo">blah</div></td>
        <td><div class="foo">blah</div></td>
    </tr>
</table>

This should be compatible with the browsers you mentioned.  Good luck.

-fent
0
SNilssonCommented:

Well setting demands on how the answers should be like for 20p, is a bit on the optimistic side, for 20 p I would not expect more than a Yes or No.
But that might just be me.
0
dorwardCommented:
border-spacing: <horizontal length> <vertical length>;

table{ border-spacing:  1ex 1em; }

Not supported by MSIE (impossible in MSIE).

Supported by modern browsers.

(and I don't know what fentoozler is thinking, but table cells don't have margins and can't be wrapped in divs!)
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

ZontarCommented:
You can use CSS padding on table cells. Here's a little scripted demo illustrating this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
  td {border:1px solid #C00; background-color:#FFD;}
  td.hPadding  {padding:5px 25px;}
  td.vPadding  {padding:25px 5px;}
</style>

<script type="text/javascript">
  function changeIt()
  {
    if(!window.tdClass || window.tdClass == "vPadding")    
      window.tdClass = "hPadding";
    else
      window.tdClass = "vPadding";
     
    var TDs = document.getElementsByTagName("td");
   
    for(var i = 0; i < TDs.length; i++)
      TDs[i].className = window.tdClass;
  }
 
  window.onload = changeIt;
</script>

</head>
<body>
<p onclick="changeIt();">CLICK HERE TO TOGGLE PADDING</p>

<table>
  <tr>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
  </tr>
  <tr>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
  </tr>
  <tr>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
  </tr>
  <tr>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
    <td>TEXT</td>
  </tr>
</table>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZontarCommented:
BTW, I don't think NS4 supports CSS padding of table cells (and I don't think there's any way to emulate it in NS4 short of using spacer gifs)  but I could be wrong about that. But it is compatible with all of the verison 5+ browsers.

Personally, I lose very little sleep over NS4 anymore in any case.
0
jhshuklaAuthor Commented:
doesn't work except in ns7+ but the effort is worth those points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.