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.

Can you post some of your code so that we can see what you're trying to do? — JLe, Nov 23 '18 at 07:17
I'll add one in a moment, but does it actually require an example code? It's not something complicated - I want to center-align content of cells in columns through `col` or `colgroup` element, as it used to work (with attribute) earlier (before HTML5). — Soul Reaver, Nov 23 '18 at 07:23
It's just easier to give a good practice example if you can see what you're actually trying to do in this case. But I would advise you to just add a class to cells you want to align, like `` and then specify that in your CSS. Or, give each column a class that represents that column, and you can control the alignment for each context in your CSS. — JLe, Nov 23 '18 at 07:25
This question is already answered here. https://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup — Liaqat Saeed, Nov 23 '18 at 07:35
It seems like you try to align center everything in the table. You can just add to solve this. — chrisbergr, Nov 23 '18 at 07:38
@LSKhan thanks, I did not see that one. So indeed it is impossible already. I've read the article mentioned in your linked anwer, but I still don't understand why this feature was removed. @chrisbergr it's just an example. I want to align only single `colgroup`. I've added the per-cell-style only as an example of how I don't want to do it, but it seems that I will have to. — Soul Reaver, Nov 23 '18 at 07:45

JLe · Accepted Answer · 2018-11-24T17:27:08.867

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>

Ah right, the child selectors ... eh, I haven't used CSS for ages. Will have to look at this. Is there e.g. an "from 2nd to 5th child" selector? — Soul Reaver, Nov 24 '18 at 13:34
@SoulReaver Yes there is. I have edited my post and added an example that does that. — JLe, Nov 24 '18 at 17:27

Aligning text in table column group in HTML5

1 Answers1