Лекція 5 Тема: Таблиці html
План:
Використання таблиць у html-документах. Створення таблиці.
Об’єднання комірок таблиці.
Встановлення ширини таблиці та комірок.
Форматування тексту та оформлення рамок таблиці.
Колірне оформлення таблиць.
Використання таблиць для розміщення об’єктів на web-сторінці.
Список рекомендованих джерел.
Основна література: 3 -5, 7
Додаткова література: 11, 13, 15, 16, 19, 22, 23
Інтернет-ресурси: 28, 29
1. Використання таблиць у html-документах. Створення таблиці
У найпростішій таблиці інформація розміщена у комірках, утворених у результаті поділу прямокутника на стовпці та рядки. У більшості комірок зберігаються дані, деякі комірки, зазвичай розміщені у верхній або боковій частині таблиці, містять заголовки. У html-документах таблицю заповнюють зліва направо, комірку за коміркою, починаючи з лівого верхнього кута і закінчуючи правим нижнім.
Для створення таблиці використовують чотири елементи. Таблицю описують за допомогою тегів <TABLE>...</TABLE>; вона повинна мати один або кілька рядків <TR>...</TR>, у кожному з яких може міститися заголовок <ТН>...</ТН> або дані <TD>...</TD>.
За промовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими , використовують атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселях, наприклад <TABLE BORDER=5>.
Таблиця може мати заголовок, який задається тегами <CAPTION> та </CAPTION>. Тег <CAPTION> може містити атрибут ALIGN з одним із значень top або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї (за умовчанням встановлено значення top). Наприклад, <CAPTION ALIGN= bottom>Poзклaд пар</САРТІОN>.
Кожний рядок таблиці починається з тегу <TR> і закінчується тегом </TR>. Якщо рядок містить заголовки стовпців таблиці, то використовують теги <ТН> і </ТН>, якщо ж дані – то <TD> і </TD>. Наприклад, <ТН>Понеділок</ТН> або <TD>1.Математика</ТD>. У таблиці слово «Понеділок» буде виділене браузером напівжирним шрифтом, а текст «1.Математика» відформатовано стандартним способом.
Визначимо структуру таблиці, вигляд якої у вікні браузера, показано на рис. 5.1. Вона містить назви п’яти робочих днів тижня, на кожен з яких припадає 2-3 пари. Html-код для створення цієї таблиці матиме такий вигляд:
<HTML>
<TITLE>Приклад простої таблиці</TITLE> <BODY>
<TABLE BORDER="1"> <САРТION>Розклад пар</САРТION>
<TR>
<TH>Понеділок</TH>
<TH>Вівторок</TH>
<TH>Середа</TH>
<TH>Четвер</TH>
<TH>П’ятниця</TH>
</TR>
<TR>
<TD>1.Економічна інформатика</TD>
<TD>1.Математика для економістів</TD>
<TD>1.Регіональна економіка</TD>
<TD>1.Web-дизайн</TD>
<TD>1.Регіональна економіка</TD>
</TR>
<TR>
<TD>2.Історія української культури</TD>
<TD>2.Безпека життєдіяльності</TD>
<TD>2.Політична економія</TD>
<TD>2.Іноземна мова</TD>
<TD>2.Математика для економістів</TD>
</TR>
<TR>
<TD>3.Політична економія</TD>
<TD>3.Фізичне виховання</TD>
<TD></TD>
<TD>3.Фізичне виховання</TD>
<TD></TD>
</TR>
</TABLE> </BODY> </HTML>
Зверніть увагу на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код (non-breaking space – нерозривний пробіл). Після цього порожня комірка буде взята в рамку.
Рис. 5.1. Документ, який містить таблицю