- Таблиці в Html - елементи Table, Tr, Th, Td
- Table - основний елемент таблиці
- Tr - елемент рядка таблиці в Html
- Td або Th - елементи елементів таблиці в Html
- Caption - заголовок таблиці
- Таблична (застаріла) верстка
- Tbody, Thead і Tfoot - контейнери для рядків в Html таблиці
- Col - задаємо ширину стовпців таблиці
Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Пропоную вашій увазі чергову статтю, яка буде присвячена тому, що з себе представляє таблиця в Html, які теги використовуються для її створення (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), як задати для неї фон і межі, а так само багато що інше.
Незважаючи на те, що таблична верстка сайту ( читайте про сучасну верстку ) В мові 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 . Ну, а при використанні значення Center для Align, вона просто буде вирівняна по центру без всяких обтікання.
За допомогою атрибута 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 дозволяють задати окремий фон (у вигляді кольору або ж картинки) для кожної конкретної комірки:
Nowrap в Td або 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:
<Tr> <td> Звичайна осередок 2-ий рядки </ td> <td rowspan = 2> Об'єднана через Rowspan 2-ий рядки </ td> </ tr>
Ну, і нам залишилося описати тільки третій рядок. Перша осередок цього рядка знову ж нічого особливого не представляє, а ось друга вже була нами описана в другому рядку, а значить тут її вже не буде. Кожну клітинку можна описувати тільки один раз, сподіваюся, це зрозуміло. Т.ч. третій рядок таблиці буде виглядати так:
<Tr> <td> Звичайна в 3-ій рядку </ td> </ tr>
Ну, а тепер об'єднаємо все це в одному коді і подивимося, що вийде:
Власне, вийшло так, як ми планували. Зрозуміло, що складного тут нічого немає - досить зрозуміти логіку роботи атрибутів 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 пропорції, але так само буде впливати і ширина контенту в осередках, а так само ще ряд правил, за якими грає той чи інший браузер.
Удачі вам! До швидких зустрічей на страницах блогу KtoNaNovenkogo.ru
Збірки по темі
Використову для заробітку
А скільки ж буде стовпців?