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

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

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

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

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

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

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

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

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

Полный код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Таблица с заданными размерами</title>
    <style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            width: 500px;
            height: 100px;
        }

        td, th {
            border: solid 1px blue;
            padding: 10px;
        }
    </style>
</head>
<body>
<table>
    <caption>Таблица с заданными размерами</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
</table>
</body>
</html>

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

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

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

width: auto;

или

height: auto;

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

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

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

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

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

  1. Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
    class="cell-50px"

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

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

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

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

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

Пример:

<table>
    <caption>Таблица с заданными размерами</caption>
    <tr>
        <th style="width:30px">1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
</table>

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

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

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

th {
    font-size: 30px;
}

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • задайте ширину для вашей таблицы в 100%. Подумайте, для чего может быть использована таблица таких размеров
  • измените размер первого и последнего столбцов на 50px
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (12)


Vlad

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

ivashkevich

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

Dilik

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

alsvis2013

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

Timon

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

alsvis2013

Спасибо!

Foont7

ширина таблицы в 100%, вероятно, нужна для табличной вёрстки сайта, чтобы содержимое автоматически занимало всю ширину окна браузера?

ivashkevich

Да, всё так

fapchat2@gmail.com

как изменить размер 1 и последнего столбца таблицы на 50пикселей? мы же не знаем сколько в них пикселей

ivashkevich

Можно задать класс CSS, в котором считать ширину с помощью calc(). Примеры тут

kekspeks

А обязательно использовать calc? У меня вообще не получается :(((

ivashkevich

Не обязательно.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований