Solved

Horizontal and vertical cell spacing in a table

Posted on 2003-11-21
6
4,675 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
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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 viewer will learn how to count occurrences of each item in an array.

821 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