Solved

Horizontal and vertical cell spacing in a table

Posted on 2003-11-21
6
4,836 Views
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.

Thanks
J
0
Comment
Question by:jhshukla
[X]
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
6 Comments
 
LVL 1

Expert Comment

by:fentoozler
ID: 9799557
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
 
LVL 8

Expert Comment

by:SNilsson
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.
0
 
LVL 17

Expert Comment

by:dorward
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!)
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 11

Accepted Solution

by:
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" "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
 
LVL 11

Expert Comment

by:Zontar
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.
0
 
LVL 9

Author Comment

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

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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.

691 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