Solved

table color

Posted on 2010-11-29
5
300 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery detect if it is a mobile device 3 95
Alignment is not working correctly. 8 32
Centered Image 2 21
Remove third quote mark from widget 6 5
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

914 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

18 Experts available now in Live!

Get 1:1 Help Now