Здрастуйте, шановні читачі блогу . Пропоную вашій увазі чергову статтю, яка буде присвячена тому, що з себе представляє таблицю в Html, які теги використовуються для її створення (Tr, Th, Td, Table, Colspan, Cellpadding, Spacing), як задати для неї фон та межі, а так само багато що інше.
Незважаючи на те, що таблична верстка сайту ( читайте про сучасну верстку) в мові Html (тут про нього і валідатор W3C знайдете) планомірно витісняється блокової, знати основні теги і можливості налаштування таблиць все одно треба. Наприклад, у движку форуму SMF застаріла верстка і раніше використовується, і якщо ви захочете внести які-небудь зміни в зовнішній вигляд його сторінок, то ці знання вам допоможуть.
Навіть найпростіша вставка коду лічильника відвідувань може зажадати від вас розуміння принципів побудови таблиць в html. Нагадаю, що ми вже встигли розглянути різні Html форми, а так само вставку картинок і посилань.
Таблиці в Html — елементи Table, Tr, Th, Td
Зараз таблична верстка відійшла не задній план з появою CSS, але тим не менш найчастіше самим зручним способом подання інформації залишається стара добра табличка і знати її основні теги все одно потрібно.
Раніше, ще до впровадження CSS, вебмастера взагалі не могли обійтися без них, бо саме на них базувалася вся верстка сайтів. Використовувалися не тільки базові теги Table, Tr, Th і Td, але так само і весь багатий асортимент допоміжних елементів (Col, Tbody, Caption, Rowspan, Colspan та ін). Ви досі можете зустріти в інтернеті сайти і форуми створені на базі табличної верстки, що може послужити вам додатковим стимулом до вивчення основ їх побудови.
Таблиці в мові Html є особливим елементом, бо по своїй суті елемент Table є блочним, але при цьому він не займає весь доступний йому по ширині простір, як це роблять інші блокові елементи. По ширині він займає лише той простір, який необхідно для розміщення вмісту — ні більше, ні менше.
Хоча, при цьому тег Table у всьому іншому буде вести себе в точності, як блочний елемент. Наприклад, йдуть в коді один за одним таблички будуть на веб розташовуватися один під одним, навіть якщо їх розмір дозволив би їм стояти в одному рядку. Іншою особливістю є те, що вони мають досить складну структуру, в якій легко можна заплутатися.
Вони формуються за таким принципом. Вся таблиця обрамляється відкриваючим і закриваючим тегами Table, всередині яких з допомогою Tr створюються її рядка, наприклад, так:
А ось вже всередині Tr створюються осередки з допомогою Td. Так само вони можуть створюватися і з допомогою Th, причому, відмінність цих осередків від створених з допомогою елементів Td буде тільки чисто візуальним. Функціонально елементи Td і Th працюють однаково.
Але вміст (контент) клітинки, створеної за допомогою тега Td, буде вирівняно по лівому краю, а вміст комірки, утвореної за допомогою Th, буде вирівняно по центру і до того ж виділено жирним шрифтом використовуваного шрифту. Самі по собі елементи Th були введені саме для того, щоб робити заголовки стовпців і рядків таблиці.
І саме всередині осередків Td чи Th знаходиться контент. Все, що ви бачите на веб всередині таблиці, буде знаходитися саме всередині комірок, які формуються відкривають і закривають тегами Td чи Th:
Але саме по собі створення табличок відбувається порядково — відкриваємо Tr, а потім закриваємо Tr. Скільки у вас буде таких пар елементів Tr, стільки рядків ви отримаєте. А скільки ж буде стовпців?
Рівно стільки, скільки ви створите в кожному рядку (Tr) осередків (Td чи Th). Якщо ви хочете зробити просту і симетричну табличку (див. малюнок вище), то потрібно робити кількість комірок (Td чи Th) в кожній сходинці однаковим.
Отже, таблиці Html формуються порядково — Tr відповідають за формування рядків, а Td чи Th — за формування стовпців. Що примітно, всередині Td чи Th можна вставляти абсолютно будь-який контент — текст, рядкові або ж блокові елементи (нумеровані або марковані списки (UL або OL), зображення з допомогою img і його всіляких атрибутів, заголовки, абзаци) і т. п.
Т. о. виходить, що не може бути таблички в Html коді, яка б складалася менше, ніж з трьох елементів — Table, Tr, Td (або Th).
Table — основний елемент таблиці
Давайте почнемо розгляд з тега Table, а саме з атрибутів, які у нього існують:
Насправді це не всі атрибути, а тільки найбільш актуальні та вживані на даний момент. Максимально докладну інформацію по всіляких атрибутів тега Table, а так само і будь-якого іншого елемента мови гіпертекстової розмітки, ви можете отримати на сторінках Html валідатора W3C.
Т. к. таблиця є блоковим елементом, який не прагне зайняти вільне місце по ширині, то значить ми зможемо застосувати горизонтальне вирівнювання до тегу Table за допомогою атрибута Align.
Але тут не все так просто, бо застосування значень left і right у Align призведе не до вирівнювання нашої таблички по лівому або правому краю, а до обтеканию її текстом, в повній аналогії з тим, як ми це бачили під час обтікання зображення текстом в html. Ну, а при використанні значення Align Center, вона просто буде вирівняна по центру без всяких обтеканий.
За допомогою атрибуту Width можна задати ширину таблиці, при цьому можна використовувати як абсолютні значення в пікселях, так і відносні (у відсотках (100% буде відповідати усього доступного простору по ширині).
Йдемо далі. Cellpadding дозволяє задати відступ контенту в клітинках (Td чи Th) від її країв (по всіх чотирьох сторонах одночасно), а Cellspacing дозволяє задати відстань між сусідніми комірками таблиці в пікселях (за замовчуванням використовується значення в два пікселя). Думаю, що ідея зрозуміла, але все ж наочніше буде показати це на прикладі:
Такі атрибути тега Table відповідають за фон нашої таблиці — це елементи Bgcolor і Background. Як ви, напевно, пам’ятаєте, з допомогою Background (який, до речі, використовується тільки в тегу Body і елементах — Table, Tr, Th або Td) можна буде вибрати в якості фону будь-яку картинку з файлу, шлях до якого буде вказано значення цього атрибута.
Цією картинкою, як плиткою, буде застелена вся веб сторінка (у разі тега Body) або ж вся таблиця (у разі Table), наприклад, так:
При використанні атрибута Bgcolor в Table необхідно буде вказати в якості його значення той колір, яким ви хочете залити вашу таблицю. Про те, як задаються кольори в Html дивіться за наведеним посиланням.
Йдемо далі. На черзі у нас атрибут Border, який відповідає за формування рамки. Тут є тонкощі в поясненні промальовування рамок, але для простоти можна сказати, що рамка буде малюватися навколо осередків і навколо самої таблиці. У Border у вас буде можливість задати товщину цієї рамки в пікселях. За замовчуванням рамка не малюється (border=0).
Але слід враховувати, що в Html рамка таблиці є рельєфною. Вона буде мати кольору світлої і темної сторони, які з’являються ніби від падаючого з верхнього кута екрану світла. У зв’язку з цим слід враховувати, що в Border ви задаєте ширину не всієї рамки. До цієї товщині будуть ще додані світла і темна сторони. Загалом, трохи заплутано, але це треба дивитися саме на прикладі.
З елементом Table будемо вважати, що закінчили і пора переходити до наступного. Особливість Tr полягає в тому, що він є суто службових і його не видно на вебсторінці. По своїй суті Tr є невидимим контейнером для Td чи Th, які в ньому розташовані.
Tr — елемент рядка таблиці Html
З допомогою тега Tr ми просто маємо всі ув’язнені в ньому комірки (Td чи Th) в одному рядку і все, самого Tr не видно. Звідси випливає важливий висновок — всі атрибути цього тегу застосовуються саме для осередків укладених в цьому контейнері. Найбільш поширені на даний момент атрибути Tr представлені на рисунку:
Align працює в ньому точно так само, як і для абзаців або заголовків здійснюється вирівнювання вмісту у всіх комірках (Td чи Th) цього рядка (Tr) по лівому або правому краю, або ж по центру.
Valign задає вирівнювання по вертикалі контенту у всіх комірках (Td чи Th) цього рядка (Tr). Значення Top, Middle та Bottom задають вирівнювання, відповідно, по верхньому краю, по центру і по нижньому краю. За замовчуванням використовується вирівнювання по середині висоти — Middle.
Значення Baseline задає вирівнювання тексту у Td чи Th даної рядки по базовій лінії шрифтів. Це може бути зручно, коли у вас в різних осередках текст має різний розмір шрифту, а вирівнювання Baseline в Valign зробить таку таблицю юзабельной для читачів (на мій погляд):
По базовій лінії шрифтів будуть вирівнюватися тільки перші рядки контенту в клітинках (Td чи Th), а всі інші рядки контенту будуть розташовані як вийде.
Можна ще використовувати атрибут Bgcolor в тезі Tr, заливаючи ці рядки потрібним вам кольором фону. Т. о. всі клітинки в цій сходинці залиті обраним вами кольором:
Як ви можете бачити, кольором фону заливаються саме Td чи Th всередині цього елемента Tr, бо саму сходинку в табличці не видно.
Td чи Th — елементи комірок таблиці в Html
Ну, а тепер давайте перейдемо до найважливішого елементу — клітинці, а саме до атрибутів тегів Td і Th, які зараз ще використовуються:
Align і Valign в тегах Td чи Th вказують браузеру, як саме потрібно буде вирівнювати вміст по ширині і висоті, а не у всій сходинці, як ми нещодавно розглядали. Причому, у атрибутів конкретної комірки буде пріоритет перед аналогічними атрибутами рядка.
Тобто у всій рядку вміст комірок може бути вирівняний по правому краю, але в якійсь окремій ви зможете задати вже інше вирівнювання і воно буде мати пріоритет (перебивати) над тим вирівнюванням, яке було задано в тезі Tr.
Widht і Height дозволяють задати висоту і ширину комірки, як в пікселях, так і у відсотках (по ширині). Bgcolor і Background в Html елементах Td чи Th дозволяють задати окремий фон (у вигляді кольору або ж картинки) для кожної конкретної комірки:
В Td Nowrap або Th забороняє перенесення вмісту в комірці на новий рядок, якщо тільки в тексті цього вмісту не зустрінеться тег Br. Тобто в цьому випадку пробільні символи для автоматичного переносу тексту використовуватися не будуть. Напевно, цей атрибут можна розглядати як своєрідний аналог описаного тут нерозривного пробілу в Html.
Ну, ось і дісталися ми з вами до дуже цікавих і, головне, корисних атрибутів — Colspan і Rowspan. Вони означають охоплення. Rowspan — охоплення рядків, а Colspan — охоплення стовпців. Служать вони, відповідно, для об’єднання клітинок у стовпці або рядку.
Якщо ви хочете об’єднати декілька комірок в одному стовпці таблиці, то потрібно буде використовувати Rowspan, т. к. ви охоплюєте кілька рядків однієї клітинки. А якщо хочете об’єднати декілька комірок у рядку, то потрібно буде використовувати Colspan, т. к. охопити однією коміркою вам потрібно декілька стовпців.
Colspan і Rowspan мають значення рівне одиниці, тобто кожна клітинка належить до одному стовпцю і до однієї рядку. Як тільки у вас з’являються об’єднані клітинки, то вони вже починають ставитися до декількох стовпців або декількома рядками (або одночасно і до тих і до інших).
Caption — заголовок таблиці
Існує ще один додатковий елемент, який називається «Html заголовок таблиці» і формується він за допомогою тегів Caption. Цей елемент використовується не більше одного разу (або не використовується взагалі) і ставиться відразу ж після відкриваючого тега Table. Всередині Caption може стояти тільки рядковий контент і ніяких блочних елементів у вигляді заголовків H1, H2, H3, H4, H5, H6) і параграфів (p) там бути не повинно.
Положення заголовок (Caption) можна задати за допомогою атрибута Align. Значення Top і Bottom зададуть розміщення заголовка, відповідно, над і під таблицею. Значення Left і Right зараз не використовуються, оскільки абсолютно по різному працюють в різних браузерах. Про них найкраще буде забути. Тобто за великим рахунком заголовок (Caption) може перебувати тільки під табличкою, або над нею (це значення використовується за замовчуванням):
У загальному випадку, можна навести таку ось блок схему побудови:
Давайте тепер подивимося на прикладі, як можна створити таблицю з різнорозмірними осередками, деякі з яких будуть охоплювати декілька стовпців або рядків. Як ми вже говорили з вами трохи раніше, вони в Html створюються порядково. Давайте будемо при цьому спиратися на макет, який приведений на малюнку, розташованому трохи вище.
Для початку прописуємо відкриваючий тег Table і відразу за ним відкриваємо тег першого рядка Tr. Перша строчка нашої майбутньої таблиці складається з однієї клітинки, яка охоплює відразу два стовпці, тому до тегу цієї комірки треба буде дописати атрибут Colspan=2:
Далі ми закриваємо тег першого рядка (Tr) і відкриваємо тег наступної, яка вже буде мати дві клітинки. Перша комірка другий рядки нічим не примітна і вона буде складатися із звичайних отрывающего або закриває тегів Td чи Th, між якими буде укладено її вміст.
А ось друга комірка другий рядки примітна, бо вона охоплює відразу два рядки і тому нам потрібно буде до її тегу дописати атрибут Rowspan=2:
Ну, і нам залишилося описати лише третій рядок. Перша комірка цього рядка знову ж нічого особливого не представляє, а от друга вже була описана нами у другому рядку, а значить тут її вже не буде. Кожну комірку можна описувати тільки один раз, сподіваюся, це зрозуміло. Т. о. третій рядок таблиці буде виглядати так:
Ну, а тепер об’єднаємо все це в одному коді і подивимося, що вийде:
Власне, вийшло так, як ми планували. Зрозуміло, що складного тут нічого немає — достатньо зрозуміти логіку роботи атрибутів Colspan і Rowspan.
Таблична (застаріла) верстка
Тепер давайте поговоримо про таке поняття, як таблична верстка і чому саме вони в мові гіпертекстової розмітки стали основним інструментом у відсутності CSS (зараз, звичайно ж, повсюдно використовується Div блокова верстка Html і CSS). Справа все в тому, що тільки таблиці дозволяли досить просто і гнучко вирішити основну проблему при верстці сайту — розмістити в один ряд блокові елементи в Html коді.
Як вам вже відомо, блокові елементи при розташуванні один за одним в Html коді будуть розміщуватися один під одним і на вебсторінці. До речі, ті ж самі таблички теж є блочними елементами і щоб поставити їх в один ряд можна скористатися двома способами.
Перший з них полягає в прописуванні до тегу Table першої з табличок атрибута Align зі значенням Left, в результаті чого друга вже стане праворуч від першої і пригорнеться до неї. Прописавши Align=left і в тегу Table другий, ми зможемо поставити в один ряд цілих три штуки.
Але перший спосіб не дозволяє нам відсунути їх один від одного, бо в той час ще не використовувався CSS. Тому найбільш зручним способом розміщення декількох таблиць (або будь-яких інших блочних елементів) в один ряд було створення Table з одним рядком (Tr) і потрібним нам кількістю клітинок (Td чи Th), співмірним з кількістю блочних елементів, які нам потрібно буде розмістити в один ряд.
Отже, для найбільш простого розміщення декількох штук в ряд потрібно буде створити, так звані, вкладені таблиці, коли в одній клітинці в якості контенту вставляється інша:
Тепер до Html елементів, що знаходяться в комірках створеної нами таблиці, можна буде застосовувати всі описані вище атрибути, як для тегів Tr, так і для тегів Td чи Th. Можна буде позиціонувати контент в комірках, задавати потрібні відступи, заливати фоном і т. п.
Тобто тепер без використання CSS (якого раніше не існувало) можна вирівнювати контент (наші блокові елементи), а зробивши рамку таблички невидимою ми зможемо, таким чином, позиціонувати контент на веб сторінці. Наприклад, не складно буде налаштувати трехколоночное подання тексту, ну або взагалі все, що душі завгодно.
Якщо ви відкриєте вихідний код якого-небудь старого сайту, а ще краще форуму, то з великою часткою ймовірності ви побачите там безліч табличок вкладених в інші і так аж до повної плутанини.
Принципи табличної верстки Html дуже прості, але от її реалізація вимагає від вебмастера підвищеної уваги, а велика кількість тегів Table, Tr, Th, Td і їх атрибутів дуже сильно засмічує вихідний код сторінки, що вже саме по собі не дуже здорово. Пошукові системи будуть змушені перелопатити купу непотрібних тегів, щоб дістатися до того контенту, який їм потрібно буде проіндексувати (читайте тут про індексацію сайту і robot txt).
При табличній верстці такі конструкції застосовувалися повсюдно і деякі рішення того часу, які зараз робилися б в два рахунки, вимагали дуже громіздких конструкцій з табличок вкладених один в одного. На Table робилися горизонтальні і вертикальні меню для сайтів, розбивка абзаців з текстами на колонки і багато іншого
Tbody, Thead і Tfoot — контейнери для рядків у таблиці Html
Але давайте знову повернемося до наших баранів і розглянемо ще декілька елементів, які дозволяли раніше (коли ще не було CSS) задавати властивості відразу для великої кількості рядків в тегу Table. Tr самі по собі є невидимими контейнерами для Td чи Th, але крім цього існує ще три типи контейнерів, які у свою чергу служать контейнерами для Tr.
За допомогою них ми зможемо задавати властивості відразу для великої групи рядків, наприклад, заливати їх фоном, призначати потрібне вирівнювання і т. п. Я кажу про такі елементи, як Thead (для шапки), Tbody (для змісту) і Tfoot (для її закінчення). При створенні таблиці спочатку прописується група рядків відноситься до шапці (укладена в теги Thead), потім група рядків відноситься до її закінчення (Tfoot) і тільки потім група рядків відноситься до її основного змісту (Tbody).
В Html таблиці секція Thead може прописуватися тільки один раз або ж її може не бути взагалі. Теж саме стосується і контейнера з елементів Tfoot. А ось хоча б одна секція Tbody обов’язково повинна бути присутня.
Але, наприклад, наведені на цій сторінці таблички прекрасно відображаються, хоча я і не турбувався проставленням відкриває і закриває тегів Tbody. Все дуже просто — браузер при розборі коду сам дописав елементи Tbody, в чому можна переконатися, переглянувши цей самий результуючий код:
Але на практиці, якщо раніше вебмастера робили складні таблиці, то Tbody їм дуже навіть пригождался. Припустимо, що у вас Table на пару тисяч рядків і вам потрібно налаштувати вирівнювання у всіх комірках способом, відмінним від прийнятого за замовчуванням. Без використання Tbody вам би довелося пару тисяч разів додати відповідний атрибут до всіх тегам рядків.
Але можна ж укласти всі ці тисячі рядків в один контейнер Tbody і тільки в ньому прописати потрібний атрибут з потрібним вирівнюванням. Це дуже сильно може розвантажити Html код від непотрібних повторень. Загалом, у простих таблицях елементами Tbody, Thead і Tfoot можна знехтувати, але в складних досі актуально їх використання навіть в наш час, коли є такий потужний інструмент, як CSS.
Col — задаємо ширину стовпців таблиці
Col і Colgroup зараз мають практично однаковий вплив, тому поговоримо про їх використання на прикладі елемента Col. Потрібен він для зручного завдання ширини стовпців і рядків. У Col є два основних атрибута Span і Width, які дозволяють задати різну ширину для стовпців, укладених в теги Col.
Span задає охоплення (розмір контейнера) шляхом зазначення в ньому кількості стовпців, для яких буде застосовуватися зазначена у Width ширина. Наприклад, так:
Тобто для перших двох стовпців таблиці я задав ширину 50 пікселів, для третього стовпця — 200 пікселів, ну а для двох останніх — по 100 пікселів. Все досить просто і зрозуміло, на мій погляд. Але насправді ширина стовпців, задана через елементи Col, це всього лише ваша декларація, бо при зміні розміру вікна браузера ширина стовпців буде змінюватися.
Браузер буде намагатися зберегти зазначені вами в елементах Col пропорції, але так само буде впливати і ширина контенту в комірках, а так само ще кілька правил, за якими грає той чи інший браузер.
Удачі вам! До зустрічей на сторінках блогу
