Урок 7. Як ми жили без таблиць?

Урок 1. Перше знайомство Урок 2. Красиві документи Урок 3. Красиві програми Урок 4. Гіпертекст Урок 5. Графіка Урок 6. Конструктор документів ...

У практичному HTML-програмуванні таблиці абсолютно незамінні для ...
створення лівих і правих полів сторінки, вирівнювання елементів на екрані, багатоколонної верстки, накладення картинок один на одного. І, нарешті, для відображення на екрані табличного матеріалу, але це - в останню чергу. В 90% випадках таблиці використовуються, як не парадоксально це звучить, не для відображення таблиць.

Але про все по-порядку

Що таке таблиця

Зі школи добре відома таблиця множення.

Таблиця являє собою прямокутник, розкреслений на клітини. Якщо на клітини дивитися по вертикалі, то вони утворюють стовпці, якщо по горизонталі - рядки. Кожен рядок і стовпець у таблиці може мати свій заголовок. Заголовки записуються в першому рядку і першому стовпці.

Заголовками рядків і стовпців у таблиці множення служать цифри від одного до дев'яти. Користуватися таблицею дуже просто. Якщо потрібно дізнатися, наприклад, результат множення числа 6 на число 8, то потрібно прочитати відповідь в клітці на перетині стовбця з заголовком "6" і рядка з заголовком "8". Або в клітці на перетині рядка з заголовком "6" і стовбця з заголовком "8". Це все одно, тому що 6 · 8 = 8 · 6. В обох цих клітинах написано число 48.
  1 2 3 4 5 6 7 8 9
1 1 2 3 4 5 6 7 8 9
2 2 4 6 8 10 12 14 16 18
3 3 6 9 12 15 18 21 24 27
4 4 8 12 16 20 24 28 32 36
5 5 10 15 20 25 30 35 40 45
6 6 12 18 24 30 36 42 48 54
7 7 14 21 28 35 42 49 56 63
8 8 16 24 32 40 48 56 64 72
9 9 18 27 36 45 54 63 72 81

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

Для таблиці множення ознаками служать значення співмножників. Перша ознака - це значення першого співмножника, другий - значення другого.

Як задати таблицю

Таблиця задається командою <TABLE> ... </TABLE>.

Усередині цих тегів задаються рядки командами <TR> ... </TR>.

Нарешті, всередині рядків задаються клітини (осередки, комірки) командами <TD> ... </TD>.

Таким чином, по рядках, описується вся структура таблиці.

Розглянемо наступний приклад.

Програма Таблиця на екрані
<TABLE border=1>
  <TR>            <!-- Перший рядок -->
    <TD>(1,1)</TD>     <!-- Перша комірка -->
    <TD>(1,2)</TD>     <!-- Друга комірка -->
  </TR>
  <TR>            <!-- Другий рядок -->
    <TD>(2,1)</TD>     <!-- Перша комірка -->
    <TD>(2,2)</TD>     <!-- Друга комірка -->
  </TR>
  <TR>            <!-- Третій рядок -->
    <TD>(3,1)</TD>     <!-- Перша комірка -->
    <TD>(3,2)</TD>     <!-- Друга комірка -->
  </TR>
</TABLE>
(1,1) (1,2)
(2,1) (2,2)
(3,1) (3,2)

Атрибути команди TABLE

Атрибут Призначення
align= (left, right) Вирівнювання по горизонталі
width= (число або процент) Ширина таблиці
cellpadding= (число) Відстань між вмістом комірки і рамкою
cellspacing= (число) Відстань між комірками таблиці
bgcolor= (колір) Колір фону таблиці
background= (файл) Фонова картинка
border= (число) Ширина ліній рамки
bordercolor= (колір) Колір ліній рамки
bordercolordark= (колір) Темний колір рамки (знизу і справа)
bordercolorlight= (колір) Світлий колір рамки (зверху і зліва)

У наведених нижче випробувачах наводиться більш докладний опис дій атрибутів, а головне, на стендах можна поклацати перемикачами, посмикати за "мотузочки" і відразу побачити, що з цього вийшло.

Випробувач 1 (атрибути команди TABLE)

