Solved

How to control row color within a HTML table for the header row using CSS

Posted on 2007-11-25
3
756 Views
Last Modified: 2012-06-22
I am new to the CSS arena and would like to know how to control the color of the first row of a <table> so that it is a different color than then the remainder of the rows. For example:

<table>
<tr bgcolor="steelblue">
</tr>
</table>

Without using the bgcolor (which I have been told is "old school") how do I accomplish this effect?
0
Comment
Question by:lonekawboy
3 Comments
 
LVL 12

Expert Comment

by:Rok-Kralj
Comment Utility
<table>
<tr style="background: #832F83;">
</tr>
</table>
0
 
LVL 13

Accepted Solution

by:
R7AF earned 75 total points
Comment Utility
You can use <th> instead of <td>, and then put the following code in the head of the page. In this setup, the style will be applied to all <th> elements in all tables.
<style>

th { background: green; }

</style>

Open in new window

0
 
LVL 15

Assisted Solution

by:ncoo
ncoo earned 50 total points
Comment Utility
Copy and paste the code below. Create as many tables as you like in the following way and all will have steelblue first rows on the page.
<html>

<head>

<style type="text/css">

thead tr th { 

background-color: steelblue;

}

</style>

</head>

<body>

<table>

<thead>

<tr><th>first row</th></tr>

</thead>

<tbody>

<tr><td>contents</td></tr>

</tbody>

</table>

</body>

</html>

Open in new window

0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

744 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

17 Experts available now in Live!

Get 1:1 Help Now