Таблицы в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

---

Значение таблиц в HTML5

Сегодня в вёрстке сайтов таблицы имеют не такое большое значение, как несколько лет назад. Раньше сайты создавались с помощью так называемой табличной верстки, и таблицы были основой, скелетом сайта. Позже, с развитием HTML, а также по мере появления всё большего количества портативных устройств для выхода в интернет (планшеты, смартфоны) сайты, сверстанные с помощью таблиц, "ехали", не помещались на экране, отображались коряво, и возникла потребность в резиновой, адаптивной и отзывчивой верстке.
Поэтому сейчас таблицы используются по прямому назначению - для структурированной подачи информации, будь то меню, прайс-лист или ведомость по сдавшим летнюю сессию.

Основные теги таблицы

Таблица состоит из нескольких обязательных тегов:

• тег <table > (по англ. таблица) - это тег, который говорит браузеру, что внутри него будет таблица
• тег <tr> (от англ. table row - строка таблицы) обозначает строку
• тег <td> (от англ. table data - данные таблицы) обозначает ячейку. Именно в этот тег мы закладываем всё, из чего будет состоять таблица - текст, картинки, списки, кнопки или даже другие таблицы

Давайте посмотрим схематически, как это всё ложится в коде:

То есть, для того чтобы создать таблицу на 3 колонки и 4 строки нам нужно 4 раза прописать элемент <tr> и в каждом из них по три раза - элемент <td>. Проверим?

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

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

Оглавление таблиц

Чтобы как-то назвать таблицу, используется тег <caption>, по английски заголовок.

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

В HTML для этого есть специальный тег <th> (от англ. table header - заголовок таблицы). Он прописывается вместо <td> в первой строке. Давайте посмотрим на примере нашего мини-словарика, как это работает:

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

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

Думаете, для этого тоже есть специальный тег?  А нет 🙂 Используется по прежнему тот же <th>, только вставляется он не вместо <td> в первой строке, а вместо первого <td> в каждой строчке, вот так:

Внимательный читатель наверняка заметил, что первая ячейка в первой колонке пустая. Если вам нужна пустая ячейка в таблице - её все равно нужно создать, просто ничего не вписывать между тегами <th></th> или <td></td>. Если этого не сделать - браузер подвинет остальные ячейки, куда сочтет нужным и содержимое таблицы поплывет. Попробуйте сами в JSFiddle убрать элемент <th></th>  и увидите, что произойдет.

Объединение ячеек по вертикали

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

Атрибут rowspan объединяет ячейки у соседних рядов (т.е. по вертикали).

Пример объединенных ячеек:

Давайте сверстаем такую таблицу. Чтобы нагляднее было видно объединение ячеек, все же нарисуем ей границы. Для этого применим устаревшие атрибуты, которые задаются для тега <table>:

border - отвечает за толщину границы, значение задается по умолчанию в пикселях

cellpadding - расстояние от контента ячейки до границ. Если оно ="0" - значит текст (или любой другой контент) вплотную прилегает к границам ячейки.  В случае с текстом это не очень красиво , поэтому мы зададим его равным 4 пикселям.

cellspacing - расстояние между ячейками. Если оно ="0" - значит границы ячеек накладываются друг на дружку. Если оно больше - значит каждая ячейка отстоит от другой на заданное расстояние и получается как-бы двойная рамка. Выглядит на любителя:

Если мы задали атрибут border, то по умолчанию cellspasing равен 2 пикселям. Поэтому если мы хотим границы, но при этом не хотим разрывов между ними - нужно указывать, что cellspasing="0"

Здесь же вы можете видеть, как тесно тексту в ячейках - это потому, что применен cellpadding="0"

 

Итак, как же работает атрибут rowspan? Прежде, чем сверстать таблицу - нарисуйте её от руки на листке бумаги или создайте в экселе, так вам будет проще разобраться во всех этих строчках и колонках.

Схематически нашу таблицу "Сравнение моделей" можно представить, как поле для игры в морской бой:

В ней есть 4 колонки и 4 строчки,

во второй колонке вторая и третья ячейки объединены - ставим кораблик.

В четвертой колонке совмещены третья и четвертая ячейка - и туда ставим кораблик.

Вот только в HTML мы пишем код не колонками, а строчками. Как же записать это в коде?

Очевидно, что первая строка без изменений - пишем <tr></tr> и в нём 4 элемента <th>.

Вторая строка: пишем <tr></tr>, и в нём 4 элемента <td>, только теперь второму из них прописываем атрибут rowspan="2" (это означает, что будут объединены 2 ячейки)

Третья строка:  пишем <tr></tr>, и теперь у нас всего 3 элемента <td>, потому что один из них, который во второй колонке "отобрала" верхняя ячейка.  Последнему элементу <td> также нужно прописать атрибут rowspan="2".

Четвертая строка: внутри элемента <tr> снова прописываем всего 3 элемента <td>, потому что в четвертой колонке его уже нет - он поглотился верхней ячейкой.

Еще раз посмотрим на нашу таблицу, но уже с тегами. Читать нужно, как книгу - слева направо, сверху вниз:

А теперь наконец проверим, как это работает в редакторе:

Объединение ячеек по горизонтали

Атрибут colspan объединяет ячейки у соседних колонок (т.е. по горизонтали). Принцип здесь тот же, что и с rowspan

К примеру нам нужно создать вот такую таблицу:

Давайте снова прочитаем её слева направо, сверху вниз:

• строка 1: пять <th>, причем первый оставляем незаполненным
• строка 2: один <th> и 3 <td>, вторая и третья ячейки объединены, т.е. для второго <td> прописываем colspan="2"
• строка 3: один <th> и 2 <td>, третья,  четвертая и пятая ячейки объединились, т.е. для третьего <td> пишем colspan="3"
• строка 4:  один <th> и 2 <td>. Вторая и третья, а также четвертая и пятая объединены - для каждого из двух <td> прописываем colspan="2"

Схематично это можно отобразить так:

Теперь посмотрим на код и результат поближе:

Всё получилось 🙂

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

А пока всё. До встречи!