4 replies [Last post]
Brodeur
Offline
newbie
Last seen: 18 years 16 weeks ago
Joined: 2004-04-21
Posts: 7
Points: 0

I'm using HTML tags to make a table. I'm using CSS to define the attributes of the various table tags. Below is the CSS defined within STYLE tags:

body
{
    background-color:white;
    color:black;
    font-family:arial,helvetica,verdana,sans-serif;
}

em
{
    font-style:normal;
    font-variant:small-caps;
    font-weight:bold;
}

table
{
    margin:0px;
}

th
{
    font-family:arial narrow,helvetica,verdana,sans-serif;
    font-weight:bold;
    text-align:left;
    border:thin solid black;
    padding-left:3px;
    padding-right:5px;
}

td
{
    font-family:arial narrow,helvetica,verdana,sans-serif;
    border-left:thin solid black;
    vertical-align:top;
    padding-left:3px;
    padding-right:5px;
}

Below is the HTML for the table:

<table>
    <tr><th colspan="2">
            Color and Background Properties
        </th>
    </tr>
    <tr><td><em>Property Name</em>
        </td>
        <td><em>Value</em>
        </td>
    </tr>
    <tr><td>background</td>
        <td>&lt;background-color&gt;<br />
            &lt;background-image&gt;<br />
            &lt;background-repeat&gt;<br />
            &lt;background-attachment&gt;<br />
            &lt;backround-position&gt;
        </td>
    </tr>
    <tr><td>background-attachment</td>
        <td>scroll<br />
            fixed
        </td>
    </tr>
    <tr><td>background-color</td>
        <td>&lt;color&gt;<br />
            transparent</td>
    </tr>
</table>

As the attached image shows, there is a gap where the bottom border would appear if it had a color. I'm just making the table look as much as possible to a table I saw in a book, and no gaps appear in print.

I know that I could use the CELLPADDING and CELLSPACING attributes of the TABLE tag in some form to make the table appear tight. I used the various "border-x-width" declarations to make the border thickness 0 pixel, but the gaps continue to appear on screen.

There are ways to eliminate this gap with HTML, but I wanted to do it the proper way through CSS. I want to keep the HTML as minimal as possible. What am I missing in my CSS that I need to include in orde rto have graphical web browsers render the table without gaps between cells?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Gaps in Tables

Hi

You need to make cellspacing="0" in the <table>:

<table cellspacing="0">

I don't think you can do this in css.

Trevor

Brodeur
Offline
newbie
Last seen: 18 years 16 weeks ago
Joined: 2004-04-21
Posts: 7
Points: 0

Gaps in Tables

That's something best done in HTML, is that correct? I figured CSS would help me keep the HTML clean, but if this is required then at least I know I can keep doing that. Thanks for the feedback.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Gaps in Tables

Try using border-collapse:collapse;

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Brodeur
Offline
newbie
Last seen: 18 years 16 weeks ago
Joined: 2004-04-21
Posts: 7
Points: 0

Gaps in Tables

Stu wrote:
Try using border-collapse:collapse;

This did in CSS what <table cellspacing="0"> does in HTML. Thanks for the tip, Stu.

I was under the impression that setting "border" equal to 0 pixels would do this, but this is not so.

Also, "padding" does in CSS what CELLSPACING does in the HTML <table> tag and "margin" does in CSS what CELLPADDING does in the HTML <table> tag. I didn't expect the effect I was looking to achieve to be possible by something which had no corresponding HTML attribute. I'm not complaining, but I didn't expect this.

Thanks again, everyone. Smile