Знакомство с таблицами / Выравнивание содержимого в ячейках [18/23]
×

Выравнивание содержимого в ячейках [18/23]

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

td {
  vertical-align: значение;
  text-align: значение;
}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов. В этом примере для вас уже подготовлены ячейки с классами.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Выравнивание содержимого в ячейках</title> </head> <body> <table> <caption>Распределение браузеров</caption> <tr> <th class="cell-1" rowspan="2">Браузер</th> <th colspan="2">Посещения</th> </tr> <tr> <th>Количество</th> <th>В процентах</th> </tr> <tr> <td>Mozilla Firefox</td> <td class="column-2">1263</td> <td class="column-3">75%</td> </tr> <tr> <td>Google Chrome</td> <td class="column-2">78</td> <td class="column-3">5%</td> </tr> <tr> <td>Safari</td> <td class="column-2">345</td> <td class="column-3">20%</td> </tr> </table> </body> </html>
CSS
.cell-1 { } .column-2 { } .column-3 { } table { border-collapse: collapse; border: 2px solid black; } td { padding: 5px; padding-right: 10px; border: 1px solid lightgray; } th { padding: 10px; border: 1px solid black; } caption { margin-bottom: 10px; font-size: 18px; }
HTML Academy
  1. Для CSS-правила .cell-1 добавьте свойство vertical-align: top;.
  2. Затем поменяйте его на vertical-align: bottom;.
  3. Для .column-2 свойство text-align: right;.
  4. Для .column-3 свойство text-align: center;.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.