Таблиці в HTML

Категорії статей: HTML ; 11.07.2009

Створюються таблиці тегом <table> із закриваючим тегом </table>. Вміст таблиці формується порядково, а кожен рядок формується послідовно з елементів таблиці. Рядки таблиці створюються тегом <tr>, (</tr>). Елементи таблиці створюються тегом <td>(</td>). Для прикладу давайте створимо просту таблицю, що складається з одного рядка і одного стовпця

Код
<table border="3">
<tr>
<td>
Це таблиця
</td>
</tr>
</table>

Отримаємо в браузері:
Це таблиця


Напевно, Ви звернули увагу на атрибут border, він задає ширину зовнішньої рамки таблиці в пікселях. За відсутності цього атрибуту або при значенні рівному 0, рамка таблиці відображуватися не буде.
Атрибут width в тегу <table> задає ширину таблиці, величина може задаватися або в пікселях, або у відсотках від ширини вікна браузеру. Наприклад

Код
<table border="3"
width="50%">
<tr>
<td>Це перша ячейка таблиці</td>
<td>Це друга ячейка таблиці</td>
</tr>
<tr>
<td>Це третя ячейка таблиці</td>
<td>Це четверта ячейка таблиці</td>
</tr>
</table>

Отримаємо в браузері:

Це перша ячейка таблиці Це друга ячейка таблиці
Це третя ячейка таблиці Це четверта ячейка таблиці

Але тут треба пам'ятати, що браузери можуть вільно відступити від заданої величини ширини таблиці, якщо визнають потрібним (наприклад якщо вміст ячейки(вічка) більший за фактично вказані розміри, то браузер примусово розтягує ячейку щоб показати весь вміст).
Атрибут height в тегу <table> задає висоту таблиці, величина може задаватися або в пікселях, або у відсотках від висоти вікна браузеру. Наприклад

Код
<table border="3"
width="50%" height="200">
<tr>
<td>Це перша ячейка таблиці</td>
<td>Це друга ячейка таблиці</td>
</tr>
<tr>
<td>Це третя ячейка таблиці</td>
<td>Це четверта ячейка таблиці</td>
</tr>
</table>


Атрибут align вирівнює таблицю по лівому краю, по центру і по правому краю вікна браузеру наступними значеннями, відповідно: left, center і right. Наприклад

Код
<table border="2" width="100px" align="center">


Атрибут cellpadding визначає, на яку відстань вміст ячейки відступатиме від кордону ячейки. Зазвичай цей атрибут встановлюють рівним нулю, а відступи роблять за допомогою засобів CSS (каскадних таблиць стилів).
Атрибут cellspacing задає відстань між кордонами елементів таблиці. Досить часто цей атрибут встановлюють рівним нулю. Наприклад

Код
<table border="3" width="90%" align="center" cellpadding="4" cellspacing="0">
<tr>
<td>Ця ячейка в першому рядку таблиці</td>
<td>І ця ячейка в першому рядку таблиці </td>
</tr>
<tr>
<td> Ця ячейка в другому рядку таблиці </td>
<td>І ця ячейка в другому рядку таблиці </td>
</tr>
</table>

Отримаємо в браузері:
Ця ячейка в першому рядку таблиці І ця ячейка в першому рядку таблиці
Ця ячейка в другому рядку таблиці І ця ячейка в другому рядку таблиці

Атрибут bordercolor визначає колір рамки таблиці. Вся рамка буде одного заданого кольору. Для додання об'єму таблиці можна використовувати атрибути bordercolorlight і bordercolordark, задаючі кольори, відповідно, світлої і темної сторін рамки таблиці. Але ці два атрибути підтримуються лише браузером Internet Explorer. Наприклад

Код
<table border="3" bordercolor="#008000">
<table border="3" bordercolorlight="#00FF00" bordercolordark="#000080">


Атрибут bgcolor задає колір фону таблиці, наприклад

Код
<table border="3" width="90%" align="center" cellpadding="4" cellspacing="0" bgcolor="#00FFFF">


