Таблицы

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

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

Использование HTML-таблиц является необходимым в случаях, когда требуется представить данные на веб-странице в удобном формате с размещением информации в виде строк и столбцов. Таблицы могут быть полезны при создании различных элементов, таких как календари, расписания, статистика и даже просто организация информации. Важно отметить, что данные в таблицах могут быть разнообразными и не обязательно числовыми. Ячейки таблиц могут содержать как текстовую, так и графическую информацию, включая изображения и мультимедийные объекты.

Построение таблиц в HTML

На языке HTML таблицы строятся с помощью тегов <table> и </table>, как например чтобы создать список определений мы сначала создаем теги <dl> и </dl>.  Создание таблиц и списков в HTML основано на блочном методе организации информации. Для этого используется контейнер, например, <table>, </table>, в который помещаются необходимые теги и данные для формирования таблицы. Этот подход позволяет структурировать содержимое точно и эффективно.

Вся информация в таблице размещена в строках, где каждая ячейка представляет собой заголовок или содержит контент. Давайте рассмотрим структуру таблицы на одном примере:

Теперь вместо просто словесных обозначений каждой ячейки давайте представим это в виде элементов языка HTML.

На схеме показаны элементы, определяющие таблицу: строки(tr), ячейки(th) и данные таблицы(td). 

tr – table row(строка таблицы)

th – table headers(заголовки таблицы)

td – table data(данные таблицы)

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

Как вы могли заметить для создания строк в таблице необходимо использовать тег <tr>, который позволяет регулировать их количество. Однако для создания столбцов не существует отдельного тега, количество столбцов определяется числом ячеек в каждой строке. Это может вызвать некоторые сложности при построении таблицы в HTML. Например, если требуется таблица с тремя строками, достаточно вставить три элемента <tr>. Но если нужно три столбца, каждая строка должна содержать три элемента <td> или <th>. Чтобы создать таблицу выше, мы можем написать следующий код:

<table>

  <tr>

    <th>Название реки</th>

    <th>Общая длина, км</th>

    <th>Длина в Казахстане, км</th>

  </tr>

  <tr>

    <td>Иртыш</td>

    <td>4248</td>

    <td>1700</td>

  </tr>

   <tr>

    <td>Есиль</td>

    <td>2450</td>

    <td>1400</td>

  </tr>

   <tr>

    <td>Тобол</td>

    <td>1600</td>

    <td>800</td>

  </tr>

</table>

При создании таблицы тег <caption>, </caption> используется только один раз внутри таблицы для создания краткого описания или подсказки к ее содержимому. Он добавляет информацию рядом с таблицей и помогает пользователям лучше понять ее структуру и данные. Необходимо размещать тег <caption> сразу после открывающего тега <table>. Давайте рассмотрим на примере:

<table>

  <caption>Реки Казахстана</caption>

  <tr>

    <th>Название реки</th>

    <th>Общая длина, км</th>

    <th>Длина в Казахстане, км</th>

  </tr>

  <tr>

    <td>Иртыш</td>

    <td>4248</td>

    <td>1700</td>

  </tr>

   <tr>

    <td>Есиль</td>

    <td>2450</td>

    <td>1400</td>

  </tr>

</table>

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

Реки Казахстана

Объединение ячеек

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

Создание сложных табличных структур предоставляет широкие возможности, однако они могут быть сложными для восприятия из-за непростой разметки. Для объединения заголовков или ячеек с данными используется атрибут colspan или rowspan, о чем будет рассказано далее.

Объединение столбцов

Для объединения столбцов в таблице используется атрибут colspan в элементах <td> или <th>. Этот атрибут позволяет расширить ячейку вправо, охватывая сразу несколько последующих. В нашем случае они объединяются для создания заголовка двух столбцов.

<table>

  <tr>

    <th colspan=»2″>Длина реки</th>

  </tr>

  <tr>

    <td>Общая длина, км</td>

    <td>Ддина в Казахстане</td>

  </tr>

</table>

При использовании атрибута colspan для объединения диапазона столбцов ячейка увеличивается в ширину, охватывая указанное количество столбцов.

Обратите внимание, что в первой строке таблицы есть одна объединенная ячейка <th>, в то время как во второй строке есть две ячейки <td>. При объединении ячеек <th> в одну появляется новая ячейка с атрибутом colspan. Важно, чтобы количество ячеек в каждой строке таблицы было одинаковым. Например, если у вас есть две ячейки <td> и вы используете параметр colspan со значением 2, то количество столбцов в каждой строке должно быть одинаковым.

Объединение строк

Атрибут rowspan объединяет диапазоны строк в таблице, аналогично объединению диапазонов столбцов. Однако в данном случае объединение охватывает несколько строк сверху вниз, что делает его уникальным способом организации данных в таблице.

В этом примере первая ячейка таблицы растягивается на три строки вниз.

<table>

  <tr>

    <th rowspan=»3″>Реки Казахстана</th>

    <td>Иртыш</td>

  </tr>

  <tr>

    <td>Есиль</td>

  </tr>

  <tr>

    <td>Тобол</td>

  </tr>

</table>

Вновь обратите внимание, что элементы <td>, обозначающие ячейки диапазона(первые ячейки оставшихся строк), исчезли из кода страницы. Атрибут rowspan = “3” подразумевает, что в следующих двух строках также есть ячейки, поэтому элементы <td> не нужны.

Атрибут rowspan увеличивает высоту ячейки в пределах одного столбца на определенное количество строк, включая текущую строку.

Атрибуты таблиц

Помимо атрибутов rowspan и colspan, которые меняют структуру таблицы в HTML есть атрибуты способные изменить стиль таблицы.

Цвета HTML

В прошлой таблице мы рассмотрели такой атрибут как bgcolor, с помощью которого можно определить цвет фона таблицы. В одной из статей мы рассмотрели какими способами могут задаваться цвета в HTML и один из способов это использовать систему RGB. Предлагаю рассмотреть большее количество цветов в этой системе.

Вывод 

Таблицы в HTML являются важным средством организации и представления данных на веб-страницах. Они помогают структурировать информацию таким образом, чтобы она была понятной и легко воспринимаемой. Понимание основных принципов построения таблиц и использование их элементов сделает ваши веб-страницы намного эффективнее. А прочитать предыдущие части про HTML можно здесь:

• Основы HTML
• Списки определений и значений

Фактчек

• Вся информация в таблице размещена и строится в строках.
• Количество столбцов определяется числом ячеек в каждой строке.
• При создании таблиц на HTML есть возможность объединения ячеек по строкам или столбцам.

Задания для самопроверки:

Задание 1

С помощью каких тегов строится таблица в HTML?

1. <table> и </table>
2. <tr> и </tr>
3. <dl> и </dl>
4. <colspan> и </colspan>

Задание 2.

Какое значение по умолчанию принимает горизонтальное выравнивание в ячейке?

1. right
2. center
3. left
4. char

Задание 3.

Какой атрибут используется для объединения ячеек таблицы по вертикали?

1. colspan
2. rowspan
3. vertical-span
4. vertical

Задание 4.

В каких элементах можно использовать атрибут colspan для объединения ячеек?

1. <td> и <th>
2. <td> и <tr>
3. <tr> и <table>
4. <table> и <td>

Ответы: 1 – 1; 2 –3; 3 – 2; 4 – 1.