css table borders and spacing

K

kemton

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 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>
 
N

Neredbojias

To further the education of mankind, (e-mail address removed) vouchsafed:
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 would appreciate any suggestions on how to resolve
this:

Try <table cellspacing="0" cellpadding="0"....
 
M

Martin Jay

In message said:
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 would appreciate any suggestions on how to resolve
this:

Your problem is that by default your "tb_lb" main table has the
attribute:

border-collapse: separate;

This is what gives you the white boarder around each box and, of course,
you also get an unwanted border at the bottom of the first three boxes.
Changing it to:

border-collapse: collapse;

would simply bunch all of the boxes together.

Why don't you use everyone's friend: the unordered list? Something like
the example I've pasted below gives you the same effect as your table
design. I've kept the general layout similar to yours so that you can
understand the modifications. I've also changed the font sizes from px
to em to avoid text sizing problems with everyone's favourite browser.
:)

<html>
<head>
<title></title>
<style type="text/css">
body {
margin-top: 30px;
font-family: Arial, sans-serif;
}

ul.tb_lb {
margin: 0;
padding: 0;
list-style-type: none;
}

ul.tb_internal_lb {
margin: 0;
padding: 0;
list-style-type: none;
}

li.lb_ml {
width: 104px;
border: 1px black solid;
background: #D0D0D0;
padding-left: 5px;
font-weight: bold;
font-size: 1em;
margin-top: 3px;
text-align: left;
}

li.lb_sl {
width: 86px;
border: 1px black solid;
background: #B0B0B0;
padding: 2px 0px 2px 15px;
font-weight: bold;
font-size: .8em;
margin: 0;
text-align: left;
}
</style>
</head>

<body>

<center>

<ul class=tb_lb>
<li class=lb_ml>Link 1<//li>
<li class=lb_ml>Link 2</li>
<li class=lb_ml>Link 3</li>
</ul>

<ul class=tb_internal_lb>
<li class=lb_sl>Sublink1
<li class=lb_sl>Sublink2
<li class=lb_sl>Sublink3
</ul>

<ul class=tb_lb>
<li class=lb_ml>Link 4</li>
<li class=lb_ml>Link 5</li>
<li class=lb_ml>Link 6</li>
</ul>

</center>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top