Вітаю всіх. Сьогодні хочу розповісти вам про те, які є в html теги для таблиці і як їх правильно використовувати для виведення табличних даних. Основних тегів насправді досить мало, але є кілька, про які навіть досвідчені розробники могли забути, так як вони досить рідко використовуються. Загалом, розберемо взагалі все теги для таблиць.
Самі основні теги
Table - це головний загальний контейнер, в який поміщається вся таблиця. Природно, це парний тег, та й взагалі все теги, пов'язані з виведенням таблиць, парні, тому далі я навіть не буду говорити про це. Сам по собі table ніяк не відображається, це просто блок, в який потрібно поміщати ряди і осередки для формування таблиці.
Tr - наступний тег відповідає за створення ряду таблиці. У ряді може перебувати від однієї до нескінченного кількості осередків. Сам тег tr ніяким чином не відображається на сторінці, це лише контейнер для того, щоб заповнювати його осередками.
Th - це така ж осередок, як і td. відрізняється вона лише тим, що текст в ній виводиться жирним шрифтом і по центру. Тобто за допомогою th можна створювати великі осередки, що ви напевно могли спостерігати в таблицях неодноразово.
Власне, це основні теги, які вам потрібно для побудови таблиці. Їх цілком достатньо, але крім них є й інші. Але поки давайте закріпимо на практиці основні і з їх допомогою створимо просту таблицю. Код тут я приводити у вигляді тексту не буду, ось що я набрав в Notepad ++:
Ну а сама отримана таблиця виглядає так:
Як бачите, в ній три ряди по два осередки в кожному, причому в першому ряді текст вирівняний по центру і виділено жирним. Якщо придивитися до html-коду, то ми дійсно використовували всі теги, про які я говорив. Звичайно, щоб таблиця саме так і виглядала, я ще прописав деякі стильові правила, але це вже інша розмова.
додаткові теги
Caption - цей тег створений спеціально для виведення заголовка (назви) таблиці. Його потрібно використовувати, якщо ця назва є і його потрібно вивести над або під таблицею.
Thead - цей тег, як і tr, абсолютно ніяк не змінює зовнішній вигляд таблиці, він може бути використаний скоріше для порядку і ясності в верстці таблиць. Роль цього тега в тому, що він виступає контейнером для шапки таблиці. Тобто в нього можна зробити висновок від одного до скількох завгодно рядів таблиць, які ви віднесете до її шапці.
Tbody - по суті, контейнер для рядів, які формують основну частину або тіло таблиці.
Tfoot - контейнер для останнього ряду / рядів, які можна віднести до підвалу таблиці.
Ось приклад використання цих тегів. Припустимо, вам потрібно зробити таблицю співробітників компанії. Верхній ряд, в якому виводяться назви стовпців, можна зробити висновок в thead. всі ряди з іменами співробітників в tbody. а останні ряди, де можуть бути якісь підсумки і загальна інформація - в tfoot. Знову ж таки, робити це не обов'язково, але в цілому така розмітка поліпшить семантичного таблиці.
Інші маніпуляції і дії з таблицею
Власне, вже знаю і розумію все, що написано тут, ви можете створювати таблицю практично будь-якої складності. Сьогодні їх не варто використовувати для верстки повноцінного сайту, а тільки для виведення безпосередньо табличних даних. Що ж, на цьому у мене поки все. До зустрічі!
Цікаве зі світу сайтобудування
Ви підписалися. Дякую.