Change border color for every cell of a table

jdang67 · #1 (**permalink**) February 23rd, 2006, 03:56 PM

Hi all,

I want to change the border color of every cells or rows of a table but I am not quite sure what is the best way to do it. Personally, I want to change on the table level, not on cells or rows object.

Setting border=1 on table tag will turn all border on but when we try to change border color then only 4 sides border are changed and inside are not. Does anybody know how to do this?

JDang

richard.york · #2 (**permalink**) February 23rd, 2006, 04:01 PM

Take the HTML border attribute away, and apply the following CSS between <head> and </head> tags.

Code:

<style type='text/css'>
    table, td {
        border: 1px solid black;
    }
</style>

That border applies to all <table> and <td> elements in a given document.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

meow · #3 (**permalink**) February 23rd, 2006, 04:02 PM

CSS handles borders os TABLE and TD (and TH) separately.

For all tables.
table,td,th { border: 2px solid #f00 }

If you want to affect just one table, you have to use a more specific selector (for instance by giving the table an id or class).

http://www.w3.org/TR/REC-CSS2/tables.html

--
http://yupapa.com

meow · #4 (**permalink**) February 23rd, 2006, 04:03 PM

Hee-hee! You got me this time, Richard. :D

--
http://yupapa.com

andypandyrox456 · #5 (**permalink**) April 4th, 2010, 06:12 PM

Is there a way to change the border color of each row?

PeterPeiGuo · #6 (**permalink**) April 4th, 2010, 06:21 PM

Give them different CSS classes.

andypandyrox456 · #7 (**permalink**) April 4th, 2010, 06:26 PM

Quote:

Originally Posted by PeterPeiGuo

Give them different CSS classes.

That's what I figured, but it didn't work. Is the code like this?

Code:

<tr class="example">
<td>Hi </td>
<td>Hello </td>
</tr>
<tr class="test">
<td>Test </td>
<td> Testing </td>
</tr>

And the style sheet looks like this?

Code:

tr.example {
border-color:red;
All other border stuff in here;}

tr.test {
border-color:gray;
All other border stuff in here;}

PeterPeiGuo · #8 (**permalink**) April 4th, 2010, 06:49 PM

For example:

Code:

<html>
<head>
<style>
<html>
<head>
<style>
table {
	border-style:solid;
	border-width:1px;
	border-color: yellow;
}
tr.example td {
	border-style:solid;
	border-color:red;
	border-width: 1px;
	padding: 10px;
}
tr.test td {
	border-style:solid;
	border-color:green;
	border-width: 1px;
	padding: 10px;
}
</style>
</head>
<body>
<table>
<tr class="example">
<td>Hi </td>
<td>Hello </td>
</tr>
<tr class="test">
<td>Test </td>
<td> Testing </td>
</tr>
</table>
</body>
</html>

andypandyrox456 · #9 (**permalink**) April 7th, 2010, 09:23 AM

Quote:

Originally Posted by PeterPeiGuo

For example:

Code:

<html>
<head>
<style>
<html>
<head>
<style>
table {
	border-style:solid;
	border-width:1px;
	border-color: yellow;
}
tr.example td {
	border-style:solid;
	border-color:red;
	border-width: 1px;
	padding: 10px;
}
tr.test td {
	border-style:solid;
	border-color:green;
	border-width: 1px;
	padding: 10px;
}
</style>
</head>
<body>
<table>
<tr class="example">
<td>Hi </td>
<td>Hello </td>
</tr>
<tr class="test">
<td>Test </td>
<td> Testing </td>
</tr>
</table>
</body>
</html>

could it be that my browswer doesn't support that when using <tr>?
I think it said in the book that some browsers can't support <tr>, so instead you should use <td>, but I tried that also, and it didn't work.
And I even tried it in one of the W3Schools.com "Try it out yourself" activities, and it worked.

PeterPeiGuo · #10 (**permalink**) April 7th, 2010, 10:15 AM

Actually in my example, the style is applied on td, not tr. tr is there merely as a selector to narrow down to a particular group of td's.

I just tested my last example as is with IE8, Opera, Firefox, Safari and Chrome, all with the latest version on Windows, and they all worked.

Need to download code?

Navigation