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

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

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

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

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

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

Заголовками рядків і стовпців у таблиці множення служать цифри від одного до дев’яти. Користуватися таблицею дуже просто. Якщо потрібно дізнатися, наприклад, результат множення числа 6 на число 8, то потрібно прочитати відповідь в клітці на перетині стовбця з заголовком “6” і рядка з заголовком “8”. Або в клітці на перетині рядка з заголовком “6” і стовбця з заголовком “8”. Це все одно, тому що 6 · 8 = 8 · 6. В обох цих клітинах написано число 48.

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

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

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

Таблиця задається командою <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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

і

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

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

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

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

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

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

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

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

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

   Img24.jpg	Horse.gif

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

2. А тепер спробуйте втавіть всередину рами /wp-content/pic07/frame2.jpg дві картинки: /wp-content/pic07/cat7.gif і /wp-content/pic07/bird2.gif так, щоб кіт лежачий вгорі, жадібно поглядав на пташку, що пролітає під ним.
3. Напишіть програму, яка виводить на екран документ:
   
4. Напишіть програму, яка виводить на екран документ:
   
   Картинка з кулями знаходиться в /wp-content/pic07/balloon.jpg, а тексти у файлі /wp-content/pic07/balloon.txt (кодування Windows).