How can I change the background color for a single column in html?


How can I change the background color for a single column in html? I have several html pages linked to a css file with a 12-column grid, and I to change the background of one column in some of the html pages to a different color than the regular background color (white), but not the other columns. Also, I would like to change the text color of this column. How can I do that?



If you didn't build your layout with <table> but with <div> tags, you can achieve it like this:

<div class="container">
    <div>
        First column
    </div>
    <div style="background-color: red">
        Second column
    </div>
    ...
</div>

Or, in CSS:

.container div:nth-child(2) {
    background-color: red;
}

Pertinent to the HTML table element, it can be achieved as shown in the following sample:

<table>
<tr>
<td></td>
<td style="background-color:#909090;"></td>
<td></td>
</tr>
</table>

or, in more sophisticated way using CSS3 style like:

table td:nth-child(2)
{
  background-color:#909090;
}

Hope this will help.


<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>