Forum Moderators: not2easy

Message Too Old, No Replies

Table cell borders

Putting a border around the cells in only one table

         

Adam5000

5:35 pm on Jun 3, 2007 (gmt 0)

10+ Year Member



I've created two tables and I want to put a 10 px border around the cells in the first one, and no borders in the second one. Below is my best try at it. Help!

<html>
<head>
<title>Table test</title>

<style>

table.table_one.td {border-style: solid; border-width: 50px; border-color: #000000;}
table.table_two.td {border-style: solid; border-width: 0px; border-color: #000000;}

</style>

</head>
<body>

<table name="table_one">
<tr>
<td>
<img src="image_one.jpg">
</td>
</tr>
</table>

<table name="table_two">
<tr>
<td>
<img src="image_two.jpg">
</td>
</tr>
</table>

</body>
</html>

Robin_reala

5:48 pm on Jun 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Almost there, you just need to change your selectors. At the moment you've got:

table.table_one.td

which means any table with a class of table_one AND a class of td (

<table class="table_one td">
. This doesn't match your HTML. An exact match for your HTML would be:

table[name="table_one"] td

which means any td inside a table with a name of table_one. The problem with this approach though is that IE versions 6 and less don't support the attribute selector. Probably the easiest fix for you would be to change the HTML to use classes:

<table class="table_one">
<tr>
<td>
<img src="image_one.jpg">
</td>
</tr>
</table>

then adjust your CSS to use class selectors:

table.table_one td

which means a td inside a table with a class of table_one.

Adam5000

12:15 pm on Jun 11, 2007 (gmt 0)

10+ Year Member



Robin

That worked great. When I used the class item instead of the name, I was able to style the tables and they look good now.

Thanks for your help. You're fabulous.