4. Використання таблиць для розміщення об'єктів на веб-сторінці
Під час відображення веб-сторінок браузер розміщує елементи на екрані один за одним у тому порядку, в якому вони записані у HTML-документі. Для позиціювання елементів розроблено спеціальні засоби мови HTML, проте часто для цього використовують таблиці. На веб-сторінці створюють таблицю без рамок і у її ко-мірки поміщають різні об'єкти.
Розмістимо назви класів по діагоналі так, як це показано в табл. 4, але самої таблиці на веб-сторінці відображати не будемо.
Таблиця 4. Таблиця, в якій інформація розміщується по діагоналі Старші класи
10-А
10-Б
11-А
11-Б
11-В
Нижче наведено текст HTML-документа, в якому для позиціюван-ня елементів використано табл. 4.
<HTML>
<TITLE>Приклад позиціювання</TITLE> <BODY> <TABLE> <TR>
<ТН>Старші класи</ТН>
<TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR> <TR>
<TD></TD><TD>10-A</TD><TD></TD><TD></TD><TD></TD><TD></TD> </TR> <TR>
<TD></TD><TD></TD><TD>10-B</TD><TD></TD><TD></TD><TD></TD> </TR> <TR>
<TD></TD><TD></TD><TD></TD><TD>11-A</TD><TD></TD><TD></TD> </TR> <TR>
<TD></TD><TD></TD><TD></TD><TD></TD><TD>11-B</TD><TD></TD> </TR> <TR>
<TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD>11-B</TD> </TR> </TABLE> </BODY> </HTML>
На рис. 5 показано, який вигляд має цей HTML-документ у вікні браузера.
Рис. 5. Позиціювання елементів на веб-сторінці за допомогою таблиці
Комірки таблиці можна заповнювати не лише текстом, а й зображеннями, іншими таблицями та рухомими рядками. Текст або зображення всередині комірки може бути гіперпосиланням.
Наприклад:
<TD><A H R E F = " l i b . h t m l " > 1 1 - B < / A > < / T D >
5. Підсумок заняття.
Сьогодні на лекції ви познайомилися з основними тегами створення таблиць в HTML-документі. Які теги допомагають нам додати таблицю? Які атрибути можна встановити для об’єднання комірок по горизонталі та вертикалі? Яким чином можна настроїти обрамлення таблиці (рамку)? За допомогою якого атрибуту можна призначити колір для певної комірки та для всієї таблиці?
Перевірити наведені у лекції приклади на ПК.
Форматирование таблиц Теперь эту простенькую таблицу можно немного приукрасить. Ниже перечислены отдельные стилевые атрибуты, предусмотренные для форматирования внешнего вида HTML таблиц.
align – Выравнивание содержимого ячейки по горизонтали; возможные значения: left (по умолчанию), right, center и char. Применяется ко всем тегам. bgcolor – Фоновый цвет. Применяется ко всем тегам. border – Толщина разделительной линии (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегом <table>. cellpadding – Расстояние между разделительной линий и содержимым ячейки (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>. cellspacing – Расстояние между ячейками (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>. colspan – Количество столбцов, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>. rowspan – Количество строк, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>. rules – Применяется для отображения линеек между ячейками; возможные значения: rows, cols и all. Применяется с тегом <table>. valign – Выравнивание содержимого ячейки по вертикали; возможные значения: top, bottom и baseline. По умолчанию значение center. Применяется с тегами <td>, <th> и <tr>. width – Ширина таблицы или ячейки (значение указывается в пикселях или в процентном выражении относительно ширины страницы). Применяется со всеми тегами.
HTML-документи, які містять фрейми
Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.
Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощуе навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню веб-сайту.