Forum Moderators: not2easy

Message Too Old, No Replies

How to create a thin cell bord"er

         

LABachlr

12:17 am on Sep 18, 2003 (gmt 0)

10+ Year Member



I'm not sure if this is a CSS question, but I am trying to create a very simple thin border around a cell in a table. There is only one cell in the table, but it would also be useful if I knew how to create thin borders around certain cells in tables (meaning not all of them) that have more than one cell as well.

When I code it with the following:

border="1" bordercolor="black" (partial coding)

it produces a thicker border than I would like.

How can I make it a nice thin border?

pageoneresults

1:38 am on Sep 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



How can I make it a nice thin border?

By utilizing CSS. You may have something that looks like this in your external css file...

td {
border-collapse: collapse;
border: .05em solid #000;
}

The .05em will give you the thinest line available. Now, if you only need to apply that to one cell, you could set up a class like this...

td.name {
border-collapse: collapse;
border: .05em solid #000;
}

And then you'll have this in your html...

<td class="name"></td>

LABachlr

1:51 am on Sep 18, 2003 (gmt 0)

10+ Year Member



Cool. Looks great! Thanks!

LABachlr

1:55 am on Sep 18, 2003 (gmt 0)

10+ Year Member



Is there a way to make it so that the top part of the cell has no border, and the sides and bottom do?

TGecho

3:12 am on Sep 18, 2003 (gmt 0)

10+ Year Member



border: .05em solid #000;
border-top: 0;

LABachlr

3:57 am on Sep 18, 2003 (gmt 0)

10+ Year Member



Awesome. Thanks, Gecho.

pageoneresults

4:07 am on Sep 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hehehe, gotta appreciate the teamwork that takes place around here! ;)

LABachlr

5:00 am on Sep 18, 2003 (gmt 0)

10+ Year Member



LOL. You got that right!

LABachlr

6:36 am on Sep 18, 2003 (gmt 0)

10+ Year Member



For some reason, when I put a table with one cell underneath a table that has one cell with a jpg in it, the cell's borders in the table below appear about a half inch below the picture. However, with the first one that I did that had a gif above it, it came out great. The cell's borders meshed with that of the table above it.

They both have the same setup: one table on top of the other, each with one cell.

I'm using Dreamweaver MX.

Thoughts?

Shadows Papa

1:17 pm on Sep 18, 2003 (gmt 0)

10+ Year Member



Question - in one post an example was given of:
---------
td.name {
border-collapse: collapse;
border: .05em solid #000;
}
---------
What does the "collapse" part do in this example? Why use it?

I've learned more in a couple of days by reading this one forum than I have in a week of searching other places.

thanks,

Shadows Papa

Spook

1:35 pm on Sep 18, 2003 (gmt 0)

10+ Year Member



Hi.

Yes this is the best place to learn.

Have a look at this which should explain the table borders issue.

http://www.meyerweb.com/eric/css/references/css2ref.html

Spook

LABachlr

5:22 pm on Sep 18, 2003 (gmt 0)

10+ Year Member



I fixed the problem.

Here's how:

The two tables that each had one cell in them with the thin border via CSS coding were located right next to each other with their respective images on top of them, which were also in their own respective tables. When I deleted the first table with the thinly bordered cell, the other table with its thinly bordered cell corrected itself and appeared as it should.

So, all I did was draw a third table, and put the second table with its thinly bordered cell and its respective image located on top of it, which is also in its own table, inside the third table that I just drew. For some reason the two tables with the thinly bordered cells were conflicting when they were exposed right next to each other.

What does the "collapse" part do in this example? Why use it?

Welcome to the forum Shadows Papa. What the "collapse" does is make the border of a cell inside a table very thin, roughly the size of a line drawn by a pencil. Without that coding, the thinnest you would be able to get a cell border is that of the value of "1". Try coding both ways, and you'll see what I mean. The "collapse" version is at least half the width of the border="1" version. It just looks a lot sleeker.