Таблиця - це сітка з осередків, що формують рядки та стовпці. Прикладами таблиць можуть бути різні фінансові звіти, результати спортивних змагань, календарі, розклади тощо. Окремий блок сітки називається осередком таблиці. Осередки таблиці можуть містити найрізноманітнішу інформацію, включаючи числа, текст, і навіть відео та аудіо об'єкти. За допомогою мови HTMLтаблиці пишуться рядково.

Елемент

Елемент

Завдання

• Прибрати подвійну рамку таблиці

  За замовчуванням межа таблиці має ефект подвійної рамки, змініть код так, щоб усі лінії цієї рамки стали одинарними.

Кожен рядок таблиці міститься в елементі

Осередок заголовка таблиці міститься в елемент

Кожна комірка даних таблиці міститься в елемент

Найменування таблиці, якщо воно потрібно розміщується всередині елемента

Давайте перейдемо до практичної частини складання таблиці:

До даної таблиці для наочності ми додали атрибут border (кордон) зі значенням "1", яке визначає, що межа повинна відображатись навколо осередків таблиці. Атрибут кордону практично не використовується в HTML, в даному випадку використання CSS було б краще і давало б більш гнучкі можливості. У рамках вивчення HTML ми навчимося грамотно формувати таблиці, а під час вивчення CSS 3у статті " " навчимося їх професійно стилізувати.

Результат нашого прикладу:

Об'єднання стовпців

Об'єднання стовпців в елементах (комірка даних) або (заголовний осередок) допускається виробляти за допомогою атрибуту colspan (при цьому осередок розтягується вправо на задану кількість осередків).

Результат нашого прикладу:

Об'єднання рядків

Об'єднання рядків в елементах або допускається за допомогою атрибуту rowspan (діапазон осередків задається зверху вниз і охоплює кілька рядків – осередок розтягується вниз).

Результат нашого прикладу:

Властивості стовпців

Приклад використання атрибуту span до окремих стовпців таблиці:

Результат нашого прикладу:

Якщо Вам необхідно стилізувати лише один стовпець, достатньо вказати атрибут span всередині елемента , а не всередині елемента :

Результат нашого прикладу:

Поділ таблиці на частини

Наступні HTML тегивикористовуються для поділу таблиці на частини:

• Тег використовується для змісту заголовка групи в таблиці ("шапка таблиці", не плутайте із заголовками).
• Тег використовується для змісту "підвалу" таблиці (футер).
• Тег використовується для змісту "тіла" таблиці (боді).

Елемент повинен бути використаний лише один раз в одній таблиці у наступному контексті: у складі елемента

Елементи

Результат нашого прикладу.

У цій лекції докладно розглядаються принципи застосування таблиць HTML-розмітки. Це і таблична організація тексту, і таблична координатна сітка, і організована таблиці графіка.

Засоби опису таблиць у HTML

У міру розвитку WWW стало зрозуміло, що коштів, закладених у НТМL, недостатньо для якісного відображення різного типудокументів. Недоліком НТМL була відсутність у його складі засобів відображення таблиць. Для цього зазвичай використовувався передформатований текст (тег

), у якому таблиця описувалася символами АSСII.  Але така форма подання таблиць була недостатньо високої якостіта вибивалася із загального стилю документа.  Після введення таблиць в HTML у Web-майстрів з'явився не просто інструмент для розміщення текстових та числових даних, а потужний засіб дизайну для розміщення потрібному місціекран графічних образів та тексту.

Створення таблиць у HTML
Для опису таблиць використовується тег<ТАВLЕ>.  Тег<ТАВLЕ>, як і багато інших, автоматично переводить рядок до та після таблиці.
Створення рядка таблиці - тег<ТR>
Тег<ТR>(Таble Row, рядок таблиці) створює рядок таблиці.  Весь текст, інші теги та атрибути, які потрібно помістити в один рядок, повинні розміщуватись між тегами lt;.
Визначення осередків таблиці - тег<ТD>
Усередині рядка таблиці зазвичай розміщуються осередки з даними.  Кожен осередок, що містить текст або зображення, повинен бути оточений тегами<ТD>.  Число тегів<ТD>у рядку визначає кількість осередків

 

 
Таблиця
 
 

 

 
Якщо у таблиці два теги TR, то в ній два рядки.
 
 

 
Якщо у рядку три теги TD,
 
