?
Solved

Horizontal and vertical cell spacing in a table

Posted on 2003-11-21
6
Medium Priority
?
5,153 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 11

Accepted Solution

by:
Zontar earned 60 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month12 days, 22 hours left to enroll

579 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