• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 339
  • Last Modified:

table color

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
gudii9
Asked:
gudii9
3 Solutions
 
qwerty021600Commented:
yes , it'll change table, td and th border color to green..
0
 
agengler11Commented:
No it does not.
0
 
agengler11Commented:
Im sorry yes it does turn the border lines green. My apologies.
0
 
lexlythiusCommented:
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
 
deegoy418Commented:
yes, It will work fine in all browsers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now