Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 23rd, 2006, 03: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

Reply With Quote
  #2 (permalink)  
Old February 23rd, 2006, 04: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 5 Times in 5 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
Reply With Quote
  #3 (permalink)  
Old February 23rd, 2006, 04: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
Reply With Quote
  #4 (permalink)  
Old February 23rd, 2006, 04: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
Reply With Quote
  #5 (permalink)  
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?
__________________
"Genius is 1% inspiration and 99% perspiration"
Reply With Quote
  #6 (permalink)  
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.
Reply With Quote
  #7 (permalink)  
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;}
__________________
"Genius is 1% inspiration and 99% perspiration"
Reply With Quote
  #8 (permalink)  
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>
Reply With Quote
  #9 (permalink)  
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.
__________________
"Genius is 1% inspiration and 99% perspiration"
Reply With Quote
  #10 (permalink)  
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.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Change the backround color to cell ricespn Beginning VB 6 0 November 4th, 2006 11:39 AM
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 01:33 PM
change background color of cell based on value vurtman ASP.NET 1.0 and 1.1 Basics 4 February 26th, 2004 02:52 PM



All times are GMT -4. The time now is 08:39 PM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.