HTML-таблица используется для упорядочивания и вывода данных на экран устройства при помощи строк и столбцов. Они состоят из ячеек. Соответствующие элементы образуются на пересечении имеющихся в таблице строк и столбцов.
Далее предстоит освоить азы работы с HTML-таблицами. Нужно выяснить особенности этого элемента, способы задания и редактирования его составляющих. Предложенная ниже информация пригодится каждому веб-программисту. Особенно это касается начинающих разработчиков, которые только принялись за изучение HTML и CSS.
Создание таблицы
Для создания таблицы необходимо использовать парный тег <table></table>. Он служит контейнером для табличных элементов. Все элементы рассматриваемого объекта на сайте должны находиться внутри <table></table>.
По умолчанию у таблиц HTML нет видимых границ. Они задаются при помощи свойства border:
Убрать промежутки между ячейками таблицы поможет свойство table {border-collapse: collapse;}.
Создание рядов
Для создания строк (рядов) в HTML-таблице необходимо пользоваться тегом <tr>. Он является парным.
В процессе веб-программирования необходимо запомнить, что количество горизонтальных строк таблицы определяется количеством пар <tr></tr>.
Формирование ячеек заголовка и тела
Задать заголовок столбца в HTML-таблице поможет тег <th>. Он выражается специальной ячейкой, текст в которой будет предусматривать полужирное выделение. Количество ячеек заголовка зависит от количества пар <th></th>. Здесь доступны атрибуты:
- colspan;
- headers;
- rowspan.
Ячейка тела таблицы создается при помощи тега td. Он используется для формирования ячеек, внутри которых размещаются различные данные. Элементы td и /td, расположенные в пределах одного и того же ряда, определяют количество ячеек в строке существующей таблицы.
В процессе верстки и веб-разработки необходимо помнить – количество пар ячеек td должно совпадать с количеством пар ячеек th. Для данного компонента доступны такие атрибуты, как rowspan, colspan и headers.
Выше можно увидеть наглядный пример создания ячеей тела HTML-таблицы.
Добавление подписи (заголовка)
Для более приятного глазу отображения таблиц на странице можно добавлять к ним заголовки (подписи). За соответствующий элемент отвечает тег caption. Он создает подпись HTML-таблицы и добавляется непосредственно после тега table. Он должен быть размещен за пределами строк и ячеек.
Группировка
Группировку можно осуществлять различными способами:
- Тег colgroup формирует структурную группу столбцов. Он выделяет логически однородные td. Используется для группировки одного или более столбцов для дальнейшего единого форматирования. С помощью colgroup получится повторять стили для каждой ячейки и строки. Добавляться должен прямо после table или caption.
- Тег col используется для формирования групп столбцов, которые делят таблицу на разделы, не относящиеся к общей табличной структуре (не включающие в себя информацию одного и того же типа). Col позволяет задавать свойства столбцов для каждого столбца в пределах colgroup.
- Атрибут style позволяет менять основной цвет фона ячеек. Для col доступен атрибут span, который задает количество столбцов, подлежащих объединению.
- Thead используется для создания группы заголовков для строк таблицы с целью формирования единого оформления. Применяется совместно с tbody и tfoot.
- Tbody – тег, позволяющий группировать основное содержимое имеющейся таблицы. Он применяется в сочетании с tfoot и thead.
- Tfoot – используется для создания группы строк для представления данных о суммах или итогах, расположенную в нижней части HTML-таблицы. В каждой таблице может применяться всего один раз. Размещается после thead, но перед tr и tbody.
Ячейки в HTML-таблице можно не только группировать, но и объединять. Для этого используются атрибуты colspan и rowspan. Первый параметр используется для задания количества ячеек, объединяемых по горизонтали, второй – по вертикали.
Атрибуты табличных элементов
Перед изменением ширины таблицы в HTML необходимо получше изучить азы работы с табличными компонентами. Вот их атрибуты:
| Атрибут | Описание и принимаемые значения |
| span | Количество колонок, объединяемых для задания единого CSS стиля. По умолчанию значение этого атрибута равняется единице. В качестве принимаемых значений может выступать любое целое число (положительное). |
| headers | Используется для задания списка ячеек заголовка, включающих в себе информацию о заголовке текущей ячейки данных. Используется для речевых браузеров. Принимаемые значения – это список имен ячеек, разделенных пробелами. Соответствующие имена присваиваются через атрибут id. |
| colspan | Количество ячеек в строке для объединения по горизонтали. Принимаемые значения: от 1 до 999 включительно. Пример использования: td colspan=«6». |
| rowspan | Количество ячеек в столбце для их объединения по вертикали. Диапазон значений будет точно таким же, как и у colspan. Пример использования: td rowspan=«4». |
С основными операция по созданию таблиц удалось ознакомиться. Теперь можно более подробно рассмотреть особенности размера HTML-таблиц и их корректировку.
Размер таблицы
Если разработчик не указывает размер заданной таблицы, он определяется количеством текста или иного контента, находящегося внутри рассматриваемого элемента. HTML-таблица будет растягиваться по размеру контейнера, в котором она размещается.
Размер таблицы можно указывать вручную. Для этого необходимо использовать:
- width – ширина таблицы;
- height – высота таблицы.
Ширина обычно измеряется в процентах или пикселях. Если указать 100 % ширину таблицы, она растянется на весь экран.
Чтобы указать размер table, нужно использовать атрибут style со свойствами width и height. Он поможет задать размер HTML-таблицы, строк и столбцов.
Выше можно увидеть наглядный пример кода, в котором таблица будет иметь ширину 400 пикселей.
Ширина ячеек
Ширина ячеек в таблице определяется атрибутом width тега td. Соответствующее значение устанавливается только тогда, когда ширина ячейки таблицы должна быть задана.
Вот наглядный пример, когда ширина td (ячейки) должна быть указана:
Здесь необходимо создать на веб-сайте две колонки, одна из которых имеет размер 200 пикселей, а вторая – занимает все оставшееся пространство. Для этого формируется таблица с двумя td. Для левого td используется параметр width=«200». Единицы измерения здесь ставить не нужно. Это связано с тем, что браузер сам понимает, что заданное число – это пиксели.
Ширина td может меняться, несмотря на то, что она указана точно. Такое происходит, если в td добавляется рисунок, размер которого оказывается больше соответствующего «поля». Для того, чтобы вместить используемое изображение, td будет расширяться. На размер ячейки может оказывать влияние текстовое содержимое. Примером служит очень длинное слово.
Чтобы избежать соответствующей ситуации, необходимо придерживаться некоторых правил:
- Не добавлять в td (ячейку) фиксированной ширины изображения, превышающие по ширине td width.
- Для тега table использовать свойство table-layout с параметром fixed. В этом случае рисунок будет обрезан, если он не помещается полностью в td.
Теперь понятно, как работать с таблицами на веб-страницах и изменять их ширину. Быстрее разобраться с азами веб-разработки и использовании CSS помогут дистанционные компьютерные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
