Відмінності між версіями «7 Таблиці»

Поточна версія на 11:24, 20 червня 2013

У HTML є потужний інструмент відображення інформації, структурованої у вигляді таблиць. Для цього передбачено десяток структурних тегів. Найпростіша таблиця складається з елемента table, що включає по одному або кілька елементів tr, th і td.

Якщо необхідно відобразити опис таблиці, то його можна помістити в елемент caption, наявний відразу за відкриваючим тегом table. Далі послідовно розташовуються рядки таблиці, що позначаються тегом tr. Кожен рядок містить в собі комірку th або td, формуючи таким чином стовпці таблиці.

Елементи th позначають комірки із заголовками стовпців або рядків. Вміст їх за замовчуванням відображається браузерами жирним накресленням і центрується. Тег td призначений для всіх інших комірок з даними. Наявність заголовків th не є обов'язковим, але в таблиці повинна бути хоча б один рядок з однією коміркою.

За допомогою атрибуту border елемента table можна визначити, чи будуть комірки таблиці обведені рамкою чи ні.

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

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

Атрибути таблиці

border - задає ширину рамки таблиці в пікселях.

width в тегу table задає ширину таблиці; величина може задаватися або в пікселях, або у відсотках від ширини вікна браузеру.

height в тегу table задає висоту таблиці; величина може задаватися або в пікселях, або у відсотках від висоти вікна браузеру.

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

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

cellspacing - задає відстань між кордонами елементів таблиці. Досить часто цей атрибут встановлюють рівним нулю.

bordercolor - визначає колір рамки таблиці.

bgcolor - задає колір фону таблиці.

colspan - використовується для об'єднання сусідніх клітинки що знаходяться в одному рядку таблиці.

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

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

У тегах tr, і td, також можна використовувати атрибут align, але на відміну від тега table, дія атрибуту в цьому тегу поширюватиметься на вміст клітинок рядка або однієї клітинки - вона управлятиме вирівнюванням вмісту. Атрибут align в цьому випадку може набувати наступних значень:

left - вирівнює вміст по лівому краю елементу таблиці (використовується за умовчанням);

center - вирівнює вміст по центру елементу таблиці;

right - вирівнює вміст по правому краю елементу таблиці;

justify - вирівнює вміст абзацу по обох краях елементу таблиці (підтримується не всіма браузерами).

У тегах tr і td також можна використовувати чудовий атрибут valign, який управляє вертикальним вирівнюванням вмістом рядків і елементів таблиці. Атрибут valign може набувати наступних значень:

top - вирівнює вміст по верхньому краю комірки таблиці;

middle - вирівнює вміст посерединікомірки таблиці;

bottom - вирівнює вміст по нижньому краю комірки таблиці.

Приклад створення таблиці в html:

<table>
 <tr>
  <td>Volcano Name</td>
  <td>Location</td>
  <td>Last Major Eruption</td>
  <td>Type of Eruption</td>
 </tr>
 <tr>
  <td>Mt. Lassen</td>
  <td>California</td>
  <td>1914-17</td>
  <td>Explosive Eruption</td>
 </tr>
 <tr>
  <td>Mt. Hood</td>
  <td>Oregon</td>
  <td>1790s</td>
  <td>Pyroclastic flows and Mudflows</td>
 </tr>
 <tr>
  <td>Mt .St. Helens</td>
  <td>Washington</td>
  <td>1980</td>
  <td>Explosive Eruption</td>
 </tr>
</table>