Таблицы

Обновлено

12.09.2023

Просмотров

414

Время прочтения

30 мин.

Сложность

В прежние времена, о которых мы уже немного упоминали, табличные теги использовались для вёрстки сайтов (табличная вёрстка). Эти сайты выглядели очень просто, были ориентированы на функционал, а не на дизайн, не были адаптивными. Несмотря на то, что веб значительно развился с тех пор и таблицами больше не верстают, вы ещё можете встретить такие сайты в интернете. Например, некоторые движки форумов, которые были созданы очень давно, всё ещё используют табличную вёрстку. Написать форум — задача не лёгкая и довольно объёмная, поэтому гораздо проще купить за небольшие деньги такой движок и немного настроить под свой бренд. Такие решения были особенно популярны в 2000-2010 годах, когда форумы в интернете были на пике популярности. Пример подобного форума на готовом движке с табличной вёрсткой:

И код страницы:

Хотя здесь присутствуют также и div`ы, роль их выполняют таблицы — <table>,<tr>,<td>. Вместо разделения одного div на контейнеры создаются таблицы <table>, делятся на строки <tr>, затем на ячейки <td>, и после уже в них встравляются нужные div`ы с контентом. Кроме того, что этот подход приводит к большему количеству тегов, такие сайты не адаптируются под размер экрана пользователя, сложнее поддаются стилизации при помощи CSS. Наконец, табличная вёрстка морально устарела.

Табличная вёрстка в настоящее время максимально распространена в создании электронных писем. Точнее сейчас это вообще единственный способ создать письмо, которое будет понимать наибольшее количество почтовых программ и сервисов. В рамках обучения в школе BabyFrontent не предусмотрены уроки обучения вёрстке электронных писем, потому что, по некоторому мнению, это обязанность вовсе не frontend-разработчика.

В наши дни таблицы в вебе, наконец, стали исполнять роль, отведённую им по замыслу создателей HTML: они стали отображать табличные данные. К табличным тегам относятся: <table>,<caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

<table>
— (с англ. table — таблица) это базовый контейнер для всей таблицы, собственно это и есть таблица с точки зрения браузера и JavaScript. Если бы мы стали сравнивать таблицу с веб страницей, то <table> был бы равен <html>. Пример очень простой таблицы ниже:

                
                <table>
    <thead>
        <tr>
            <th colspan="3">Объединённый заголовок таблицы</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Имя</td>
            <td>Иван</td>
            <td>Юлия</td>
        </tr>
    </tbody>
</table>

Как видите, у таблицы тоже есть «голова» и «тело» в виде тегов <thead>, <tbody>. А ещё у неё есть футер в виде <tfoot>, но об этом немного позже. Таблицы всегда, и не только в HTML, состоят из строк и ячеек. Строки представлены как <tr> (с англ. table row — строка таблицы), а ячейки как <th> (ячейки в «голове» <thead> таблицы) или как <td> (ячейки во всех остальных строках, с англ. table data cell — ячейка данных таблицы). Хотя это не стандарт и вы можете добавить в <thead> вместо <th> обыкновенные <td>, или вовсе опустить <thead>, стилизовав под него первую строку таблицы. Также вы можете опустить теги <thead>,<tbody>,<tfoot>. В примере ниже тегов стало меньше, однако внешний вид таблицы совершенно не изменился:

                
                <table>
    <tr>
        <th colspan="3">Объединённый заголовок таблицы</th>
    </tr>
    <tr>
        <td>Имя</td>
        <td>Иван</td>
        <td>Юлия</td>
    </tr>
</table>

Всё же мы советуем использовать конкретные теги для разделения структуры таблицы, её заголовка и т.д., а не просто создавать таблицу из одних <tr> и <td>. Кроме того, что это лучше для восприятия разработчика (то есть для вашего и ваших коллег), правильно свёрстанные таблицы отображаются в результатах поисковой выдачи Яндекса, Гугла и других. На скриншоте ниже таблица с сайта отображается прямо в результатах поиска Гугла:

<table> может принимать глобальные атрибуты. В настоящий момент все собственные атрибуты тега запрещены и не должны использоваться в новых сайтах.

<caption>
— (с англ. caption — подпись, заголовок) определяет заголовок таблицы. В примерах кода выше мы создавали строку заголовка путём объединения трёх <th> в одну через атрибут colspan="3". Это работает, но не совсем правильно с семантической точки зрения. Для создания заголовка таблицы нужно использовать <caption> (для наглядности добавим немного стилизации):

