3

I have the following HTML table. I need to give a background color to each column (first column = red, second column = yellow, third column = blue). How can I do this using CSS?

Note: This need to work in IE6 onwards.

http://jsfiddle.net/Lijo/kw4yU/

  <table id = "myTable">
    <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
            <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
        <td>
            27
        </td>
    </tr>
</table>

EDIT:

I got it working by putting the js code inside document.ready. Thanks to @Jose Rui Santos http://jsfiddle.net/Lijo/kw4yU/11/

Another solution is http://jsfiddle.net/Lijo/kw4yU/12/

Yet another approach: Column width setting - HTML table

Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418

9 Answers9

9

Use the + selector

​#myTable tr td {            /* makes all columns red */
    background-color: red;
}
#myTable tr td + td {       /* makes 2nd and 3rd columns yellow */
    background-color: yellow;
}
#myTable tr td + td + td {  /* makes 3rd column blue */
    background-color: blue;
}

​demo here

EDIT

The above CSS only changes background color for the data cells. If you want to include the table headers as well, just do:

#myTable tr th,
#myTable tr td {
    background-color: red;
}

#myTable tr th + th,
#myTable tr td + td {
    background-color: yellow;
}

#myTable tr th + th + th,
#myTable tr td + td + td {
    background-color: blue;
}

EDIT2

One javascript solution is, using jQuery

$("#myTable th, #myTable td").each(function (i) {
    $(this).css('background-color', ['red', 'yellow', 'blue'][i % 3]);
});

​

Jose Rui Santos
  • 15,009
  • 9
  • 58
  • 71
  • Thanks. But it doesn't work in IE6. Any way to make it work with IE6? jsfiddle.net/Lijo/kw4yU/4 – LCJ May 24 '12 at 12:13
  • @Lijo The Js version should work in IE6. Sorry I dont have IE6 handy – Jose Rui Santos May 24 '12 at 12:20
  • 1
    `+`, `>` and `~` are IE7+ so no, you need classes, ids or JS for IE6. Or dump any pixel-perfect support for IE6 as long as it's readable, if you can :) – FelipeAls May 24 '12 at 12:47
  • 1
    @Lijo I agree with Felipe. If you still need to support IE6, just use classes or JS. But if you can avoid using IE6, skip it and switch to a real browser. This is 2012 :) – Jose Rui Santos May 24 '12 at 13:00
  • I tried using following jQuery. But it doesn't work. What is the mistake that I am doing here? http://jsfiddle.net/Lijo/kw4yU/8/ – LCJ May 24 '12 at 16:11
  • 1
    @Lijo You need to run your javascript only when the document is fully loaded, which means that you need to run your javascript code inside `$(document).ready(function () { /*your code here*/ });`. See http://jsfiddle.net/kw4yU/10/ More info http://api.jquery.com/ready/ – Jose Rui Santos May 24 '12 at 18:11
6

You could do:

td:nth-child(1){
    background-color: #f00;
}
td:nth-child(2){
    background-color: #ff0;
}
td:nth-child(3){
    background-color: #00f;
}

However, this is using CSS3, so if you want to support older browsers you need to use JavaScript.

Niclas Sahlin
  • 1,125
  • 9
  • 15
  • 2
    See the [quirksmode compatability table on nth-child](http://www.quirksmode.org/css/contents.html#t38) to decide if it's supported in the browsers you want to support. – Jeroen May 24 '12 at 11:55
3

You can add col just after the table tag

<table id = "myTable">
<col style="background-color: red;" />
<col style="background-color: yellow;" />
<col style="background-color: blue;" />
<thead>
    <tr>
        <th>
             Name
        </th>
        <th>
            Address
        </th>
        <th>
            Age
        </th>
    </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
        <td>
            27
        </td>
    </tr>
</table>
Tejasva Dhyani
  • 1,342
  • 1
  • 10
  • 19
3

Use the COL tag.

<style>
table {
    background-color: black;
}
.first {
    background-color: orange;
}
.second {
    background-color: green;
}
.third {
    background-color: pink;
}
</style>

  <table id = "myTable">
  <col class="first" /><col class="second" /><col class="third" />
    <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
    <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
    <td>
            27
        </td>
    </tr>
</table>
mmcglynn
  • 7,668
  • 16
  • 52
  • 76
1

Add a class to the td.

HTML: <td class="first">data</td>

CSS:

td.first {
    background-color: #00FF00;
}
Jeroen
  • 60,696
  • 40
  • 206
  • 339
Tikkes
  • 4,599
  • 4
  • 36
  • 62
  • 1
    A `class` would be more appropriate, otherwise you can only color the first row ;) – Jeroen May 24 '12 at 11:50
  • 1
    Like Jeroen says, a class is better. Thanks you for pointing that out. so the css would turn to: `td.first` and the html: `` – Tikkes May 24 '12 at 11:52
1
th,td{background:yellow}
th:first-child,td:first-child{background:red}
th:last-child,td:last-child{background:blue}​

Like this http://jsfiddle.net/thebabydino/kw4yU/3/

For older IE versions consider using the sibling selector instead:

th,td{background:red}
th+th,td+td{background:yellow}
th+th+th,td+td+td{background:blue}​

... or adding a class to each column in your HTML and then styling the column classes differently.

Ana
  • 35,599
  • 6
  • 80
  • 131
  • Thanks. But it doesn't work in IE6. Any way to make it work with IE6 without Javascript? http://jsfiddle.net/Lijo/kw4yU/4/ – LCJ May 24 '12 at 12:09
1

You can use the colgroup tag for that

<table id="myTable">
  <colgroup span="2" style="background-color:#FF0000;"></colgroup>
  <colgroup style="background-color:#0000FF;"></colgroup>
  <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
    <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
    <td>
            27
        </td>
    </tr>

</table>

If you don't want inline CSS then you can give the colgroups an id or class and reference it in your stylesheet.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
0

Tables don't construct by column, the construct by row. So in order to do a column based styling, each cell element must have an individual common style applied to it.

The fiddle

Style

.col1 { background-color: #ffddbb; }
.col2 { background-color: #ddffbb; }
.col3 { background-color: #bbddff; }

HTML

<table id = "myTable">
    <thead>
        <tr>
            <th class="col1">
                 Name
            </th>
            <th class="col2">
                Address
            </th>
    <th class="col3">
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td class="col1">
            Lijo
        </td>
        <td class="col2">
            India
        </td>
    <td class="col3">
            27
        </td>
    </tr>
</table>
Joel Etherton
  • 37,325
  • 10
  • 89
  • 104
0

If you don't want to change your HTML code you can try with:

table tr td {
    background-color: orange;            
}

​table tr td+td {
    background-color: yellow;            
}

table tr td+td+td {
    background-color: green;            
}
Massimog
  • 166
  • 10