Відмінності між версіями «7 Таблиці»
Матеріал з Wiki TNEU
Donserg (Обговорення • внесок) м (Захист на 7 Таблиці встановлено ([edit=sysop] (безстроково) [move=sysop] (безстроково))) |
|||
| Рядок 1: | Рядок 1: | ||
| − | Таблиці в | + | У HTML є потужний інструмент відображення інформації, структурованої у вигляді таблиць. Для цього передбачено десяток структурних тегів. Найпростіша таблиця складається з елемента <nowiki><table></nowiki>, що включає по одному або кілька елементів <tr>, <th> і <td>. |
| + | Якщо необхідно відобразити опис таблиці, то його можна помістити в елемент <nowiki><caption></nowiki>, наявний відразу за відкриваючим тегом <table>. Далі послідовно розташовуються рядка таблиці, що позначаються тегом <tr>. Кожен рядок містить в собі комірку <nowiki><th></nowiki> або <nowiki><td></nowiki>, формуючи таким чином стовпці таблиці. | ||
| + | Елементи <nowiki><th></nowiki> позначають комірки з заголовками стовпців або рядків. Вміст їх за замовчуванням відображається браузерами жирним накресленням і центрується. Тег <nowiki><td></nowiki> ж призначений для всіх інших комірок з даними. Наявність заголовків <nowiki><th></nowiki> не є обов'язковим, але в таблиці повинна бути хоча б один рядок з однією коміркою. | ||
| + | За допомогою атрибуту border елемента <nowiki><table</nowiki>> можна визначити, чи будуть комірки таблиці обведені рамкою чи ні. | ||
| + | |||
| + | Таблиці в HTML є одним з найнеобхідніших елементів і самими універсальними засобами форматування картинок і тексту. Є, звичайно, і альтернативні способи, такі як шари наприклад, але це громіздко, тяжко і незручно ... Справа в тому, що всяка бродилка бачить шари по своєму, і для більш менш пристойного відображення шарів необхідно писати довгий і нудний скрипт, та й той не панацея ... У той час, як таблиці, хоч у деяких нюансах нерідко і розходяться, але розбіжність-то мінімально. | ||
Створюються таблиці тегом table із закриваючим тегом /table. Вміст таблиці формується порядково, а кожен рядок формується послідовно з елементів таблиці. Рядки таблиці створюються тегом tr, (/tr). Елементи таблиці створюються тегом td(/td). | Створюються таблиці тегом table із закриваючим тегом /table. Вміст таблиці формується порядково, а кожен рядок формується послідовно з елементів таблиці. Рядки таблиці створюються тегом tr, (/tr). Елементи таблиці створюються тегом td(/td). | ||
| + | |||
Атрибут '''border''' задає ширину рамки таблиці в пікселях. | Атрибут '''border''' задає ширину рамки таблиці в пікселях. | ||
| + | |||
Атрибут '''width''' в тегу table задає ширину таблиці, величина може задаватися або в пікселях, або у відсотках від ширини вікна браузеру. | Атрибут '''width''' в тегу table задає ширину таблиці, величина може задаватися або в пікселях, або у відсотках від ширини вікна браузеру. | ||
| + | |||
Атрибут '''height''' в тегу table задає висоту таблиці, величина може задаватися або в пікселях, або у відсотках від висоти вікна браузеру. | Атрибут '''height''' в тегу table задає висоту таблиці, величина може задаватися або в пікселях, або у відсотках від висоти вікна браузеру. | ||
| + | |||
Атрибут '''align''' вирівнює таблицю по лівому краю, по центру і по правому краю вікна браузеру наступними значеннями, відповідно: left, center і right. | Атрибут '''align''' вирівнює таблицю по лівому краю, по центру і по правому краю вікна браузеру наступними значеннями, відповідно: left, center і right. | ||
| + | |||
Атрибут '''cellpadding''' визначає, на яку відстань вміст клітинки відступатиме від кордону клітинки. Зазвичай цей атрибут встановлюють рівним нулю, а відступи роблять за допомогою засобів CSS. | Атрибут '''cellpadding''' визначає, на яку відстань вміст клітинки відступатиме від кордону клітинки. Зазвичай цей атрибут встановлюють рівним нулю, а відступи роблять за допомогою засобів CSS. | ||
| + | |||
Атрибут '''cellspacing''' задає відстань між кордонами елементів таблиці. Досить часто цей атрибут встановлюють рівним нулю. | Атрибут '''cellspacing''' задає відстань між кордонами елементів таблиці. Досить часто цей атрибут встановлюють рівним нулю. | ||
| + | |||
Атрибут '''bordercolor''' визначає колір рамки таблиці. | Атрибут '''bordercolor''' визначає колір рамки таблиці. | ||
| + | |||
Атрибут '''bgcolor''' задає колір фону таблиці. | Атрибут '''bgcolor''' задає колір фону таблиці. | ||
| + | |||
'''colspan''' - використовується для об'єднання сусідніх клітинки що знаходяться в одному рядку таблиці. | '''colspan''' - використовується для об'єднання сусідніх клітинки що знаходяться в одному рядку таблиці. | ||
| + | |||
'''rowspan''' - використовується для об'єднання сусідніх клітинок що знаходяться в одному стовпці таблиці. | '''rowspan''' - використовується для об'єднання сусідніх клітинок що знаходяться в одному стовпці таблиці. | ||
| + | |||
Атрибут '''width''' в тегу td задає ширину поточного ячейки або в пікселях, або у відсотках від загальної ширини таблиці. | Атрибут '''width''' в тегу td задає ширину поточного ячейки або в пікселях, або у відсотках від загальної ширини таблиці. | ||
| + | |||
У тегах tr, і td, також можна використовувати атрибут align, але на відміну від тега table, дія атрибуту в цьому тегу поширюватиметься на вміст клітинок рядка або однієї клітинки - вона управлятиме вирівнюванням вмісту. Атрибут align в цьому випадку може набувати наступних значень: | У тегах tr, і td, також можна використовувати атрибут align, але на відміну від тега table, дія атрибуту в цьому тегу поширюватиметься на вміст клітинок рядка або однієї клітинки - вона управлятиме вирівнюванням вмісту. Атрибут align в цьому випадку може набувати наступних значень: | ||
'''left''' - вирівнює вміст по лівому краю елементу таблиці (використовується за умовчанням); | '''left''' - вирівнює вміст по лівому краю елементу таблиці (використовується за умовчанням); | ||
| + | |||
'''center''' - вирівнює вміст по центру елементу таблиці; | '''center''' - вирівнює вміст по центру елементу таблиці; | ||
| + | |||
'''right''' - вирівнює вміст по правому краю елементу таблиці; | '''right''' - вирівнює вміст по правому краю елементу таблиці; | ||
| + | |||
'''justify''' - вирівнює вміст абзацу по обох краях елементу таблиці (підтримується не всіма браузерами). | '''justify''' - вирівнює вміст абзацу по обох краях елементу таблиці (підтримується не всіма браузерами). | ||
| Рядок 37: | Рядок 57: | ||
'''top''' - вирівнює вміст по верхньому краю ячейки таблиці; | '''top''' - вирівнює вміст по верхньому краю ячейки таблиці; | ||
| + | |||
'''middle''' - вирівнює вміст посередині ячейки таблиці; | '''middle''' - вирівнює вміст посередині ячейки таблиці; | ||
| + | |||
'''bottom''' - вирівнює вміст по нижньому краю ячейки таблиці. | '''bottom''' - вирівнює вміст по нижньому краю ячейки таблиці. | ||
Версія за 18:49, 24 грудня 2012
У HTML є потужний інструмент відображення інформації, структурованої у вигляді таблиць. Для цього передбачено десяток структурних тегів. Найпростіша таблиця складається з елемента <table>, що включає по одному або кілька елементів <tr>, <th> і <td>.
Якщо необхідно відобразити опис таблиці, то його можна помістити в елемент <caption>, наявний відразу за відкриваючим тегом