Solved

table color

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
edit .asp files 5 31
parse url to form? 7 25
Extracting content from meta tag PHP MYHTML DOM 3 21
simple html dom php accessing table/cell  values 4 23
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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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 …

830 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