Выравнивание текста в группе столбцов таблицы в HTML5

Question

Я пытаюсь выровнять (центрировать) контент в группе столбцов в моей таблице. Я узнал о colgroup а также col элементы (никогда не использовал их раньше). Я узнал, что эти элементы имели align атрибут, но теперь в HTML его больше нет.

На сервисе w3school я видел эту заметку:

Примечания по совместимости

Атрибут выравнивания не поддерживается в HTML5. Вместо этого используйте CSS.

Синтаксис CSS: <td style="text-align:right">

Означает ли это, что функция выравнивания группы столбцов / столбцов была удалена, и теперь я должен поместить элемент style/class в каждую ячейку в этом столбце? Какие col а также colgroup элементы могут быть использованы для тогда? Я видел эту настройку background-color еще работает. Что-нибудь еще?

PS Это плохой опыт, чтобы узнать о функции и сразу же узнать, что на самом деле вы уже не можете использовать ее:/

---

Редактировать: как спросил @JLe, я добавил этот пример кода:

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

Поэтому я смог центрировать содержимое желтых ячеек с помощью стиля ячеек, но я спрашиваю, есть ли способ поместить этот выравнивающий код в colgroup, как я сделал с красными колоннами, но это, конечно, не работает.

Answer 1

Возможно, мне следовало бы быть более ясным об этом в комментариях, но нет, вы не можете выровнять текст, используя col. Это не работает по спецификации.

Вместо этого вы можете использовать CSS для выравнивания различных дочерних элементов каждого tr элемент, так как это несколько то же самое.

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

Для создания более сложных селекторов вы можете присоединиться к ним, сделав оператор AND (или объединение в этом отношении). Таким образом, чтобы выбрать элемент 2-5 в последовательности, создайте один селектор, который выбирает первые пять, и тот, который выбирает 2, 3, ... до конца:

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>