Дніпропетровський центр
професійно-технічної освіти
державної служби зайнятості
професійно-технічної освіти
державної служби зайнятості
1.4. Створення таблиць
Завдяки універсальності таблиць, великій кількості параметрів, які керують їх виглядом, таблиці надовго стали певним стандартом для верстки веб-сторінок. Таблиця з невидимою границею є немов модульна сітка, в блоках якої зручно розміщувати елементи веб-сторінки. Проте, це не зовсім правильний підхід, адже кожен об'єкт HTML визначено для своїх власних цілей і якщо він використовується не за призначенням, причому всюди, це означає, що альтернатив немає.
Так було довгий час, але з розвитком Каскадних таблиць стилів (CSS), таблиці стали застосовуватись виключно для розміщення табличних даних.
Таблиця складається з рядків і стовпців клітинок, які можуть містити текст і малюнки. Зазвичай таблиці використовуються для впорядкування і представлення даних.
Для додавання таблиці на веб-сторінку використовується тег <table>. Цей елемент служить контейнером для елементів, які визначають вміст таблиці. Будь-яка таблиця складається з рядків і клітинок, які задаються відповідно за допомогою тегів <tr> і <td>. Таблиця повинна містити хоча б одну клітинку. Допускається замість тега <td> використовувати тег <th>. Текст в клітинці, оформленій за допомогою тега <th>, браузер відображає шрифтом жирного накреслення і вирівнює по центру клітинки. В іншому, різниці між клітинками, створеними через теги <td> і <th> немає.
<!DOCTYPE html>
<html>
<head>
<title> тег table </title>
</head>
<body>
<table border = "1" width = "50%" cellpadding = "5">
<tr>
<th> клітинка 1 </th>
<th> клітинка 2 </th>
</tr>
<tr>
<td> клітинка 3 </td>
<td> клітинка 4 </td>
</tr>
</table>
</body>
</html>
Переглянути
Редагувати
Атрибути тега <table>
Той факт, що таблиці застосовуються досить часто і не тільки для відображення табличних даних, зобов'язаний не тільки їх гнучкості і універсальності, а й різноманітності атрибутів тегів <table>, <tr> і <td>. Далі перераховані деякі атрибути тега <table>, які застосовуються найчастіше.
align − задає вирівнювання таблиці по краю вікна браузера. Можна вибрати зі значень left − вирівнювання таблиці по лівому краю, center − по центру і right − по правому краю. Результат буде помітний лише в тому випадку, якщо ширина таблиці не використовує усю доступну область, тобто менша ніж 100% сторінки. Окрім цього, align не тільки встановлює вирівнювання, а й змушує текст обтікати таблицю з вільного боку.Приклад вирівнювання таблиці
<!DOCTYPE html>
<html>
<head>
<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>
Переглянути
Редагувати
У наведеному прикладі створено таблицю з фоном сірого кольору і вирівнюванням по правому краю.bgcolor − встановлює колір фону таблиці.border − встановлює товщину границі в пікселях навколо таблиці. При наявності цього атрибута також відображаються границі між клітинками.cellpadding −
визначає відстань між границею клітинки і її вмістом. Цей атрибут додає порожній простір до клітинки, збільшуючи тим самим її розміри. Без cellpadding текст в таблиці «налипає» на рамку, погіршуючи тим самим його сприйняття. Додавання ж cellpadding дозволяє поліпшити читабельність тексту. При відсутності границь особливого значення цей атрибут не має, але може допомогти, коли потрібно встановити порожній проміжок між клітинками.cellspacing −
задає відстань між зовнішніми границями клітинок. Якщо встановлений атрибут border, товщина границі приймається в розрахунок і входить в загальне значення.cols −
вказує кількість стовпців в таблиці, допомагаючи браузеру в підготовці до її відображення. Без цього атрибута таблиця буде показана тільки після того, як весь її вміст буде завантажено в браузер і проаналізовано. Використання атрибуту cols дозволяє дещо прискорити відображення вмісту таблиці.rules −
повідомляє браузеру, де відображати границю між клітинками. За замовчуванням рамка малюється навколо кожної клітинки, утворюючи тим самим сітку. На додаток можна вказати відображати лінії між колонками (значення cols), рядками (rows) або групами (groups), які визначаються наявністю тегів <thead>, <tfoot>, <tbody>, <colgroup> або <col>. Товщина границі вказується за допомогою атрибута border.width −
задає ширину таблиці. Якщо загальна ширина вмісту перевищує зазначену ширину таблиці, то браузер буде намагатися «втиснутися» в задані розміри за рахунок форматування тексту. У разі, коли це неможливо, наприклад, в таблиці знаходяться зображення, атрибут width буде проігнорований, і нова ширина таблиці буде обчислена на основі її вмісту.Атрибути тега <td>
Кожна клітинка таблиці, яка задається через тег <td>, в свою чергу теж має свої атрибути, частина з яких збігається з атрибутами тега <table>, наприклад, align та
bgcolor, значення яких аналогічні атрибутам тега <table>. Але, використовуючи
атрибут bgcolor для клітинки одночасно з цим же атрибутом таблиці, можна отримати в таблиці різноманітні колірні ефекти.
colspan −
встановлює число клітинок, які повинні бути об'єднані по горизонталі. Цей атрибут має сенс для таблиць, які складаються з декількох стовпців.
Приклад таблиці з горизонтальним об'єднанням клітинок
<!DOCTYPE html>
<html>
<head>
<title> Об'єднання клітинок </title>
</head>
<body>
<table border = "1" width = "50%" cellpadding = "5">
<tr>
<th colspan="2"> клітинка 1 </th>
</tr>
<tr>
<td> клітинка 2 </td>
<td> клітинка 3 </td>
</tr>
</table>
</body>
</html>
Переглянути
Редагувати
У наведеній вище таблиці містяться два рядки і дві колонки, причому верхні горизонтальні клітинки об'єднані за допомогою атрибута colspan.
height − встановлює висоту клітинок. Браузер сам встановлює висоту таблиці і її клітинок, виходячи з їх вмісту. Однак при використанні атрибута height висота клітинок буде змінена. Тут можливі два варіанти. Якщо значення height менше, ніж вміст клітинки, то цей атрибут буде проігнорований. У разі, коли встановлена висота клітинки, яка перевищує її вміст, додається порожній простір по вертикалі.rowspan −
встановлює число клітинок, які повинні бути об'єднані по вертикалі. Цей атрибут має сенс для таблиць, які складаються з декількох рядків.valign −
встановлює вертикальне вирівнювання вмісту клітинки. За замовчуванням вміст клітинки розташовується по її вертикалі в центрі. Можливі значення: top − вирівнювання по верхньому краю рядка, middle − вирівнювання по середині, bottom − вирівнювання по нижньому краю, baseline − вирівнювання по базовій лінії, при цьому відбувається прив'язка вмісту клітинки до однієї лінії.width −
задає ширину клітинки. Сумарне значення ширини всіх клітинок може перевищувати загальну ширину таблиці тільки в тому випадку, якщо вміст клітинки перевищує зазначену ширину.Детальніше про об'єднання клітинок
Для об'єднання двох і більше клітинок в одну використовуються атрибути colspan і rowspan тега <td>. Атрибут colspan встановлює число клітинок, які об'єднуються по горизонталі. Аналогічно працює і атрибут rowspan, з тією лише відмінністю, що об'єднує клітинки по вертикалі. Перед додаванням атрибутів перевірте число клітинок у кожному рядку, щоб не виникло помилок. Так, <td colspan="3"> замінює три клітинки, тому в наступному рядку повинно бути три теги <td> або конструкція виду <td colspan="2"> ... </td> <td> ... </td>. Якщо число клітинок у кожному рядку не співпадатиме, з'являться порожні фантомні клітинки. У наступному прикладі наведено хоча і валідний, але невірний код, в якому якраз проявляється подібна помилка.
Приклад неправильного об'єднання клітинок
<!DOCTYPE html>
<html>
<head>
<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 PUBLIC >
<html>
<head>
<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>
<html>
<head>
<title> Клітинки з висотою </title>
</head>
<body>
<table width = "50%" 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 у даному випадку ігнорується. Це часто виражається в тих таблицях, де явно встановлюється висота клітинок і їх об'єднання по вертикалі. Для спрощення верстки застосовується прийом з вкладеними таблицями.
Суть ідеї проста - в клітинку вкладається ще одна таблиця зі своїми параметрами. Оскільки ці таблиці в якомусь сенсі незалежні, то можна створювати досить цікаві конструкції. Щоб вкладена таблиця займала всю ширину клітинки, їй треба задати ширину 100%.
Приклад використання вкладених таблиць
<!DOCTYPE HTML>
<html>
<head>
<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, але на відміну від нього входить в специфікацію HTML4 і розуміється всіма браузерами.bottom – заголовок розміщується внизу таблиці по її центру.Створення заголовка таблиці
<!DOCTYPE html >
<html>
<head>
<title> Заголовок таблиці </title>
</head>
<body>
<table width = "100%" border = "1"
cellpadding = "4" cellspacing = "0">
<caption> Зміна видобутку ресурсів по роках </caption>
<tr>
<th> </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>
Переглянути
Редагувати
caption? Які його атрибути ви знаєте?