Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Horizontal and vertical cell spacing in a table

Posted on 2003-11-21
6
Medium Priority
?
5,014 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to dynamically set the form action using jQuery.
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.
Suggested Courses

610 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