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

[Phil3288212613ox]

Trying out the latest Dreamweaver and I'm having some trouble.

I still use HTML tables and a couple of sites I have and I need to edit multiple table cells. In this case I want to apply some CSS to a column. In older versions of Dreamweaver I could attach the CSS sheet, select the column and just apply the CSS by right-clicking on the selected column and choosing the CSS rule. So far I have not found the same function in this latest Dreamweaver. I can apply CSS to an individual cell but not multiple cells.

Is this still possible? 

[L e n a]

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

[Nancy OShea]

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

Example:

<table>
  <tr>
    <th>Company</th>
    <th class="two">Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td class="two">Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td class="two">Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

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.

[L e n a]

@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

[Nancy OShea]

@L e n a 's :Nth Pseudo-Class option is a good choice for coders.

Non-coders may find it easier to work with ordinary classes from their Properties Panel.  See screenshot.

Use whatever works best for you.

[L e n a]

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?

[L e n a]

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

[Phil3288212613ox]

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.

[Nancy OShea]

There are about a dozen ways to apply clases to cells from Properties, Code view, Live view, Design view, context menus, etc...  There's no right or wrong answer.