то в ній
 
три стовпці.
 
 
 


 
Заголовки стовпців таблиці - тег<ТН>
Заголовки для стовпців та рядків таблиці задаються за допомогою тега заголовка<ТН>(Таblе Неаder, заголовок таблиці).  Ці теги подібні<ТD>.  Відмінність полягає в тому, що текст, укладений між тегами<ТН>, автоматично записується жирним шрифтом і за умовчанням розташовується посередині комірки.  Центрування можна скасувати та вирівняти текст по лівому або правому краю.  Якщо скористатися<ТD>з тегом<В>та атрибутом<АLIGN=center>, текст також буде виглядати як заголовок.  Однак слід мати на увазі, що не всі браузери підтримують у таблицях жирний шрифт, тому краще задавати заголовки таблиць за допомогою<ТН>.

 

 

 

 
Заголовок за промовчанням
 
Заголовок може об'єднувати стовпці
 
 

 
Заголовок може бути розташований перед стовпцями
 
Текст чи дані
 
Текст чи дані
 
 

 
Заголовок може об'єднувати рядки
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
 


Використання заголовків таблиці - тег<САРТIОN>
Тег дозволяє створювати заголовки таблиці.  За замовчуванням заголовки центруються і розміщуються або над (<САРТION АLIGN=top>), або під таблицею (<САРТION ALIGN=bottom>).  Заголовок може складатися з будь-якого тексту та зображень.  Текст буде розбитий на рядки, які відповідають ширині таблиці.  Іноді тег<САРТION>використовується для підпису під малюнком.  І тому досить описати таблицю без кордонів.

 

 

 
Заголовок над таблицею
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 
 

 
Заголовок під таблицею
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 


Атрибут NOWRAP
Зазвичай будь-який текст, що не міститься в один рядок осередку таблиці, переходить на наступний рядок.  Однак при використанні атрибуту NOWRAP із тегами<ТН>або<ТD>довжина осередку розширюється настільки, щоб укладений у ній текст помістився в один рядок.
Атрибут СОLSPAN
Теги<ТD>і<ТН>модифікуються за допомогою атрибуту СОLSPAN (Column Span, з'єднання стовпців).  Якщо ви хочете зробити якийсь осередок ширшим, ніж верхній або нижній, можна скористатися атрибутом СОLSPAN, щоб розтягнути його над будь-якою кількістю звичайних осередків.

 

 

 

 

 
Якщо ви хочете зробити якийсь осередок ширшим, ніж верхній або нижній,
 
можна скористатися атрибутом СОLSPAN=2,
 
 

 
щоб розтягнути її над будь-якою кількістю звичайних осередків.
 
 
 


Атрибут ROWSPAN
Атрибут ROWSPAN, який використовується в тегах<ТD>і<ТН>, Подібний до атрибуту СОLSPAN=, тільки він задає число рядків, на які розтягується осередок.  Якщо ви вказали в атрибуті ROWSPAN=s число, більше одиниці, то відповідна кількість рядків повинна знаходитися під коміркою, що розтягується.  Внизу таблиці її розмістити не можна.
Атрибут WIDТН
Атрибут WIDТН застосовується у двох випадках.  Можна помістити його в тег<ТАВLЕ>, щоб дати ширину всієї таблиці, а можна використовувати в тегах<ТD>або<ТН>, щоб встановити ширину осередку або групи осередків.  Ширину можна вказувати у пікселах або у відсотках.  Наприклад, якщо ви задали в тезі<ТАВLЕ>WIDTH=250, ви отримаєте таблицю шириною 250 пікселів, незалежно від розміру сторінки на моніторі.  При завданні WIDТН=50% у тезі<ТАВLЕ>таблиця займатиме половину ширини сторінки за будь-якого розміру зображення на екрані.  Отже, вказуючи ширину таблиці у відсотках, майте на увазі, що якщо користувач має вузьку область перегляду, ваша сторінка може виглядати дещо дивно.  Якщо ви використовуєте пікселі, і таблиця виявляється ширшою за область перегляду, внизу з'явиться смуга прокручування для переміщення вправо і вліво по сторінці.  Залежно від поставлених завдань і той, і інший спосіб завдання ширини таблиці може бути корисним.

 

 

 

 
Текст або дані – ширина 100%
 
 
або 

 

 

 
Текст або дані – ширина 50%
 
 
або 

 

 

 
Текст або дані – ширина 200 пікселів
 
 
або 

 

 

 
Текст або дані – ширина 100 пікселів
 
 


Застосування порожніх осередків
Якщо осередок не містить даних, він не матиме меж.  Якщо потрібно, щоб у комірки були межі, але не було вмісту, необхідно помістити в неї щось, що не буде видно під час перегляду.  Можна скористатися порожнім рядком<ВR>.  Можна навіть встановити порожні стовпці, визначивши їх ширину в пікселах або відносних одиницях і не ввівши в отримані комірки жодних даних.  Цей засіб може бути корисним при розміщенні на сторінці тексту та графіки.
Атрибут СЕLLРАDDING
Цей атрибут визначає ширину порожнього просторуміж вмістом комірки та її межами, тобто задає поля усередині комірки.

 

 

 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 


 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 
 


Атрибути АLIGN та VALIGN
Теги<ТR>, <ТD>і<ТН>можна модифікувати за допомогою атрибутів ALIGN та VALIGN.  Атрибут АLIGN визначає вирівнювання тексту та графіки по горизонталі, тобто по лівому або правому краю, або по центру.  Горизонтальне вирівнювання може бути задано декількома способами:
ALIGN=blееdleftпритискає вміст комірки впритул до лівого краю.
ALIGN = leftвирівнює вміст комірки лівого краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.
АLIGN = сентермає у своєму розпорядженні вміст осередку по центру.
АLIGN = rightвирівнює вміст комірки з правого краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

 

 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 


Атрибут VALIGN здійснює вирівнювання тексту та графіки всередині комірки по вертикалі.  Вертикальне вирівнювання може бути задано декількома способами:
VALIGN=topвирівнює вміст комірки по її верхній межі.
VALIGN=middleцентрує вміст осередку по вертикалі.
VALIGN=bottomвирівнює вміст комірки по її нижній межі.

 

 

 

 

 
Атрибут VALIGN здійснює вирівнювання тексту та графіки всередині комірки по вертикалі.
 
верх,
 
середина,
 
низ.
 
 

 
VALIGN=top Вирівнює вміст комірки по її верхній межі.
 
верх,
 
верх,
 
верх.
 
 

 
VALIGN=middle Центрує вміст осередку по вертикалі.
 
середина,
 
середина,
 
середина.
 
 

 
VALIGN=bottom Вирівнює вміст клітинки по її нижній межі.
 
низ,
 
низ,
 
низ.
 
 
 


Атрибут BORDER
У тезі<ТАВLЕ>часто визначають, як виглядатимуть рамки, тобто лінії, що оточують осередки таблиці та саму таблицю.  Якщо ви не поставите рамку, то отримаєте таблицю без ліній, але простір під них буде відведено.  Того ж результату можна досягти, задавши<ТАВLЕ ВОRDER=0>.  Іноді хочеться зробити кордон товстішим, щоб він краще виділявся.  Можна привернути увагу до малюнку чи тексту задати виключно жирні кордону.  p align="justify"> При створенні вкладених таблиць доводиться робити для різних таблиць кордону різної товщини, щоб їх легше було розрізняти.
Атрибут CELLSPACING
Атрибут СЕLLSPACING визначає ширину проміжків між осередками пікселів.  Якщо цей атрибут не вказано, за замовчуванням задається величина, що дорівнює двом пікселям.  За допомогою атрибуту СЕLLSPACING= можна розміщувати текст та графіку там, де вам потрібно.  Якщо ви хочете залишити порожнє місце, можна вписати в комірку пробіл.

 

 

 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 
 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 
 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 

 
Текст чи дані
 
 
 


Атрибут BGCOLOR
Цей атрибут дозволяє встановити колір тла.  Залежно від того, з яким тегом (TABLE, TR, TD) він застосовується, колір фону може бути встановлений для всієї таблиці, рядка або окремої комірки.  Значення цього атрибута є код RGB або стандартна назва кольору.

 

 

 

 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 

 
Текст чи дані
 
Текст чи дані
 
Текст чи дані
 
 
 


Атрибут BACKGROUND
Цей атрибут визначає фонове зображення для таблиць.  Застосуємо до тегів TABLE та TD.  Його значенням є URL файлу із фоновим зображенням.  Використання цього атрибута розглядається нижче.
Використання таблиць у дизайні сторінки
Таблиці хороші тим, що за бажання можна зробити їх межі невидимими.  Це дозволяє за допомогою тега<ТАВLЕ>красиво розміщувати на сторінці текст та графіку.  Поки тег<ТАВLЕ>залишається єдиним потужним засобом форматування HTML.  Дизайнери Web-сторінок зараз мають практично ту саму свободу щодо використання "порожнього простору", що і творці друкованих сторінок.  Таблиці найкраще допомагають відійти від ієрархічного розміщення тексту на веб-сторінках.
Якщо браузер підтримує таблиці, він зазвичай правильно відображає найцікавіші ефекти, отримані з допомогою

 

 

 

 

 

 
Уральський державний педагогічний університет
 
Ласкаво просимо!
 

 

 
Навчальний курс "Основи WEB-мастерингу"
 
 
 
 
 
 


 
Створення різнокольорових таблиць
Деякі браузери дозволяють відображати кольори.  Є кілька способів розфарбувати таблицю, переважно вони залежить від використовуваного браузера.
Кольорові кордони в Netscape Navigator.  Ви не тільки можете оточити таблицю красивою рамкою, але й задати для неї колір, відмінний від кольорів тексту та фону.  Створіть простий сірий GIF (або будь-який GIF, який ви хотіли б мати як тло) і визначте його в тезі<ВODY>як фон сторінки.  Потім встановіть колір фону сторінки.  В результаті ваш тег<ВОDY>виглядатиме приблизно так:

 
Ви створили подвійне тло - GIF і заданий колір.  В результаті фоновий колір буде видно на всіх межах таблиць та горизонтальних лініях (<НR>).  Незалежно від того, є ваш фоновий GIF сірим чи ні, кольорові лінії та межі таблиць будуть помітно виділятися.  Якщо фоновий GIF не дуже складний, час завантаження сторінки зросте лише небагато.
Завдання
 
Створити таблицю та вказати її параметри (поля та відстань між осередками) через стилі.
 
Рішення
 
Таблиця складається з рядків та стовпців осередків, які можуть містити текст та малюнки.  Для додавання таблиці на веб-сторінку використовується тег 
.  Цей елемент є контейнером для елементів, що визначають вміст таблиці.  Будь-яка таблиця складається з рядків та осередків, які задаються відповідно за допомогою тегів і 
.  Таблиця повинна містити хоча б один осередок (приклад 1).  Допускається замість тега 
використовувати тег 
.  Текст у осередку, оформленому за допомогою тега 
, відображається браузером шрифтом жирного зображення і вирівнюється по центру осередку.  В іншому, різниці між осередками, створеними через теги 
і 
ні.

Приклад 1. Створення таблиці
HTML5 IE Cr Op Sa Fx

 

 
 
 
 
 
 

 

 
Осередок 1
 
Осередок 2
 
 

 
Осередок 3
 
Осередок 4
 
 
 

 
Порядок розташування осередків та його вигляд показано на рис.  1.
 
Мал.  1. Результат створення таблиці з чотирма осередками
 
Атрибут border тега 
допустимо додавати тільки з порожнім значенням ( ) або рівним 1. Усі інші значення не проходять валідацію.
Для керування полями всередині осередків використовується стильове властивість padding, яке додається до селектора td.  Відстань між осередками змінюється властивістю border-spacing (приклад 2), що додається до селектора table, браузер IE розуміє його тільки з версії 8.0.
Приклад 2. Поля всередині осередків
HTML5 CSS 2.1 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 

 
Заголовок 1
Заголовок 2
 
Осередок 3
Осередок 4
 
 

 
Таблиця з полями та відстанню між осередками показана на рис.  2. Аналогічного результату можна досягти за допомогою рамки білого кольору навколо осередків.
 

 
Мал.  2. Поля в осередках таблиці
Таблиці HTML настільки функціональні, що з допомогою них можна верстати цілі сайти (читайте ).  Зараз ми поговоримо про вставку на веб-сторінку нескладних HTML-таблиць, розбираючи лише розмітку, але не торкаючись оформлення, тому що прикрашати таблиці краще за допомогою CSS-стилів.
Теги та атрибути таблиць
Ось основні елементи, які потрібні для створення таблиць:
- контейнер, всередині якого розташовується таблиця (такий, як 

для маркованих або 

для нумерованих списків).
border- атрибут, що визначає товщину рамок.  Замість цього краще використовувати властивість border CSS.


ставить підпис таблиці.  Контейнер можна не використовувати, але якщо ви все-таки вирішили назвати таблицю, то ставте його відразу після тега , поза осередками та рядками.
- парний тег, що містить рядок таблиці (комірки, розташовані одному рівні по горизонталі).
, стільки осередків у ній і буде: один тег - один осередок.
дозволяє групувати стовпці, швидко та не засмічуючи код задавати їм загальні характеристики.  За допомогою контейнера можна відокремлювати логічні частини таблиці одна від одної.  Розміщується після тега 





- Тег, що створює комірку заголовка таблиці.  Зовні її вміст відрізняється від контенту в інших осередках - зазвичай текст усередині 

оглядач виділяє жирним та розміщує по центру.

- контейнер, за допомогою якого створюється простий осередок.  Скільки таких тегів міститиме рядок (тег 




якщо його немає, то після .
використовується для тієї ж мети, що і . може містити але не навпаки.
span- атрибут, що задає кількість стовпців, до яких застосовуються властивості контейнера 
.
, і - контейнери, які дозволяють розділити таблицю відповідно на верхню (заголовки), основну (тіло) та нижню (підсумкову) частини.  У HTML-таблиці послідовність цих тегів така сама, як послідовність контейнерів 
, 
і 

 
Інструменти створення сайтів
 

 
Призначення
Інструмент
 
 

 
Розмітка
HTML
XHTML
 
 

 
Оформлення
CSS
 
 

 
Розробка
PHP
Python
 
 
 

У браузері документ виглядатиме так:
Розберемо, які рядки коду за що відповідають.
- Відкрили таблицю, задаючи їй товщину рамок.
- озаглавили її.
– відкрили рядок.
- Створили осередок з оформленням заголовка.
- створили другий заголовний осередок у рядку.  Параметром colspan вказали, що цей осередок повинен займати по горизонталі два.
– закрили рядок.  Аналогічно створили решту рядків.
- додали другий рядок таблиці вже зі звичайними, а не заголовними, комірками.  Аналогічно вставили наступні рядки та осередки.



Інструменти створення сайтів 




Призначення 


Інструмент 



 

Розмітка 

 HTML 

 XHTML 
 


- Закрили таблицю.




                        
                    
                    

                    

                        

                            
Сподобалася стаття? Поділіться з друзями!
                            
                            

Поділитися у Facebook


                        
                        
                    
                    

                    

                    

                    

                    

                    

                        
Читайте також
                        

                                                             

                                    

                                        

                                             
                                        

                                            Як перевірити ліцензію на медичну діяльність 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            Загальнодоступна інформація та інформація обмеженого доступу 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            Складна фільтрація (розширений фільтр) 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            Пристрій та конструкція, технічні характеристики, технічне обслуговування 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            NET ізольований файл блокування сховища NRE 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            Інструкція з підключення механізмів із IC2 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            Що таке розширення файлу FLAG? 
                                    
                                
                                                             

                                    

                                        

                                             
                                        

                                            Змінні середовища Windows - TEMP та TMP 
                                    
                                
                            
                            
                            
                            
                            
                            
                            
                            
                        
                    
                    

                    

                    
                    


                    


                    

                        

                            

                            
                        
                    
                    

                
                

            
            
        

        
            
        

        

        

        

        
      
    
    

        
Вгору