Бувають випадки, коли потрібно створити таблицю з ячейками, отриманими шляхом об'єднанням декількох ячейок. Просто не прописати якийсь елемент таблиці не вийти, браузер не відображуватиме на цьому місці нічого (буде порожнє місце, що, погодитеся, нам не підходить). Для коректного відображення таблиці потрібно використовувати наступні атрибути в тегу <td>
colspan - використовується для об'єднання сусідніх ячейок що знаходяться в одному рядку таблиці;
rowspan - використовується для об'єднання сусідніх ячейок що знаходяться в одному стовпці таблиці.
Для кращого розуміння роботи об'єднання елементів таблиці наведу приклади
- об'єднання двох ячейок що знаходяться в одному рядку таблиці

Код
<table border="3">
<tr>
<td>Звичайна ячейка </td><td> Звичайна ячейка </td><td> Звичайна ячейка </td>
</tr><tr>
<td> Звичайна ячейка </td>
<td colspan="2"> Ячейка отримане шляхом об'єднанням двох ячейок</td>
<!-- Третю ячейку в цьому рядку не пишемо -->
</tr><tr>
<td> Звичайна ячейка </td><td> Звичайна ячейка </td><td> Звичайна ячейка </td>
</tr>
</table>

Отримаємо в браузері:
Звичайна ячейка Звичайна ячейка Звичайна ячейка
Звичайна ячейка Ячейка отримане шляхом об'єднанням двох ячейок
Звичайна ячейка Звичайна ячейка Звичайна ячейка

- об'єднання двох ячейок що знаходяться в одному стовпці таблиці

Код
<table border="3">
<tr>
<td>Звичайна ячейка таблиці</td><td> Звичайна ячейка таблиці </td><td> Звичайна ячейка таблиці </td>
</tr><tr>
<td> Звичайна ячейка таблиці </td>
<td rowspan="2">Ячейка, отримана шляхом об'єднанням двох ячейок , що знаходяться в одному стовбці</td>
<td> Звичайна ячейка таблиці </td>
</tr><tr>
<td> Звичайна ячейка таблиці </td>
<!-- Другу ячейку в цьому рядку не пишемо -->
<td> Звичайна ячейка таблиці </td>
</tr>
</table>

Отримаємо в браузері:
Звичайна ячейка таблиці Звичайна ячейка таблиці Звичайна ячейка таблиці
Звичайна ячейка таблиці Ячейка, отримана шляхом об'єднанням двох ячейок , що знаходяться в одному стовбці Звичайна ячейка таблиці
Звичайна ячейка таблиці Звичайна ячейка таблиці

У тегах <tr> і <td> також можна використовувати атрибути оформлення bgcolor, bordercolor, bordercolorlight, bordercolordark. Значення атрибутів поширюватимуться лише на поточний рядок або елемент таблиці.
У тегах <tr> і <td> також можна використовувати атрибут align, але на відміну від тега <table>, дія атрибуту в цьому тегу поширюватиметься на вміст ячейок рядка або однієї ячейки - вона управлятиме вирівнюванням вмісту. Атрибут align в цьому випадку може набувати наступних значень

  • left - вирівнює вміст по лівому краю елементу таблиці (використовується за умовчанням);
  • center- вирівнює вміст по центру елементу таблиці;
  • right - вирівнює вміст по правому краю елементу таблиці;
  • justify - вирівнює вміст абзацу по обох краях елементу таблиці (підтримується не всіма браузерами).
У тегах <tr> і <td> також можна використовувати чудовий атрибут valign, який управляє вертикальним вирівнюванням вмістом рядків і елементів таблиці. Атрибут valign може набувати наступних значень
  • top - вирівнює вміст по верхньому краю ячейки таблиці;
  • middle - вирівнює вміст посередині ячейки таблиці;
  • bottom - вирівнює вміст по нижньому краю ячейки таблиці.
Наприклад

