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

Матеріал з Wiki TNEU
Перейти до: навігація, пошук
(Створена сторінка: Створюються таблиці тегом <table> із закриваючим тегом </table>. Вміст таблиці формується поряд...)
 
 
(5 проміжних версій 4 користувачів не показані)
Рядок 1: Рядок 1:
−
Створюються таблиці тегом <table> із закриваючим тегом </table>. Вміст таблиці формується порядково, а кожен рядок формується послідовно з елементів таблиці. Рядки таблиці створюються тегом <tr>, (</tr>). Елементи таблиці створюються тегом <td>(</td>).
+
У HTML є потужний інструмент відображення інформації, структурованої у вигляді таблиць. Для цього передбачено десяток структурних тегів. Найпростіша таблиця складається з елемента table, що включає по одному або кілька елементів tr, th і td.
  
−
Атрибут '''border''' задає ширину рамки таблиці в пікселях.
+
Якщо необхідно відобразити опис таблиці, то його можна помістити в елемент caption, наявний відразу за відкриваючим тегом '''table'''. Далі послідовно розташовуються рядки таблиці, що позначаються тегом tr. Кожен рядок містить в собі комірку th або td, формуючи таким чином стовпці таблиці.
  
−
Атрибут '''width''' в тегу <table> задає ширину таблиці, величина може задаватися або в пікселях, або у відсотках від ширини вікна браузеру.
+
Елементи th позначають комірки із заголовками стовпців або рядків. Вміст їх за замовчуванням відображається браузерами жирним накресленням і центрується. Тег td призначений для всіх інших комірок з даними. Наявність заголовків th не є обов'язковим, але в таблиці повинна бути хоча б один рядок з однією коміркою.
  
−
Атрибут '''height''' в тегу <table> задає висоту таблиці, величина може задаватися або в пікселях, або у відсотках від висоти вікна браузеру.
+
За допомогою атрибуту border елемента table можна визначити, чи будуть комірки таблиці обведені рамкою чи ні.
  
−
Атрибут '''align''' вирівнює таблицю по лівому краю, по центру і по правому краю вікна браузеру наступними значеннями, відповідно: left, center і right.
+
Таблиці в HTML є одним з найнеобхідніших елементів і самими універсальними засобами форматування картинок і тексту. Є, звичайно, і альтернативні способи, такі як блоки, але це громіздко, тяжко і незручно... Справа в тому, що різні браузери бачать блоки по своєму, і для більш менш пристойного відображення блоків необхідно писати довгий і нудний скрипт, та й той не панацея ... У той час, як таблиці, хоч у деяких нюансах нерідко і розходяться, але розбіжність мінімальна.
  
−
Атрибут '''cellpadding''' визначає, на яку відстань вміст клітинки відступатиме від кордону клітинки. Зазвичай цей атрибут встановлюють рівним нулю, а відступи роблять за допомогою засобів CSS.
+
Створюються таблиці тегом '''table''' із закриваючим тегом '''/table'''. Вміст таблиці формується порядково, а кожен рядок формується послідовно з елементів таблиці. Рядки таблиці створюються тегом tr, (/tr). Елементи таблиці створюються тегом td(/td).
  
−
Атрибут '''cellspacing''' задає відстань між кордонами елементів таблиці. Досить часто цей атрибут встановлюють рівним нулю.
 
  
−
Атрибут '''bordercolor''' визначає колір рамки таблиці.
+
<u>'''Атрибути таблиці'''</u>
  
−
Атрибут '''bgcolor''' задає колір фону таблиці.
+
'''border''' - задає ширину рамки таблиці в пікселях.
 +
 
 +
'''width''' в тегу table задає ширину таблиці; величина може задаватися або в пікселях, або у відсотках від ширини вікна браузеру.
 +
 
 +
'''height''' в тегу table задає висоту таблиці; величина може задаватися або в пікселях, або у відсотках від висоти вікна браузеру.
 +
 
 +
'''align''' - вирівнює таблицю по лівому краю, по центру і по правому краю вікна браузеру наступними значеннями, відповідно: left, center і right.
 +
 
 +
'''cellpadding''' - визначає, на яку відстань вміст клітинки відступатиме від кордону клітинки. Зазвичай цей атрибут встановлюють рівним нулю, а відступи роблять за допомогою засобів CSS.
 +
 
 +
'''cellspacing''' - задає відстань між кордонами елементів таблиці. Досить часто цей атрибут встановлюють рівним нулю.
 +
 
 +
'''bordercolor''' - визначає колір рамки таблиці.
 +
 
 +
'''bgcolor''' - задає колір фону таблиці.
  
 
'''colspan''' - використовується для об'єднання сусідніх клітинки що знаходяться в одному рядку таблиці.
 
'''colspan''' - використовується для об'єднання сусідніх клітинки що знаходяться в одному рядку таблиці.
Рядок 21: Рядок 34:
 
'''rowspan''' - використовується для об'єднання сусідніх клітинок що знаходяться в одному стовпці таблиці.
 
'''rowspan''' - використовується для об'єднання сусідніх клітинок що знаходяться в одному стовпці таблиці.
  
−
Атрибут '''width''' в тегу <td> задає ширину поточного ячейки або в пікселях, або у відсотках від загальної ширини таблиці.
+
'''width''' в тезі td задає ширину поточного комірки або в пікселях, або у відсотках від загальної ширини таблиці.
  
−
У тегах <tr> і <td> також можна використовувати атрибут align, але на відміну від тега <table>, дія атрибуту в цьому тегу поширюватиметься на вміст клітинок рядка або однієї клітинки - вона управлятиме вирівнюванням вмісту. Атрибут align в цьому випадку може набувати наступних значень:
+
У тегах tr, і td, також можна використовувати атрибут align, але на відміну від тега table, дія атрибуту в цьому тегу поширюватиметься на вміст клітинок рядка або однієї клітинки - вона управлятиме вирівнюванням вмісту. Атрибут align в цьому випадку може набувати наступних значень:
  
 
'''left''' - вирівнює вміст по лівому краю елементу таблиці (використовується за умовчанням);
 
'''left''' - вирівнює вміст по лівому краю елементу таблиці (використовується за умовчанням);
Рядок 33: Рядок 46:
 
'''justify''' - вирівнює вміст абзацу по обох краях елементу таблиці (підтримується не всіма браузерами).
 
'''justify''' - вирівнює вміст абзацу по обох краях елементу таблиці (підтримується не всіма браузерами).
  
−
У тегах <tr> і <td> також можна використовувати чудовий атрибут valign, який управляє вертикальним вирівнюванням вмістом рядків і елементів таблиці. Атрибут valign може набувати наступних значень:
+
У тегах tr і td також можна використовувати чудовий атрибут valign, який управляє вертикальним вирівнюванням вмістом рядків і елементів таблиці. Атрибут valign може набувати наступних значень:
 +
 
 +
'''top''' - вирівнює вміст по верхньому краю комірки таблиці;
  
−
'''top''' - вирівнює вміст по верхньому краю ячейки таблиці;
+
'''middle''' - вирівнює вміст посерединікомірки таблиці;
  
−
'''middle''' - вирівнює вміст посередині ячейки таблиці;
+
'''bottom''' - вирівнює вміст по нижньому краю комірки таблиці.
  
−
'''bottom''' - вирівнює вміст по нижньому краю ячейки таблиці.
+
''Приклад створення таблиці в html:''
 +
<pre>
 +
<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>
 +
</pre>

Поточна версія на 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>
Отримано з http://wiki.tneu.edu.ua/index.php?title=7_Таблиці&oldid=17043
Особисті інструменти
Простори назв

Варіанти
Дії
Навігація
Інструменти