This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > May 2006 > css table borders and spacing





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author css table borders and spacing
kemton@kemton.com

2006-05-11, 3:58 am

I may be double posting here, but I think this is the more accurate
group to post this question.

I have a table in which I'm using css to set up the options of the
page, and I cannot get the spacing to do what I want.

In the following html page, I would like for the table with Sublink1,
2, and 3 to be directly against Link 3. Right now there is a gap of
about 5 pixels. I've simplified the page to only show my problem. I
would appreciate any suggestions on how to resolve this:

------------------ Inserted html -------------------------
<head>
<style>
body {
margin-top: 30px;
font-family: Arial, sans-serif;
}

table.tb_lb {
margin-left: 3px;
}

table.tb_internal_lb {
border-collapse: collapse;
margin-left: 3px;
}

td.lb_ml {
height: 21px;
width: 104px;
border: 1px black solid;
background: #D0D0D0;
padding-left: 5px;
font-weight: bold;
font-size: 14px;
}

td.lb_sl {
width: 86px;
border: 1px black solid;
background: #B0B0B0;
padding: 2px 0px 2px 15px;
font-weight: bold;
font-size: 12px;
}
</style>

</head>

<body>

<center>
<table class=tb_lb>
<tr><td class=lb_ml>Link 1</td></tr>
<tr><td class=lb_ml>Link 2</td></tr>
<tr><td class=lb_ml>Link 3
<tr><td>
<table class=tb_internal_lb>
<tr><td class=lb_sl>Sublink1</td></tr>
<tr><td class=lb_sl>Sublink2</td></tr>
<tr><td class=lb_sl>Sublink3</td></tr>
</table>
</td></tr>
<tr><td class=lb_ml>Link 4</td></tr>
<tr><td class=lb_ml>Link 5</td></tr>
<tr><td class=lb_ml>Link 6</td></tr>
</table>
</center>

</body>
</html>

Barbara de Zoete

2006-05-11, 3:58 am

On Thu, 11 May 2006 06:01:05 +0200, <kemton@kemton.com> wrote:

> In the following html page, I would like for the table with Sublink1,
> 2, and 3 to be directly against Link 3. Right now there is a gap of
> about 5 pixels. I've simplified the page to only show my problem. I
> would appreciate any suggestions on how to resolve this:


Don't use tables to do this. Use a list:
<URL:http://www.google.com/search?navigation+css+list>

> ------------------ Inserted html -------------------------
> <head>
> <style>


I assume in the real world you did put the opening tag for the html in the
page? And you ofcourse used a proper doctype declaration, like the one for
HTML 4.01 Strict?

In the future, please do not post (snippets of) code. Create a valid page
(both markup and css should be valid). Upload it to a server somewhere.
Post the URL to it in this newsgroup.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
kemton@kemton.com

2006-05-11, 6:49 pm

Your recommendation to use lists have worked perfectly.

Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews