У HTML є потужний інструмент відображення інформації, структурованої у вигляді таблиць. Для цього передбачено десяток структурних тегів. Найпростіша таблиця складається з елемента <table>, що включає по одному або кілька елементів <tr>, <th> і <td>.
Якщо необхідно відобразити опис таблиці, то його можна помістити в елемент <caption>, наявний відразу за відкриваючим тегом
. Далі послідовно розташовуються рядка таблиці, що позначаються тегом . Кожен рядок містить в собі комірку <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 - вирівнює вміст по нижньому краю ячейки таблиці.
