Выравнивание текста в группе столбцов таблицы в HTML5 - PullRequest
Новая
       50

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

0 голосов
/ 23 ноября 2018

Я пытаюсь выровнять (центрировать) содержимое в группе столбцов в моей таблице.Я узнал о 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, какЯ сделал с красными столбцами, но это, конечно, не работает.

1 Ответ

0 голосов
/ 23 ноября 2018

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

Вместо этого вы можете использовать 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>
...