Чат веб-разработчиков
Как изменить размер таблицы в HTML

Изменяем размер таблицы в HTML

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

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

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

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

На примере это выглядит следующим образом.

Код доступен только после покупки курса HTML для начинающих.

Результат в браузере:
Таблица с заданными размерами

Полный код:

Код доступен только после покупки курса HTML для начинающих.

Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.

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

Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.

Код доступен только после покупки курса HTML для начинающих.

или

Код доступен только после покупки курса HTML для начинающих.

Хотим акцентировать ваше внимание на еще таком важном моменте. Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.

Указание размеров отдельных ячеек и столбцов

Если вы считаете, что браузер не корректно задал ширину колонок, отталкиваясь от содержимого ячеек, то вы вправе размеры ячеек и столбцов указать самостоятельно. И сейчас мы поговорим о том, как изменить размер ячейки в таблице HTML.

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

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

  1. Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
    Код доступен только после покупки курса HTML для начинающих.

    А после этого следует применить стили для данных классов.

  2. Задействовать атрибут style, внутри которого прописать необходимый CSS-код.

На практике второй вариант будет выглядеть следующим образом:

Код доступен только после покупки курса HTML для начинающих.

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

Пример:

Код доступен только после покупки курса HTML для начинающих.

Результат в браузере:
Таблица с заданными размерами

Как изменить размер шрифта в таблице

Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size. Давайте зададим размер шрифта для элементов <th>:

Код доступен только после покупки курса HTML для начинающих.

На этом данный урок заканчивается. Предлагаю хорошенько поразмыслить над домашним заданием. Прямо так внимательно его изучите и порассуждайте. Всем всего хорошего!

Читайте также
Комментарии


Vlad
Vlad

Всё получилось, только вот размер последнего столбца изменить не получилось (((

ivashkevich
ivashkevich

Если у вас задан размер для таблицы, то размер столбцов в сумме должен с ним совпадать, скорее всего в этом дело.

Dilik
Dilik

Блин получается)) я в шоке. Понимаю что и за что отвечает в этих всех тегах. Неделю назад и не подумал бы))

alsvis2013
alsvis2013

Подскажите пожалуйста, какой тип и размер шрифта в HTML устанавливается по умолчанию.

Timon
Timon

Для текста в таблице по умолчанию стоит:
font-size: 16px;
font-family: timesnewroman;
font-style: normal; <!-- для <th>-тэгов - bold -->
Если добавить эти параметры в атрибуты ячейки (td{...}), то в таблице визуально ничего не изменится.

alsvis2013
alsvis2013

Спасибо!