Код
<table border="3" width="50%" height="50%">
<tr align="center" valign="bottom">
<td>111</td>
<td>222</td>
</tr>
<tr>
<td align="right" valign="top">333</td>
<td align="right" valign="middle">444</td>
</tr>
</table>

Отримаємо в браузері:
111 222
333 444


Атрибут width в тегу <td> задає ширину поточного ячейки або в пікселях, або у відсотках від загальної ширини таблиці. Строго кажучи, задати ширину кожного елементу таблиці неможливо, а лише ширину кожного стовпця, оскільки більшість браузерів відображують ячейки в поточному стовпці завжди однієї ширини. Але, як і у випадку і атрибутом width в тегу <table>, треба пам'ятати, що браузери можуть вільно відступити від заданої величини ширини елементу таблиці, якщо визнають потрібним.
В завершення про таблиці, потрібно сказати, що строго кажучи, таблиця складається із заголовка, основного вмісту (тіло таблиці) і заключення(підвал таблиці). Заголовок таблиці позначається тегом <thead>, із закриваючим тегом </thead>; основний вміст позначається тегом <tbody>(</tbody>); підвал таблиці позначається тегом <tfoot> (</tfoot>). При створенні ячейок в заголовку таблиці потрібно використовувати тег <th> замість тега <td>. Текст ячейки створеної тегом <th> вирівнюється по центру і відображується напівжирним зображенням шрифту. Наприклад

Код
<table border="3" width="80%" align="center">
<thead bgcolor="#00FF80">
<tr>
<th>Пошукова система</th>
<th>Url-адреса пошуковї системи</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>Пошукова система Яндекс</td>
<td><a href="http://www.yandex.ru">www.yandex.ru</a></td>
</tr>
<tr>
<td>Пошукова система Google</td>
<td><a href="http://www.google.ru">www.google.ru</a></td>
</tr>
<tr>
<td>Пошукова система Rambler</td>
<td><a href="http://www.rambler.ru">www.rambler.ru</a></td>
</tr>
</tbody>
<tfoot bgcolor="#00FFFF">
<tr>
<td>Всього пошукових систем приведених в таблиці</td>
<td>3</td>
</tr>
</tfoot>
</table>

Отримаємо в браузері:
Пошукова система Url-адреса пошуковї системи
Пошукова система Яндекс www.yandex.ru
Пошукова система Google www.google.ru
Пошукова система Rambler www.rambler.ru
Всього пошукових систем приведених в таблиці 3

Теги <thead>, <tbody> і <tfoot> також можуть містити атрибути bgcolor, align і valign.
Але браузери прекрасно відображують таблиці і без вказівки тегів <thead>, <tbody> і <tfoot>, тому часто дані теги не пишуть.

По зовнішнім джерелам

Комментарии (8) на запись “Таблиці в HTML”

  1. golovko пишет:

    Було дуже цікаво:)

  2. ejnstejn пишет:

    Хотілося б дізнатись чи можна розмістити всередині комірки таблиці відображення іншої хтмл сторінки використовуючи посилання на файл хтмл? ніде не можу знайти теги чи атрибути для такого фінта. якщо комусь відомий такий фокус скиньте матеріал або посилання на ejnstejn@mail.ru

  3. admin пишет:

    Може фреймами? http://htmlbook.ru/html/iframe

  4. mmm пишет:

    не ячейка, а комірка

  5. Andriy пишет:

    поможіть, чому в мене зіскочила табличка....перші комірки гігантські, хоч їхнє значення таке ж як і решти?????

  6. admin пишет:

    Хто ж його знає чому, покажіть код таблиці

  7. пишет:

    як створити сайт з закритим доступом
    щоб інформацію сайту могли бачити тільки
    зареєстровані користувачі
    а заявки на реєстрацію могли підтверджувати
    адміни?

  8. admin пишет:

    Точного рецепту немаю, бо сам такого не робив..
    А взагалі копай в бік CMS (wordpress, джумла і т.п.) з відповідними плагінами. Абож можна у вигляді форуму, там це стандартна фішка.

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.61MB | 0.02Sec ad Google