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

Задаём размеры таблицы [21/23]

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

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.

Важное замечание. Проценты при задании высоты обычно не работают.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задаём размеры таблицы</title> </head> <body> <table> <caption>Распределение браузеров</caption> <tr> <th>Браузер</th> <th>Посещения</th> <th>%</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>28%</td> </tr> <tr class="row3"> <td>Safari</td> <td>34</td> <td>13%</td> </tr> </table> </body> </html>
CSS
table { width: auto; height: auto; 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. С помощью CSS задайте ширину таблицы 300px.
  2. Затем измените ширину таблицы на 100%.
  3. Задайте высоту таблицы 250px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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