Для створення таблиці використовується елемент table. Вміст таблиці заповнюється рядок за рядком.
Для створення початку рядку застосовується тег <tr> (від "table row", що означає "рядок таблиці"), за ним слідує по одному для кожної комірки в тому рядку декілька елементів td (від "table data", що означає "дані таблиці") . Та в кінці рядку використовується закриваючий тег </tr>.
Для створення заголовку для колонки або рядку використовується елемент th. Цей елемент не є обов'язковим для таблиці: замість нього можна використовувати вищезазначений елемент td. Однак текст елементу th відображається інакше, ніж інші осередки таблиці. Також даний елемент є корисним для користувачів, які використовують скрінрідери, а також th покращує здатність пошукових систем індексувати сторінки. Таким чином, є сенс використовувати саме цей елемент для заголовків таблиці.
На що треба звернути увагу. Ми не бачимо елементів стовпців. Кількість стовпців у таблиці визначається кількістю комірок у кожному рядку. Це одна з речей, які роблять таблиці HTML потенційно складними. З рядками легко — якщо ви хочете, щоб таблиця мала три рядки, просто використовуйте три елементи tr. В той же час для таблиці з чотирма стовпцями потрібно переконатися, що кожен рядок має чотири td або th елементи. Навіть, якщо осередок не має вмісту, все одно необхідно використовувати td або th елементи для наявності порожньої комірки, інакше таблиця буде відображена неправильно.
Нижче приведений приклад таблиці із використанням вищерозглянутих елементів її базової структури.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Іноді вам можуть знадобитися записи в таблиці для розтягування у більш ніж одному стовпці. В даному випадку використовується атрибут colspan, який вказує, скільки стовпців цей осередок повинен пройти поперек. Colspan може бути використаний в елемені th або td. Приведемо наступний приклад:
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
В даному прикладі можна побачити, що в другому рядку осередок проходить через дві колонки, а в третьому — через три. Другий та третій рядки мають менше td елементів, аніж є колонок. Так необхідно робити через те, що, коли осередок розтягується більше ніж на одну колонку, td або th осередки, які б були в місцях більш широких осередків, не включаються у код.
Вам також можуть знадобитися записи в таблиці, які розтягуються на два рядки. Для цього в елементах td або th застосовується атрибут rowspan. Даний атрибут вказує, відповідно, скільки рядків повинен охоплювати осередок. З таким атрибутом діє аналогічний принцип зменшення кількості елементів, як і в попередньому прикладі, тільки тут зменшується кількість tr елементів. Нижче приведений приклад коду із застосуванням даного атрибуту.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Існує три елементи, які допомагають розрізнити основний вміст таблиці на перший і останній рядки. Ці елементи допомагають людям, які використовують скрінрідери, а також дозволяють стилізувати ці секції іншим способом, ніж решту таблиці. Заголовки таких таблиць повинні розташовуватися всередині елемента
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
В секцію "Про нас" додається таблиця, яка складається із базових елементів — th, tr та td. Заголовки групуються в елементі thead. Всі використані елементи розглянуті в блоці з теорією.
В останню колонку таблиці були додані email-адреси робітників. Для того, щоб зробити їх більш доступними, тобто, щоб при натисканні на які відразу відкривалася пошта, можна додати в адресу префікс mailto: , після якого прописується необхідна email-адреса.
See the Pen Сайт_Таблиця by first_code (@maryna_kriukova) on CodePen.
Таким чином, ми розібралися, як створювати таблиці на веб-сторінці.