русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

table Html | Таблиці в HTML

ЗАГОЛОВОК

1 Подання таблиць на Web-сторінці
1.1 Завдання параметрів таблиці
1.2. Формування таблиці
1.3. Використання CSS для завдання параметрів таблиць
2 Завдання рухомих елементів на Web-сторінці
Приклад №1

Заголовок

1 Подання таблиць на Web-сторінці

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

Заголовок

1.1 Завдання параметрів таблиці

Таблиці HTML вказується за допомогою тега-контейнера <TABLE> . . . </TABLE>. Загальні параметри таблиці задаються в тегу <TABLE> , який містить наступні параметри:

  • ALIGN - вирівнювання таблиці:
    • left - по лівому краю;
    • center - по центру;
    • right - по правому краю.
  • WIDTH - ширина таблиці зазначається або в пікселях, або у відсотках від ширини екрана (за замовчуванням береться мінімально необхідної для представлення даних).
  • HEIGHT - висота таблиці зазначається або в пікселях, або у відсотках від висоти екрану (за замовчуванням береться мінімально необхідної для представлення даних).
  • BORDER - ширина обмежують ліній (або просто кордонів) таблиці, вказується в мілісекундах і за замовчуванням дорівнює 0 - в цьому випадку кордонів таблиці не видно;
  • BORDERCOLOR - колір межі таблиці;
  • BGCOLOR - колір фону таблиці;
  • CELLSPACING - відстань у точках між сусідніми осередками таблиці (обмежують лінії включаються в комірку), за замовчуванням дорівнює 2;
  • CELLPADDING - відстань у точках між кордоном комірки і її вмістом, за замовчуванням дорівнює 1.

Заголовок таблиці, якщо він необхідний, задається за допомогою тега-контейнера <CAPTION> . . . </CAPTION>, який містить параметр ALIGN:

  • ALIGN - завдання розташування заголовку таблиці:
      • top - зверху таблиці;
      • bottom - знизу таблиці.

прикладі № 1 показано завдання параметрів таблиці.

 

Заголовок

1.2 Формування таблиці

Після завдання параметрів і заголовку таблиці виконується формування її структури та вмісту.
Побудова таблиці здійснюється по рядках з допомогою тегів-контейнерів <TR> . . . </TR> (- TR Table Row, рядок таблиці).

Формування кожного рядка виконується за комірок рядка зліва направо з допомогою тегів-контейнерів <TH> . . . </TH> (TH - Table Head, заголовок таблиці), які задають назви (заголовки) стовпців таблиці, і тегів-контейнерів <TD> . . . </TD> (TD - Table Data, дані таблиці), які задають значення елементів таблиці.

Обидва тега <TH> <TD> задають параметри і вміст комірки. Відмінність між ними полягає в тому, що <TH> за замовчуванням містить жирний текст і вирівняно по центру, а <TD> - містить звичайний текст і вирівняно по лівому краю.
Теги <TR>, <TD> <TH> можуть мати ті ж параметри, що й тег <TABLE>, але область дії значень цих параметрів обмежується відповідно рядком або осередком таблиці.
Ці теги поряд з горизонтальним вирівнюванням (параметр ALIGN) мають можливість вирівнювання вмісту осередків по вертикалі з допомогою параметра VALIGN:

  • VALIGN - вертикальне вирівнювання елементів таблиці:
    • top - вирівнювання по верхньому краю комірки;
    • middle - вирівнювання по середині комірки;
    • bottom - вирівнювання по нижньому краю комірки.

Для об'єднання комірок по стовпцях та рядками теги TH> <TD> можуть також мати параметри COLSPAN і ROWSPAN, які задають відповідно число об'єднаних стовпчиків або об'єднаних рядків.
прикладі № 1 показано побудова таблиці з використанням об'єднання по стовпцях та рядками.

 

Заголовок

1.3 Використання CSS для завдання параметрів таблиць

І при побудові таблиці можуть бути задіяні розширені можливості CSS. Для цих цілей підходять властивості, які задають параметри кордонів елементів Web-сторінок. Вони можуть бути використані для визначення меж таблиці. Каскадні листи стилів мають такі властивості завдання параметрів кордонів елементів:

  • border color- - вказує колір кордону, може бути задано від одного до чотирьох значень:
    • якщо задано одне значення - воно застосовується до всіх чотирьох кордонів;
    • якщо задано два значення - перше відноситься до верхньої і нижньої кордонів, друге - до лівої і правої межі;
    • якщо задано три значення - перше застосовується до верхньої межі, друге відноситься до лівої і правої кордоні, третє - до нижньої межі.
  • border-style - вказує стиль кордону:
    • none - кордон не видно (значення, що приймається за замовчуванням);
    • solid - суцільна лінія;
    • double - подвійна суцільна лінія;
    • dotted - лінія у вигляді точок;
    • dashed - пунктирна лінія;
    • groove - тривимірна увігнута кордон;
    • ridge - тривимірна опукла кордон;
    • inset - тривимірна кордон "сходинка вгору";
    • outset - тривимірна кордон "сходинка вниз".
  • border-width - вказує товщину меж, може бути задано від одного до чотирьох значень:
    • якщо задано одне значення - воно застосовується до всіх чотирьох кордонів;
    • якщо задано два значення - перше відноситься до верхньої і нижньої кордонів, друге - до лівої і правої межі;
    • якщо задано три значення - перше застосовується до верхньої межі, друге відноситься до лівої і правої межі, третє - до нижньої межі.
    Товщина кордонів може бути задана з допомогою числового значення пікселі, а також можна використовувати при предоопределенных значення:
    • thin - тонка лінія;
    • medium - лінія середньої товщини (значення, що приймається за замовчуванням);
    • thick - товста лінія;
  • border-collapse - вказує чи будуть межі комірок таблиці і межі самої таблиці зливатися в одну (застосовується тільки для тегу <TABLE>):
    • separate - розділяє кордон таблиці і межі її осередків (значення, що приймається за замовчуванням);
    • collapse - об'єднує їх.

