Як додати таблицю на сайт
- align
- bgcolor
- colspan
- height
- rowspan
- valign
- width
- вирівнювання таблиць
- об'єднання осередків
- Об'єднання осередків по вертикалі і горизонталі
Доброго дня! У цій статті розглянемо як додати таблицю на сайт. На зорі інтернету де то в роках 90-х 20 століття таблиці використовувалися для верстки сайтів. Треба сказати, що тоді сайти були ще не настільки переповнені різними елементами і були зовні простими. Тому тоді здавалося що немає нічого простішого ніж верстка сайтів на основі таблиць.
Але пройшли роки і віяння в дизайні сайтів сильно змінилися і таблиці вже в якості верстки сторінок сайту вже давно не застосовуються, а використовуються за своїм прямим призначенням тобто для відображення різних даних.
Таблиця може складатися з рядків і стовпців на перетині яких є осередки, які містять текст, малюнки, відео та інші дані. Як правило таблиці застосовуються для впорядкування даних і виведення різної інформації.
Для того щоб додати таблицю на сайт є спеціальний тег <table>. Цей елемент є як би батьківським контейнером для інших елементів.
Будь-яка таблиця складається з рядків і стовпців за виодіт рядків відповідає елемент <tr> а за стовпці <td>.
У таблиці повинна бути хоча б одна клітинка. Для шапки таблиці як правило замість <td> використовують <th> це для того щоб текст був вирівняний по центру і був жирного накреслення.
Давайте розглянемо атрибути тега <table>.
застосовується для вирівнювання вмісту таблиці має наступні значення:
встановлює рамку в таблиці значення задається в пікселях.
дозволяє задати внутрішні відступи в осередках таблиці, якщо не вказувати то текст буде прилипати до країв таблиці.
Задає відстань між зовнішніми кордонами осередків. Якщо встановлений атрибут border, товщина кордону приймається в розрахунок і входить в загальне значення.
Даний атрибут вказує кількість стовпців в таблиці.
Дозволяє задати ширину таблиці. Якщо не вказувати то ширина таблиці задається по вмісту.
align
Дозволяє задати вирівнювання комірки по горизонталі. Приймає значення: left - вирівнює по лівому краю, center - по центру і right - по правому краю.
bgcolor
Задає колір фону комірки.
colspan
Дозволяє об'єднати осередки по горизонталі. У цьому атрибуті треба вказати кількість осередків для об'єднання і при цьому видалити на одну клітинку менше ніж ви поєднуєте. Наприклад поєднуєте три осередки, тоді 2 осередки видаліть.
height
Даний атрибут задає висоту комірки. Найчастіше висоту комірки можна не вказувати браузер сам обчислює висоту по вмісту.
rowspan
Дозволяє об'єднувати осередки по вертикалі при цьому треба вказати число поєднуваних осередків.
valign
Встановлює вертикальне вирівнювання в осередку. За умовчанням вміст осередку розташовується по її вертикалі в центрі. Приймає такі значення: top - вирівнювання по верхньому краю рядка, middle - вирівнювання по середині, bottom - вирівнювання по нижньому краю, baseline - вирівнювання по базовій лінії.
width
Дозволяє задати ширину елементу таблиці.
вирівнювання таблиць
Для того щоб вирівнювати таблицю використовується атрибут align тега table. Причому результат буде помітний лише в тому випадку якщо таблиця не займає всієї ширини сторінки.
Вирівнювання таблиці по правому краю
<! DOCTYPE HTML> <html> <head> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Вирівнювання таблиці </ title> </ head> < body> <table width = "200" bgcolor = "# c0c0c0" cellspacing = "0" cellpadding = "5" border = "1" align = "right"> <tr> <td> Вміст таблиці </ td> </ tr> </ table> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </ p> </ body> </ html>переглянути приклад
об'єднання осередків
Для того щоб об'єднати дві і більше осередків в одну використовуються атрибути colspan і rowspan тега <td>. Атрибут colspan встановлює число осередків об'єднуються по горизонталі. Аналогічно працює і атрибут rowspan, з тією лише відмінністю, що об'єднує осередки по вертикалі. Перед додаванням атрибутів перевірте число осередків у кожному рядку, щоб не виникло помилок. Так, <td colspan = "3"> замінює три осередки, тому в наступному рядку повинно бути три тега <td> або конструкція виду <td colspan = "2"> ... </ td> <td> ... </ td>. Якщо число осередків у кожному рядку не співпадатиме, з'являться порожні фантомні осередки. У прикладі 12.3 наведено хоча і валідний, але невірний код, в якому якраз проявляється подібна помилка.
Неправильне об'єднання осередків
<! DOCTYPE HTML "> <html> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "> <title> Неправильне використання colspan </ title> </ head> <body> <table border =" 1 "cellpadding =" 5 "width =" 100% "> <tr> <td colspan = "2"> Осередок 1 </ td> <td> Осередок 2 </ td> </ tr> <tr> <td> Осередок 3 </ td> <td> Осередок 4 </ td> </ tr> </ table> </ body> </ html>переглянути приклад
У першому рядку прикладу задано три осередки, дві з них об'єднані за допомогою атрибута colspan, а у другому рядку додано лише два осередки. Через це виникає додаткова осередок, яка відображається в браузері.
Об'єднання осередків по вертикалі і горизонталі
<! DOCTYPE HTML "> <html> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "> <title> Об'єднання осередків </ title> </ head> <body> <table border =" 1 "cellpadding =" 4 "cellspacing =" 0 "> <tr> <td rowspan =" 2 "> Браузер </ td> <th colspan =" 2 "> Internet Explorer </ th> <th colspan =" 3 "> Opera </ th> <th colspan =" 2 "> Firefox </ th> </ tr > <tr> <th> 6.0 </ th> <th> 7.0 </ th> <th> 7.0 </ th> <th> 8.0 </ th> <th> 9.0 </ th> <th> 1.0 </ th> <th> 2.0 </ th> </ tr> <tr align = "center"> <td> Підтримується </ td> <td> Ні </ td> <td> Так </ td> <td> Немає </ td> <td> Так </ td> <td> Так </ td> <td> Так </ td> <td> Так </ td> </ tr> </ table> </ body> </ html>переглянути приклад
В даній таблиці встановлено вісім колонок і три рядки. Частина осередків з написами «Internet Explorer», «Opera» і «Firefox» об'єднані де по дві, а де і по три осередки. В осередку з написом «Браузер» застосовано об'єднання по вертикалі.
За замовчуванням таблиця формується у вигляді сітки, при цьому в кожному рядку таблиці міститься однакова кількість осередків. Такий варіант цілком підходить для формування простих таблиць, але абсолютно не годиться для тих випадків, коли має бути зроблено складну таблицю. У подібних ситуаціях застосовуються два основні методи: об'єднання осередків і вкладені таблиці.
Об'єднання осередків має деякі недоліки, тому цей метод створення таблиць можна використовувати повсюдно.
Явно задана висота осередку
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Об'єднання осередків </ title> </ head> <body> <table width = "100%" border = "1" cellpadding = "4" cellspacing = "0"> <tr> <td width = "100" valign = "top"> Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat. </ Td> <td rowspan = "2" valign = "top"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. </ Td> </ tr> <tr> <td height = "40"> Lorem ipsum </ td> </ tr > </ table> </ body> </ html>переглянути приклад
Ліва нижня осередок згідно з кодом HTML має висоту 40 пікселів, але оскільки висота вмісту правої колонки більше, ніж вміст лівої колонки, то висота осередку змінюється. Виходить, що атрибут height в даному випадку ігнорується. Зауважимо, що дана особливість проявляється тільки в браузері Opera, а й інші браузери можуть відображати складні таблиці з помилками. Це часто виражається в тих таблицях, де явно встановлюється висота осередків і їх об'єднання по вертикалі. Для спрощення верстки застосовується прийом з вкладеними таблицями.
Суть ідеї проста - в клітинку вкладається ще одна таблиця зі своїми параметрами. Оскільки ці таблиці в якомусь сенсі незалежні, то можна створювати досить химерні конструкції. Щоб вкладена таблиця займала всю ширину осередку, таблиці треба задати ширину 100%.
вкладені таблиці
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Вкладені таблиці </ title> </ head> <body> <table width = "100%" border = "0" cellpadding = "5" cellspacing = "0"> <tr> <td width = "150" valign = "top" bgcolor = "# f0f0f0"> <table width = "100%" cellpadding = "2" cellspacing = "1 "> <tr> <td bgcolor =" # ffffff "> Lorem </ td> </ tr> <tr> <td bgcolor =" # ffffff "> Ipsum </ td> </ tr> <tr> <td bgcolor = "# ffffff"> Dolor </ td> </ tr> <tr> <td bgcolor = "# ffffff"> Sit </ td> </ tr> <tr> <td bgcolor = "# ffffff"> Amet < / td> </ tr> </ table> </ td> <td valign = "top" bgcolor = "# ffffee"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </ Td> </ tr> </ table> </ body> </ html>переглянути приклад
В даному макеті за допомогою таблиці створюється дві колонки, причому ліва колонка має фіксовану ширину 150 пікселів. Щоб створити щось на зразок навігації, всередину осередки додана ще одна таблиця з шириною 100%.
При великій кількості таблиць на сторінці кожної з них зручно задати заголовок, що містить назву таблиці і її опис. Для цієї мети в HTML існує спеціальний тег <caption>, який встановлює текст і його положення щодо таблиці. Найпростіше розміщувати текст по центру таблиці зверху або знизу від неї, в інших випадках браузери по різному інтерпретують атрибути тега <caption>, через що результат виходить неоднаковий. За замовчуванням заголовок поміщається зверху таблиці по центру, його ширина не перевищує ширини таблиці і в разі довгого тексту він автоматично переноситься на новий рядок. Для зміни положення заголовка у тега <caption> існує атрибут align, який може набувати таких значень.
- left - вирівнює заголовок по лівому краю таблиці. Браузер Firefox має текст збоку від таблиці, Internet Explorer і Opera розташовують заголовок зверху, вирівнюючи його по лівому краю.
- right - в браузері Internet Explorer і Opera має заголовок зверху таблиці і вирівнює його по правому краю таблиці. Firefox відображає заголовок праворуч від таблиці.
- center - заголовок розташовується зверху таблиці по її центру. Таке розташування задано в браузерах за замовчуванням.
- top - результат аналогічний дії атрибута center, але на відміну від нього входить в специфікацію HTML 4 і розуміється всіма браузерами.
- bottom - заголовок розміщується внизу таблиці по її центру.
Створення заголовка таблиці
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Заголовок таблиці </ title> </ head> <body> <table width = "100%" border = "1" cellpadding = "4" cellspacing = "0"> <caption> Зміна видобутку ресурсів по роках </ caption> <tr> <th> & nbsp; </ th> <th> 2003 </ th> <th> 2004 </ th > <th> 2005 </ th> </ tr> <tr> <td> Нафта </ td> <td> 43 </ td> <td> 51 </ td> <td> 79 </ td> </ tr> <tr> <td> Золото </ td> <td> 29 </ td> <td> 34 </ td> <td> 48 </ td> </ tr> <tr> <td> Дерево </ td> <td> 38 </ td> <td> 57 </ td> <td> 36 </ td> </ tr> </ table> </ body> </ html>переглянути приклад
Дивіться видеоурок по створенню таблиць