Solved

table color

Posted on 2010-11-29
5
297 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
5 Comments
 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 125 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 125 total points
ID: 34236499
Im sorry yes it does turn the border lines green. My apologies.
0
 
LVL 7

Accepted Solution

by:
lexlythius earned 250 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now