Давайте розбиратися як побудувати найпростішу таблицю. Для цього нам знадобляться як мінімум три елементи.
TABLE - Елемент для створення html таблиці. Обов'язково повинен мати початковий і кінцевий теги. За замовчуванням html таблиця друкується без рамки, а розмітка здійснюється автоматично в залежності від обсягу що міститься в ній інформації. Відразу скажу, що тут є атрибут BORDER який задає товщину рамки таблиці в пікселах.
TR (Table Row) - Створює новий ряд таблиці. Закриває тег обов'язковий.
TD (Table Data) - Починає і закінчує кожну клітинку ряду html таблиці. Обов'язковий закриває тег.
Давайте спробуємо створити таблицю з двох рядів і двох стовпців:
Ось як це буде виглядати в браузері:
Розібралися? Тобто таблиця починається з
| ряд 1 ячейка1 | іРяд1 ячейка2 | . ряд закривається
А як можна об'єднати комірки?
Для цього існують дані атрибути.
COLSPAN - визначає кількість стовпців, на які поширюється ця група. За замовчуванням має значення 1.
ROWSPAN - визначає кількість рядів, на які поширюється ця група. За замовчуванням має значення 1.
Отримаємо в браузері:
ряд 1 осередок 1 + 2
Отримаємо в браузері:
Осередок 1, ряд 1 + 2
Нічого складного немає. Придивіться уважно до трьох прикладів і все стане ясно.
Ось ще корисні атрибути:
CELLPADDING - визначає відстань (у пікселах) між рамкою кожного осередку html таблиці і що міститься в ній матеріалом.
CELLSPACING - визначає відстань (у пікселах) між кордонами сусідніх комірок таблиці html.
WIDTH - визначає ширину таблиці html. Ширина задається або в пікселах, або в процентному відношенні до ширини вікна браузера. За замовчуванням цей атрибут визначається автоматично в залежності від обсягу що міститься в таблиці матеріалу.
HEIGHT - визначає висоту таблиці. Висота задається або в пікселах, або в процентному відношенні до висоти вікна браузера. За замовчуванням цей атрибут визначається автоматично в залежності від обсягу що міститься в html таблиці матеріалу.
Результат в браузері:
Результат в браузері:
Результат в браузері:
І нарешті останні чотири атрибута:
ALIGN - визначає спосіб горизонтального вирівнювання html таблиці або вмісту комірок. Можливі значення: left, center, right. Значення за замовчуванням - left.
VALIGN - повинен визначати спосіб вертикального вирівнювання таблиці або вмісту елементів таблиці .Возможна значення: top, bottom, middle. (Притиснути до верху, притиснути до низу, і встановити посередині).
BGCOLOR - визначає колір фону елементів таблиці. Здається або RGB-значенням в шістнадцятковій системі, або одним з 16 базових кольорів.
BACKGROUND - дозволяє заповнити фон таблиці малюнком. Як значення необхідно вказати URL малюнка.
Примітка: можна хоч кожній клітинці таблиці задати свій колір фону або фоновий малюнок. Але: якщо ви задаєте фоновий колір (або малюнок) в базовому елементі TABLE то у всіх осередках буде цей фон (малюнок), і якщо ви захочете в якийсь осередку поміняти, пропишіть відповідний атрибут саме для цього осередку.
| ряд 1 ячейка1 | Ряд1 ячейка2 |
| ряд 2 осередок 1 | ряд 2 осередок 2 |
Результат в браузері:
Якщо картинка менше ніж осередок, то вона буде дублюватися, як показано в прикладі. Якщо більше - то буде відображатися та частина яка влізе :).
НУ ось впринципі і все за таблицями. Якщо не вийшло запам'ятати не турбуйтеся. З практикою все запам'ятається (як кажуть головне знати, де підглянути!). У програмі Adobe Dreamweaver все робиться дуже просто.
↑ Вгору ↑
Є питання? Отримай відповідь на форумі ПІДТРИМКИ