Horizontal and vertical cell spacing in a table

Posted on 2003-11-21
Last Modified: 2007-12-19
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.

Question by:jhshukla
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Expert Comment

ID: 9799557

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">
        <td><div class="foo">blah</div></td>
        <td><div class="foo">blah</div></td>
        <td><div class="foo">blah</div></td>
        <td><div class="foo">blah</div></td>

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


Expert Comment

ID: 9800117

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.
LVL 17

Expert Comment

ID: 9802029
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!)
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

LVL 11

Accepted Solution

Zontar earned 20 total points
ID: 9802232
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" "">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

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

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

LVL 11

Expert Comment

ID: 9802242
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.

Author Comment

ID: 10256135
doesn't work except in ns7+ but the effort is worth those points.

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress Security 29 105
Domain Service Not Responding 14 45
Wordpress Only run code if on a certain page 11 46
Code Coverage and Coding Standards 2 76
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question