Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 23rd, 2006, 04:56 PM
Authorized User
 
Join Date: Oct 2004
Location: , , .
Posts: 55
Thanks: 0
Thanked 0 Times in 0 Posts
Default Change border color for every cell of a table

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

 
Old February 23rd, 2006, 05:01 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old February 23rd, 2006, 05:02 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
 
Old February 23rd, 2006, 05:03 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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

--
http://yupapa.com
 
Old April 4th, 2010, 06:12 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Is there a way to change the border color of each row?
 
Old April 4th, 2010, 06:21 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

Give them different CSS classes.
 
Old April 4th, 2010, 06:26 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by PeterPeiGuo View Post
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;}
 
Old April 4th, 2010, 06:49 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

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>
 
Old April 7th, 2010, 09:23 AM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by PeterPeiGuo View Post
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.
 
Old April 7th, 2010, 10:15 AM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

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.

Last edited by PeterPeiGuo; April 7th, 2010 at 10:33 AM..




Similar Threads
Thread Thread Starter Forum Replies Last Post
Change the backround color to cell ricespn Beginning VB 6 0 November 4th, 2006 12:39 PM
change cell color martin1 Visual Basic 2005 Basics 2 October 4th, 2006 08:55 AM
Change Cell Color phungleon HTML Code Clinic 2 April 9th, 2006 12:36 AM
border color on <select> cilla HTML Code Clinic 1 November 3rd, 2004 02:33 PM
change background color of cell based on value vurtman ASP.NET 1.0 and 1.1 Basics 4 February 26th, 2004 03:52 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.