Знакомство с таблицами / Задаём размеры отдельных ячеек и столбцов [22/23]
×

Задаём размеры отдельных ячеек и столбцов [22/23]

Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:

  1. Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.

  2. Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:

<td style="width: 100px;">
  ...
</td>

К счастью, редко нужно задавать размеры каждой ячейки. Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.

В этом задании вы зададите ширину столбцов, используя атрибут style. А также увидите отличия между шириной столбцов по умолчанию и заданной вручную.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задаём размеры отдельных ячеек и столбцов</title> </head> <body> <table> <caption>Распределение браузеров</caption> <tr> <th style="">Браузер</th> <th style="">∑</th> <th style="">%</th> </tr> <tr class="row1"> <td>Mozilla Firefox</td> <td>126</td> <td>59%</td> </tr> <tr class="row2"> <td>Google Chrome</td> <td>78</td> <td>30%</td> </tr> <tr class="row3"> <td>Safari</td> <td>34</td> <td>11%</td> </tr> </table> </body> </html>
CSS
table { width: 100%; border-collapse: collapse; } td { padding: 5px; padding-right: 10px; border: 1px solid black; } th { padding: 10px; border: 1px solid black; } caption { margin-bottom: 10px; font-size: 18px; }
HTML Academy
  1. Пропишите в пустых атрибутах style значение width: 70%; у первой th и width: 15%; у второй и третьей th.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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