[annihilate]

Hi, I have the following code which is for a table.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="A"></a>A</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="B"></a>B</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="C"></a>C</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="D"></a>D</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="E"></a>E</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="F"></a>F</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="G"></a>G</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="H"></a>H</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="I"></a>I</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="J"></a>J</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="K"></a>K</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="L"></a>L</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="M"></a>M</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="N"></a>N</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="O"></a>O</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="P"></a>P</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="Q"></a>Q</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>

		        </table>

What I want to do is to have a black 1px border around the cells with the letters in, in A, B, C , D etc etc.

I am hoping it is a CSS thing, but I only want it to apply to this table, not all the other tables on the page.

Anyone know the easiest way to do this?

Thanks

[CrappoMan]

Hi,

Just setup a style:

<style type="text/css">
.bbox { border: 1px solid black; };
</style>

and apply it to the cells you want:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td>&nbsp;</td></tr>
  <tr><td class="bbox"><a name="A"></a>A</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td class="bbox"><a name="B"></a>B</td></tr>

etc...

Simon

[annihilate]

Ok. I've got that working now. However, I'm trying to do something else. I want to use CSS for all my existing tables as I just tried my site in Mozilla and the borders don't come out how they should, so I used some CSS and it works properly. This is what I have at the moment.

TABLE.border {
border-style: solid;
border-width: 2px;
border-color: 000000;
padding: 0px;
}

And I use it like <table class="border" etc etc. This puts a 2px border around the table, but how do I get the cells inside to have borders as well. A 1px line between each row is what I'm after, so that the border is thinner than the outer border of the table.

Thanks

[CrappoMan]

You don't need to declare the style as "TABLE.name", just use ".name", and use <table class="name">. That way the style can be applied to other elements as well.

For the cell borders, declare a style and do <td class="name">

You can use { border-bottom: 1px solid gray } to put a line between each row.

You can apply any style to any html element, so you can put borders around most things this way, div's, forms, tables, cells, <a>'s, anything.

Simon

[Akh]

just use the cascading in css

table.border td {
border:1px solid #000;
}

affects every td with in the table with class border.

you can also add,

border-collapse:collapse;

to the table.border element.

[CrappoMan]

The cascade is fine if you wan't to affect every cell in a table, otherwise you have to use individual class attributes.

Simon

[annihilate]

Originally Posted by Akh

you can also add,
border-collapse:collapse;
to the table.border element.

Thanks.

What does the border-collapse:collapse do?

[Akh]

you don't have to use classes,
you can use Adjacent sibling selectors +
http://www.w3.org/TR/2004/CR-CSS21-2...cent-selectors

then you could set diffrent style to
table.border td
and to
table.border td + td

of course this wouldn't work in msie,
but it work in every other modern browsers (moz, opera, konq)

just for an example with this in practice
http://www.9ls.org/test/css-examples/chess.html

[Akh]

border-collapse:collapse;
makes the space between the "table border" and the "td borders" to collapse,

http://www.w3.org/TR/CSS2/tables.htm...apsing-borders