?
Solved

table color

Posted on 2010-11-29
5
Medium Priority
?
324 Views
Last Modified: 2012-05-10
Hi,

i ran following code


<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>


when we say


table, td, th
{
border:1px solid green;
}

does it change table border color please advise
0
Comment
Question by:gudii9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 500 total points
ID: 34236478
yes , it'll change table, td and th border color to green..
0
 
LVL 2

Expert Comment

by:agengler11
ID: 34236495
No it does not.
0
 
LVL 2

Assisted Solution

by:agengler11
agengler11 earned 500 total points
ID: 34236499
Im sorry yes it does turn the border lines green. My apologies.
0
 
LVL 7

Accepted Solution

by:
lexlythius earned 1000 total points
ID: 34236527
Not only does your code set all TABLE elements' default border color, but it also changes all TD and TH elements' border color, even if they were inside a TABLE whose border color was not green.

Consider the following modification to your example:
<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>


<table style="border-color: red;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Open in new window


You should now see a second table with a red overall color, but still with table cells having the green border.

This happens because, according to the selector rules (see http://www.w3schools.com/css/css_reference.asp) a comma (,) defines separate rules that will match different elements, and for each matched element will set the subsequent styles (unless modified by a more specific rule or an inline style). Per those rules, you get by default TABLEs and TDs with green borders. However, the second TABLE's inline style attribute overrides those styles and sets a red border for that specific TABLE element instead.

Now consider the following modification to the style sheet itself:
<style type="text/css">
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

td:first-child {
  background-color: yellow;
}
</style>

Open in new window


This will result in all TABLEs having the first TD in all their rows with a yellow background color (unless modified by a more specific rule, as always).
0
 
LVL 3

Expert Comment

by:deegoy418
ID: 34255157
yes, It will work fine in all browsers.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question