Aligning text in table column group in HTML5

Question

I am trying to align (center) content in group of a columns in my table. I've learned about colgroup and col elements (never used them before). I've learned that those elements had align attribute, but now, in HTML, it's gone.

On w3school service I've seen this note:

Compatibility Notes

The align attribute of is not supported in HTML5. Use CSS instead.

CSS syntax: <td style="text-align:right">

Does it mean, than aligning feature of column/column group was removed and now I must put style/class element on every cell in that column? What col and colgroup elements can be used for then? I've seen that setting background-color still works. Anything else?

P.S. It's a poor experience, to learn about a feature and right away learn, that actually you can't use it already :/

---

Edit: As asked by @JLe, I've added this example code:

<table>
  <colgroup>
    <col span="2" style="background-color:red; text-align: center;">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <td>ISBN</td>
      <td>Title</td>
      <td style="text-align: center;">Price - longer</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML - long title</td>
      <td style="text-align: center;">$53</td>
    </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td style="text-align: center;">$49</td>
    </tr>
  </tbody>
</table>

So I was able to center content of the yellow cells through cell style, but I am asking whether there is a way to put that aligning code into colgroup, as I did with red columns, but it certainly does not work.

Answer 1

Maybe I should've been more clear on this in the comments, but no, you can't text-align it using col. It doesn't work by spec.

What you could do instead, is use CSS to align the different children of each tr element, as that is somewhat the same thing.

<style>
    tr td:nth-child(-n+2) {
        text-align: center;
    }
</style>
<table>
  <colgroup>
    <col span="2" style="background-color:red; text-align: center;">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <td>ISBN</td>
      <td>Title</td>
      <td style="text-align: center;">Price - longer</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML - long title</td>
      <td style="text-align: center;">$53</td>
    </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td style="text-align: center;">$49</td>
    </tr>
  </tbody>
</table>

To create more advanced selectors you can join them, making an AND statement (or union for that matter). So to select element 2-5 in a sequence, create one selector that selects the first five, and one that selects 2, 3, ... until the end:

tr td:nth-child(-n+5):nth-child(n+2) {
  background-color: red;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>