Атрибути команди TR

HTML-таблиця складається з рядків, кожен з яких задається командою

<TR>опис осередків табличній рядка </TR>

Варіюючи атрибутами команди TR, можна встановити ті чи інші властивості одночасно для всіх осередків рядка.

Атрибут Призначення
align= (left, center, right) Вирівнювання по горизонталі
valign= (top, center,bottom, baseline) Вирівнювання по вертикалі
bgcolor= (колір) Колір фону
bordercolor= (колір) Колір ліній рамки
bordercolordark= (колір) Колір рамки (знизу і справа)
bordercolorlight= (колір) Світлий колір рамки (зверху і зліва)

Подивитися роботу атрибутів можна на наступних випробувачах:

Випробувач 2 (атрибути команди TR)

Атрибути команди TD (TH)

Кожний табличний рядок складається з комірок, які послідовно описуються командами TD (звичайна комірка) і (або) TH(комірка-заголовок):

<TR>опис вмісту комірки </TR>

<TH>опис вмісту комірки </TH>

Вміст звичайної комірки за замовчуванням горизонтально вирівнюється по лівому краю, а комірки-заголовка - по центру. Крім того, текст в комірці-заголовку виділяється напівжирним шрифтом.

Команди TD і TH мають наступні атрибути:

Атрибут Призначення
align= (left, center, right) Вирівнювання по горизонталі
valign= (top, center, bottom, baseline) Вирівнювання по вертикалі
width= (число або відсоток) Ширина комірки
bgcolor= (колір) Колір фону
background= (файл) Фонова картинка
bordercolor= (колір) Колір ліній рамки
bordercolordark= (колір) Колір рамки (знизу і справа)
bordercolorlight= (колір) Світлий колір рамки (зверху і зліва)
nowrap Вимкнення автоматичного розриву рядків
colspan= (число) Ширина великий комірки (в стовбцях)
rowspan= (число) Висота великої комірки (в рядках)

Нижче наводяться посилання на випробувальні полігони.

Випробувач 3 (TR і TD: align, valign, width, bgcolor, background, bordercolor, bordercolordark, bordercolorlight)
Випробувач 4 (TR і TD: nowrap)
Випробувач 5 (TR і TD: colspan)
Випробувач 6 (TR і TD: rowspan)
Випробувач 7 (TR і TD: colspan+rowspan)

Багатоликі таблиці

Як вже зазначалося, використання таблиць в практиці HTML-програмування дуже несподіване. Ймовірно, автори мови і не припускали, що таблиці використовуватимуться проектувальниками гіпертекстових сторінок як елемент дизайну.

Сторінкові відступи

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

В гіпертекстовому документі можна створити поля, якщо розміщувати інформацію всередині таблиці, що складається всього з однієї клітини з невидимими полями. При зміні значення атрибута cellpadding, змінюється ширина полів.

Звичайне розміщення Розміщення в таблиці
Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!

"Алиса в стране Чудес"

Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!

"Алиса в стране Чудес"

Наведений приклад повторюється нижче з включеною табличною рамкою. Ви можете явно побачити, як проходили б табличні лінії при значенні border=1.

Розміщення в таблиці Тут border=1
Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!

"Алиса в стране Чудес"

Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!

"Алиса в стране Чудес"

Можна задати поля і за допомогою декількох порожніх стовпців:

Розміщення в таблиці Тут border=1
    Баюкай сына своего
Хорошею дубиной -
Увидишь, будет у него
Характер голубиный!

Л.Кэрролл "Алиса в стране Чудес"

   
    Баюкай сына своего
Хорошею дубиной -
Увидишь, будет у него
Характер голубиный!

Л.Кэрролл "Алиса в стране Чудес"

   

Звичайною практикою є комбінування цих двох способів:

Розміщення в таблиці Тут border=1
  Уж я-то деточку свою
Лелею словно розу!
И я его - баю-баю,
Как сидорову козу!

Л.Кэрролл "Алиса в стране Чудес"

 
  Уж я-то деточку свою
Лелею словно розу!
И я его - баю-баю,
Как сидорову козу!

Л.Кэрролл "Алиса в стране Чудес"

 

Один із прикладів табличних відступів показано в наступному прикладі.

  Крокодильчики мои
Цветики речные!
Что глядите на меня
Прямо как родные?
Это кем хрустите вы
В день веселый мая,
Средь нескушанной травы
Головой качая?

"Алиса в стране Чудес"

Багатоколонна верстка

Використовуючи таблиці, можна виводити на екран інформацію в декілька колонок:

При свете дрянного керосинового фонаря Остап прочел из путеводителя:

"На правом высоком берегу - город Васюки. Отсюда отправляются лесные материалы, смола, лыко, рогожи, а сюда привозятся предметы широкого потребления для края, отстоящего на 50 километров от железной дороги.   В городе 8000 жителей, государственная картонная фабрика с 320 рабочими, маленький чугунолитейный, пивоваренный и кожевенный заводы. Из учебных заведений, кроме общеобразовательных, лесной техникум".

Розміщення інформації на екрані
Таблиці, вкладені один в одного

Використовуючи таблиці, можна вирівняти інформаційні блоки на екрані і розмістити їх відповідно до дизайн-проекту документа.

Везде на стенах и на колоннах были несмываемые надписи
примерно такого рода:

Вода - источник жизни
Вода - народное достояние
 
     
Одним шайко-объемом можно напоить лошадь
В.Войнович
"Москва 2042"
Кто расточает воду, тот враг народа

Нижче розташований той же приклад, але з включеними рамками. Зрозуміло, що таблиці - дивовижний інструмент, що дозволяє монтувати інформаційні блоки на екрані так, як це необхідно проектувальнику.

Везде на стенах и на колоннах были несмываемые надписи
примерно такого рода:

Вода - источник жизни
Вода - народное достояние
 
     
Одним шайко-объемом можно напоить лошадь
В.Войнович
"Москва 2042"
Кто расточает воду, тот враг народа

Накладення картинок

Ще одна незвичайна практика використання таблиць: побудова колажів.

Постановка задачі. Є дві картинки:

Хочу показать лося! Но как? і Как мне попасть в телевизор?

Як їх накласти один на одного? Як помістити тварину на екран телевізора?

Загальна ідея: першу картинку зробити фоном для таблиці, а другу розмістити всередині.

Побудуємо таблицю, що складається з однієї клітини. Вкажемо для цієї клітини ширину, рівну ширині малюнка, який будемо використовувати як фон:

 

Да... Вийшло не дуже добре. Для завдання висоти комірки (і таблиці) творці HTML не придумали атрибута. Ми бачимо тільки верхній шматочок фонової картинки.

Ідея: використовувати ще одну допоміжну картинку. По висоті вона повинна дорівнювати фонової, а по довжині повинна бути такою, щоб закривати частину телевізора. Тоді лось, розташований слідом за допоміжної картинкою потрапить в центр екрану.

Намалювати допоміжну картинку дуже просто - це повинен бути одноколірний GIF, в якому його єдиний колір оголошений прозорим. Тоді користувач на екрані цю картинку і не побачить:

Привіт від сохатого!

Зауваження. Насправді малювати невидимий GIF можна будь-якої величини. Адже ми завжди можемо вказати його екранні розміри в команді IMG і наша допоміжна картинка буде стискатися або розтягуватися. Можна не побоюватися спотворень - адже цю картинку не можна побачити на екрані ні в яку лупу!

Натисніть тут

  1. В каталозі PIC07 розташовані дві картинки:
    Img24.jpg Horse.gif

    Вставте анімовану картинку всередину рами.

  2. А тепер спробуйте втавіть всередину рами ./pic07/frame2.jpg дві картинки: ./pic07/cat7.gif і ./pic07/bird2.gif так, щоб кіт лежачий вгорі, жадібно поглядав на пташку, що пролітає під ним.
  3. Напишіть програму, яка виводить на екран документ:

  4. Напишіть програму, яка виводить на екран документ:

    Картинка з кулями знаходиться в ./pic07/balloon.jpg, а тексти у файлі ./pic07/balloon.txt (кодування Windows).

ЗмістЗміст На урок 6Урок 6


скачать софт