Параметри кордону, як і параметри шрифту можна вказувати в скороченій формі. Наприклад, замість завдання властивостей кордону у вигляді:

<TD STYLE="border-color:green; border-style:dotted; border-width:6">

можна використати таку форму:

<TD STYLE="border:green dotted 6">

Якщо при цьому вказані не всі властивості кордону, то інші успадковуються або приймаються за замовчуванням.
Крім завдання властивостей відразу декількох кордонів елемента CSS мають можливість завдання властивостей тільки однієї кордону:

  • border-top - верхньої межі;
  • border-bottom - нижньої межі;
  • border-left - лівої межі;
  • border-right - правої межі.

Для вказівки відразу кількох властивостей кожної з цих кордонів можна використовувати скорочену форму завдання значень, як наведено вище. Для завдання одного з властивостей кордону можна скористатися одним з наступних властивостей:

  • border-top-style - завдання стилю верхньої межі;
  • border-top-width - завдання ширини верхньої межі;
  • border-top-color - завдання кольору верхньої межі;
  • border-bottom-style - завдання стилю нижньої межі;
  • border-bottom-width - завдання ширини нижньої межі;
  • border-bottom-color - завдання кольору нижній кордону;
  • border-left-style - завдання стилю лівої межі;
  • border-left-width - завдання ширини лівої межі;
  • border-left-color - завдання кольору лівої межі;
  • border-right-style - завдання стилю правої межі;
  • border-right-width - завдання ширини правої межі;
  • border-right-color - завдання кольору правій границі.


прикладі № 1 показано використання властивостей CSS при построеним таблиці.

 

Заголовок

2 Завдання рухомих елементів на Web-сторінці

Для завдання рухомих елементів на Web-сторінці використовується тег-контейнер <MARQUEE> . . . </MARQUEE>. Рухомий елемент (в якості якого може бути використаний текст, малюнок, таблиця та інші елементи Web сторінки) розміщується всередині контейнера, тобто між тегами <MARQUEE> </MARQUEE>. Тег <MARQUEE> має наступні параметри:

  • SCROLLDELAY - вказує затримку в мілісекундах;
  • SCROLLAMOUNT - вказує кількість пікселів на яку переміщується елемент (швидкість його переміщення);
  • BEHAVIOR - вказує характер руху:
    • scroll - елемент переміщається в одну сторону (задається за замовчуванням);
    • alternate - елемент переміщається по черзі то в один бік, то в іншу;
    • slide - елемент переміщується до краю і зупиняється.
  • DIRECTION - вказує напрямок руху елементу;
    • left - справа наліво (задається за замовчуванням);
    • right - зліва направо;
    • up - знизу вгору;
    • down - зверху вниз;
  • LOOP - вказує кількість повторень, якщо 0 або infinite - нескінченно (задається за замовчуванням).

як приклад побудови таблиці на Web-сторінці наведемо наступний HTML документ:

Заголовок

Приклад 1

<&HTMLgt;
<HEAD>
<TITLE> Таблиці html </TITLE>
<LINK REL=STYLESHEET HREF="my.css">
<STYLE>TABLE{font: italic 6mm; color:#00A}</STYLE>
</HEAD>
<BODY>
<H1> ТАБЛИЦІ НА WEB-СТОРІНЦІ </H1>
<TABLE BORDER=2 BORDERCOLOR=RED BGCOLOR=#E0E0E0 CELLSPACING=4 CELLPADDING=3
ALIGN=center WIDTH=105%>
<CAPTION ALIGN=bottom> ТАБЛИЦЯ 1 </CAPTION>
<TR BGCOLOR=aqua>
<TH COLSPAN=3> Заголовок стовпця 1-3 <TH> Стовпчик 4
<TR>
<TD ALIGN=right> 1/1
<TD ALIGN=center STYLE="border-width:thick medium"> 1/2
<TD ROWSPAN=2 VALIGN=top>
<MARQUEE SCROLLAMOUNT=2 BEHAVIOR=slide DIRECTION=down> 1-2/3 </MARQUEE><TD> 1/4
<TR>
<TD COLSPAN=2 BGCOLOR=#E0E0FF STYLE="font-size:8mm; border:blue 10 dotted">
<MARQUEE BEHAVIOR=alternate SCROLLAMOUNT=10
LOOP=4> 2/1-2 </MARQUEE>
<TD VALIGN=bottom ALIGN=center
STYLE="font-size:2cm; border-left: #F00 dashed 16 " > 2/4
</TABLE>
</BODY>
</HTML>

Заголовок

Переглядів: 1477

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн