How Do You Apply CSS to an Column in an HTML Table?

I actually figured out what I needed and it ended up being pretty simple.

After selecting the cells I need to apply the class to, just mouse-over the <table> at the bottom, right click then set class, or ID.

Pretty simple.

well , I just realise, that probably, some readers missed the swap... so instead of writing

.mySuperClassToBeAddedToEachTD {
    background-color: lightblue;
}

and then manually adding this class ("mySuperClassToBeAddedToEachTD") to all the concerned TD node (which make up a column) using one by one the Properties Inspector...

You can simply replace the className's selector by an appropriate and wise HTML selector

tr td:nth-child(3) {
    background-color: lightblue;
}

You know as well as I do that adding a class to a TD from the property inspector is extremely useful when we need to add one class, two classes, or let's be crazy, 5 classes... but on a 30-line table (which isn't much, but is already a monthly table), it quickly becomes tedious to manage...

Compared to what... opening the code panel, but I see it's already open in your screenshot... and adding in the STYLE tag containing just two lines... and that's it... the job is done 😉

tr td:nth-child(3) {
    background-color: lightblue;
}

... I think even non-coders will get the hang of it, don't you?

@Nancy OShea 's solution of applying a class to each cell of the column in question may be an alternative approach, but if the number of rows is large it can quickly become very time-consuming to set up, not to mention that it will make the HTML code verbose, so in that case,  it would be wiser to select the children of the parent node, in an unique rule.

Then it all depends on whether you want to target the entire column (including its header), by selecting all the first-level children of this parent tag, whatever its nature is :

tr > :nth-child(2) {
    background-color: lightslategrey;
}

Or simply the elements of the column (avoiding the header), in which case you'll distinguish the nature of the child element to target :

tr td:nth-child(3) {
    background-color: lightblue;
}

Note that in that case, I still suggest using :nth-child, but :nth-of-type would have been perfectly suitable for this type of use.

You'll find an online version at https://demo.puce-et-media.com/TABLE/randomdata-1.html

As well as further information concerning  

• :nth-child https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child
• :nth-of-type https://developer.mozilla.org/fr/docs/Web/CSS/:nth-of-type

OPTION 1: Use reusable class names to target specific table headings (th) or cells (td).

Example:

CSS:

.two {property: value; property: value}

============

OPTION 2:  Define a table column group <colgroup> in your HTML.

Example:

<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>

Hope that helps.

One of the simplest ways is to use a set of columns.

I’ve posted an example, on line https://demo.puce-et-media.com/Phil/... look directly at the page code