Створення таблиць в HTML.

Оформлення HTML документа. Таблиці.

Засоби опису таблиць в HTML.

У міру розвитку WWW стало ясно, що засобів, які закладені в НТМL, недостатньо для якісного відображення різного типу документів. Недоліком НТМL була відсутність в його складі засобів відображення таблиць. Для цієї мети зазвичай використовувався передформатований текст (тег <PRE>), в якому таблиця змальовувалася символами АsСii. Але така форма представлення таблиць була недостатньо високої якості і вибивалася із загального стилю документа. Після введення таблиць в HTML у Web-майстрів з'явився не просто інструмент для розміщення текстових і числових даних, а потужний засіб дизайну для розміщення в потрібному місці екрану графічних образів і тексту.

Створення таблиць в HTML.

Для опису таблиць використовується тег <ТАВLЕ>. Тег <ТАВLЕ>, як і багато інших, автоматично переводить рядок до і після таблиці.

Створення рядка таблиці — тег <Тr> Тег <Тr> (Таble Row, рядок таблиці) створює рядок таблиці. Весь текст, інші теги і атрибути, які потрібно помістити в один рядок, повинні розміщуватися між тегами <Тr></Тr>.

Визначення елементів таблиці - тег <Тd> Усередині рядка таблиці зазвичай розміщуються вічка з даними. Кожне вічко, що містить текст або зображення, має бути оточене тегами <Тd></Тd>. Число тегів <Тd></Тd> в рядку визначає число вічок (відкрити)

<TABLE>

<TR>

<TD COLSPAN=3>Якщо в таблиці два тега TR, то в ній два рядки.</TD>

</TR>

<TR>

<TD>Якщо в рядку три тега TD,</TD>

<TD>три стовпця.</TD>

</TR>

</TABLE>

Заголовки стовпців таблиці — тег <ТН>

Заголовки для стовпців і рядків таблиці задаються за допомогою тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблиці). Ці теги подібні <Тd></Тd>. Відмінність полягає в тому, що текст, ув'язнений між тегами <ТН></ТН>, автоматично записується жирним шрифтом і за замовчанням розташовується посередині вічка. Центрування можна відмінити і вирівняти текст по лівому або правому краю. Якщо скористатися <Тd></Тd> з тегом <В> і атрибутом <Аlign=center>, текст теж виглядатиме як заголовок. Проте слід мати на увазі, що не всі браузери підтримують в таблицях жирний шрифт, тому краще задавати заголовки таблиць за допомогою <ТН>.

<TR>

<TH>Заголовок центрований по замовчуванню</TH>

<TH COLSPAN=2>Заголовок може об'єднувати стовпці</TH>

</TR>

<TR>

<TH>Заголовок може бути розташований перед стовпцями</TH>

<TD>Текст або дані</TD>

</TR>

<TR>

<TH ROWSPAN=3>Заголовок може об'єднувати рядки</TH>

<TD>Текст або дані</TD>

</TR>

<TR>

<TD>Текст або дані</TD>

</TR>

<TR>

<TD>Текст або дані</TD>

</TR>

</TABLE>

Використання заголовків таблиці — тег <САРТІОN>

Тег <CAPTION> дозволяє створювати заголовки таблиці. За умовчанням заголовки центруються і розміщуються або над (<САРТION Аlign=top>), або під таблицею (<САРТION ALIGN=bottom>). Заголовок може складатися з будь-якого тексту і зображень. Текст буде розбитий на рядки, відповідні ширині таблиці. Інколи тег <САРТION> використовується для підпису під малюнком. Для цього досить описати таблицю без кордонів.

<TABLE>

<CAPTION ALIGN=top>Заголовок над таблицею</CAPTION>

<TR>

<TD>Текст або дані</TD>

</TR>

</TABLE>

<TABLE>

<CAPTION ALIGN=bottom>Заголовок під таблицею </CAPTION>

<TR>

<TD>Текст або дані</TD>

</TR>

</TABLE>

Атрибут NOWRAP

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

Атрибут COLSPAN

Теги <Тd> і <ТН> модифікуються за допомогою атрибуту COLSPAN (Column Span, з'єднання стовпців). Якщо ви хочете зробити яке-небудь вічко ширше, ніж верхня або нижняя, можна скористатися атрибутом COLSPAN, аби розтягнути її над будь-якою кількістю звичайних вічок.

<TR>

<TD>Якщо ви хочете зробити яке-небудь

вічко ширше, ніж верхнє або нижнє

</TD>

<TD>можна скористатися атрибутом

COLSPAN =, </TD>

</TR>

<TR>

<TD BGCOLOR=white COLSPAN="2" > аби

розтягнути її над будь-якою кількістю

звичайних вічок.</TD>

</TR>

</TABLE>

Атрибут ROWSPAN

Атрибут ROWSPAN, використовуваний в тегах <Тd> і <ТН>, подібний до атрибуту COLSPAN =, лише він задає число рядків, на які розтягується вічко. Якщо ви вказали в атрибуті ROWSPAN=s число, більше одиниці, то відповідна кількість рядків повинна знаходитися під розтягуваним вічком. Внизу таблиці її помістити не можна.

Атрибут WIDТН

Атрибут WIDТН застосовується в двох випадках. Можна помістити його в тег <ТАВLЕ>, аби дати ширину всієї таблиці, а можна використовувати в тегах <Тr> або <ТН>, аби задати ширину вічка або групи вічок. Ширину можна вказувати в пікселях або у відсотках. Наприклад, якщо ви задали в тегі <ТАВlЕ> WIDTH=250, ви отримаєте таблицю шириною 250 пікселям незалежно від розміру сторінки на моніторі. При завданні WIDТН=50% в тегі <ТАВLЕ> таблиця займатиме половину ширини сторінки при будь-якому розмірі зображення на екрані. Отже, вказуючи ширину таблиці в пікселях, майте на увазі, що якщо у користувача вузька область перегляду, ваша сторінка може виглядати декілька дивно. Якщо ви користуєтеся пікселями, і таблиця виявляється ширшою за область перегляду, внизу з'явиться смуга прокрутки для переміщення управо і вліво по сторінці. Залежно від поставлених завдань і той, і інший спосіб завдання ширини таблиці може виявитися корисним.

12 3

Дата добавления: 2016-04-02; просмотров: 1680;