<br /> See the Pen <a href="https://codepen.io/evgeniychernyy/pen/YzeymOj"><br /> Тег caption</a> by Eugene (<a href="https://codepen.io/evgeniychernyy">@evgeniychernyy</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

Результат работы кода уже выглядит более наглядным, чем прежде:

Мы видим, что содержимое <caption> находится как будто вне таблицы, и это вполне правильное отображение. Особенность <caption> в том, что он считывается скринридерами как заголовок и помогает людям с проблемами со зрением тут же понять, о чём эта таблица, в то время как обыкновенная <th>\<td> будет прочитана как объединённая ячейка. Также использование этого тега добавляет семантики в вашу вёрстку.

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

Положение <caption> в начале или в конце таблицы определяется при помощи CSS.

<thead>,<tbody>,<tfoot>
— (с англ. table head — голова таблицы, table body — тело таблицы, table foorer — нижний колонтитул таблицы) определяют «голову», тело и футер таблицы. С ними должно быть всё логически понятно — в <thead> помещаем заголовочную строку или строки, если их несколько. В <tbody> помещаем основное тело таблицы. В <tfoot> помещаем строки-подытоги и пр. Есть несколько нюансов, о которых вы должны знать.

-Если в таблице присутствует <thead>, то <tbody> должен находиться сразу же после него.

-Если в таблице присутствует <tbody>, то в ней не должно быть дочерних строк <tr> (то есть располагающихся прямо в теге <table>, как в примере выше)

-Вы можете использовать несколько <tbody> в одной таблице, например для разделения таблицы на разделы

Пример полноценной таблицы, включающей все описанные выше теги, а также несколько <tbody> (CSS без изменений берём из предыдущего примера):

<br /> See the Pen <a href="https://codepen.io/evgeniychernyy/pen/yLvYmGJ"><br /> Тег tbody</a> by Eugene (<a href="https://codepen.io/evgeniychernyy">@evgeniychernyy</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

И результат отображения примера:

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

<colgroup>,<col>
— (с англ. column group — группа колонок, column — колонка) теги, определяющие вертикальные столбцы в таблице. Например, если мы хотим выделить все столбцы, кроме первого и последнего, нам нужна следующая разметка (атрибут span укажет, сколько столбцов нужно объединить в данный тег <col>):

<br /> See the Pen <a href="https://codepen.io/evgeniychernyy/pen/GRQpVzz"><br /> Тег colgroup</a> by Eugene (<a href="https://codepen.io/evgeniychernyy">@evgeniychernyy</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

Результат выполнения кода:

Как вы уже могли догадаться, атрибут span для тега <col> действует схожим образом, как и colspan для <td>. Он объединяет ячейки. Поскольку <col> определяет вертикальные столбцы, атрибут span указывает количество ячеек по горизонтали, которые будут относиться к данному столбцу. Далее мы определяем класс для тега и добавляем цвет фона через CSS. Первая и последняя колонки <col> у нас остаются по умолчанию.

Атрибут span по умолчанию имеет значение 1, т.е. просто тег <col> подразумевает один вертикальный столбец. Тег <colgroup> является контейнером для тегов <col>, не имеет собственных атрибутов.

Из всех вышеперечисленных табличных тегов только <col> имеет один собственный атрибут span. Все остальные теги могут обладать только глобальными атрибутами. Все их собственные атрибуты официально запрещены и не должны использоваться!

<td>,<th>
— (с англ. table data cell — ячейка таблицы, table head cell — заголовочная ячейка таблицы) теги для определения ячейки таблицы. Может находиться только в теге строки таблицы <tr>. Выше уже было сказано, что <th> предназначен для заголовочных ячеек, а <td> для всех остальных. Заголовочными ячейками могут быть не только ячейки в первой строке таблицы. Ячейки из примера выше с фамилиями учеников Иванов С.В. и Петров А.Е. также являются заголовочными (в контексте строки) и поэтому могут быть описаны не как <td>, а как <th>.

Теги, помимо глобальных, имеют собственные атрибуты:

colspan
— указывает количество ячеек для объединения по горизонтали. По умолчанию значение 1.

rowspan
— указывает количество ячеек для объединения по вертикали. По умолчанию значение 1. Значение 0 укажет, что объединение будет выполняться до самого низа таблицы.

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

                
                <table>
   <caption>
       Список участников соревнований
   </caption>
   <tr>
    <td id="name">Имя</td>
    <td id="surname">Фамилия</td>
    <td id="tel">Телефон</td>
   </tr>
   <tr>
    <td headers="name">Леонид</td>
    <td headers="surname">Федорович</td>
    <td headers="tel">+79991234567</td>
   </tr>
</table>

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

Вернёмся к атрибутам colspan, rowspan и прежнему примеру с расписанием уроков. Предположим, что у одного класса математика будет продолжаться два урока подряд, а во вторник оба класса будут иметь общий урок по биологии. Тогда нам нужно объединить ячейки по горизонтали и по вертикали, а соседние ячейки справа и в строке ниже — удалить:

                
                <table>
    <caption>Расписание уроков</caption>
    <thead>
        <tr>
            <th>Класс</th>
            <th>9-00</th>
            <th>9-50</th>
            <th>10-40</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="4">Понедельник</th>
        </tr>
        <tr>
            <td>7а</td>
            <td>Русский язык</td>
            <td colspan="2">Математика</td>
        </tr>
        <tr>
            <td>8б</td>
            <td>Литература</td>
            <td>Русский язык</td>
            <td>Математика</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="4">Вторник</th>
        </tr>
        <tr>
            <td>7а</td>
            <td>Геометрия</td>
            <td rowspan="2">Биология</td>
            <td>География</td>
        </tr>
        <tr>
            <td>8б</td>
            <td>Биология</td>
            <td>География</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Всего уроков:</td>
            <td colspan="2">12</td>
        </tr>
    </tfoot>
</table>

С атрибутом colspan всё довольно просто — указываем, сколько ячеек объединить в строке, а лишние теги <td>\<th> по соседству удаляем. Аналогично и с rowspan, вот только мы удаляем ячейки из строки или нескольких строк ниже. Если бы мы объединяли три ячейки по вертикали, то соответственно в двух последующих строках должно быть меньше ячеек, и т.д.

У <th> есть ещё два атрибута, которые относятся к доступности. Обратите внимание, что <td> не имеет этих атрибутов!

abbr
— содержит дополнительное сокращённое описание ячейки. Речевые браузеры могут озвучивать его непосредственно перед чтением содержимого ячейки.

scope
— описывает, для каких данных текущая ячейка является заголовком. Дело в том, что в сложных таблицах с многочисленными объединениями ячеек по горизонтали и вертикали речевые браузеры не всегда верно могут определить, с какими заголовками связаны данные ячейки. Именно для подобного уточнения и нужен этот атрибут. Он может принимать значения:

row — для ячеек, находящихся в начале строки и являющихся заголовками для строк.
col — для ячеек, находящихся в заголовке столбца
rowgroup — для ячеек, находящихся в начале строки и являющихся заголовками для нескольких строк
colgroup — для ячеек, находящихся в заголовке столбца и являющихся заголовками для нескольких столбцов

Пример кода:

                
                <table>
   <caption>
       Список участников соревнований
   </caption>
   <tr>
    <th scope="col">Имя</td>
    <th scope="col">Фамилия</td>
    <th scope="col">Телефон</td>
   </tr>
   <tr>
    <th scope="row">Леонид</td>
    <td >Федорович</td>
    <td >+79991234567</td>
   </tr>
   <tr>
    <th scope="row">Афанасий</td>
    <td >Стрелец</td>
    <td >+79997654321</td>
   </tr>
</table>

Обратите внимание, что заголовочные ячейки и в столбцах и в строках описаны тегом <th>. Для ячеек в первой строке (заголовочной) определено, что они описывают заголовки к столбцам, а затем в каждой строке первая ячейка является также заголовком, но уже непосредственно в конкретной строке.

Такие подсказки следует описывать для простых таблиц. Для сложных используйте атрибут headers.

На самом деле разработчики не создают таблицы «вручную», т.е. мы не пишем 10 тегов <tr>, затем в каждой по 5 <td> и пр., а используем генераторы таблиц, которые позволяют нам быстро и просто при помощи визуального редактирования создать необходимую HTML разметку. Эти генераторы сами свяжут ячейки при помощи атрибутов нужным нам образом. Такие генераторы вы можете найти в поиске по запросу «генератор таблиц html», вот пример одного из них.

Домашнее задание к уроку

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