<DD> <i>мова для розмічування гіпертекстових web-cтopiнок</i>
<DT> броузер
<DD> <i>програма для перегляду web-документів</i>
<DT> тег
<DD> <i>засіб для записування команд мовоюHTML</I>
</DL>
На екрані у вікні броузера побачимо:
Створення таблиць.У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації. У web-дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціювання графічних чи інших об'єктів на екрані. Такі таблиці утворюють з невидимими межами (рамками), а в клітинках розташовують картинки, тексти тощо.
Таблиці створюють за допомогою таких тегів:
<TABLE параметри>
<CAPTION> Заголовок таблиці </CAPTION>
Тут пишемо теги для заповнення клітинок таблиці рядок за рядком
</TABLE>
Для заповнення клітинок таблиці використовують такі парні теги (закриваючі теги можна не зазначати):
<TR>...</TR>
Формують рядок таблиці
<ТН>текст</ТН>
Формують клітинку з заголовком рядка чи стовпця
<ТD>текст</ТD>
Формують текст кожної клітинки.
Заголовки рядків і стовпців виводитимуться товстішим шрифтом.
Приклад. Створимо на web-сторінці таблицю-витяг табеля успішності за три перші чверті з трьох предметів: інформатики, геометрії та алгебри:
<CAPTION Align="bottom"><i> Мої оцінки за три чверті: </i></CAPTION>
<TR>
<th></th>
<TH>І чверть </TH>
<TH>II чверть</TH>
<TH>ІII чверть</TH>
</TR>
<TR>
<TH align="left">Інформатика</ТН>
<TD>10</TD>
<TD>12</TD>
<TD>11</TD>
</TR>
<TR>
<TH ALIGN="left">Геометрія</TH>
<TD>12</TD>
<TD>10</TD>
<TD>10</TD>
</TR>
<TR>
<TH ALIGN="left">Aлгебра</TH>
<TD>9</TD>
<TD>10</TD>
<TD>10</TD>
</TR>
</TABLE>
</CENTER>
Як така таблиця буде виглядати в броузері показано на малюнку.
Тег <TABLE> може мати багато інших додаткових параметрів:
§ Width. Задає ширину таблиці або у відсотках відносно ширини вікна броузера, або у пікселах (Width=”60%” або Width=”800”).
§ Border. Задає ширину рамки таблиці.
§ Align. Задає вирівнювання таблиці.
§ CellSpacing. Задає відстань між стінками таблиці.
§ CellSpadding. Задає відстань між границями комірки і елементами даних.
§ Rules і Frame. Визначають, які з границь повинні малюватися всередині і зовні таблиці. Атрибут Rules може приймати такі значення: None – лінії відсутні, Rows – лінії тільки між рядками, Cols – лінії тільки між стовпцями, All – усі лінії. Атрибут Frame може приймати такі значення: Void – границі відсутні, Above – верхня границя, Below – нижня границя, Hsides – ліва та права границі відсутні, Vsides – верхня та нижня границі відсутні, Lhs – тільки ліва границя, Rhs – тільки права границя.
У тегів <TR>, <TH> і <TD> може бути атрибут Align зі значеннями Left, Right або Center, який задає вирівнювання у рядку або комірці таблиці по горизонталі, а також атрибут Valign зі значеннями Top, Bottom або Center, який задає вирівнювання у рядку або комірці таблиці по вертикалі. Наприклад:
У тега <TH> може бути ще один атрибут – Scope (значення Row або Col), який вказує для чого <TH> є заголовком – для рядка чи стовпця.
Для об’єднання декількох комірок в одну для тегів <TH> і <TD> існують атрибути Сolspan і Rowspan, які об’єднують вказану кількість комірок в одну по горизонталі і вертикалі відповідно. Для зміни кольору рядка або комірки використовується атрибут BgColor.
Приклад:Таблиця з об’єднаними та зафарбованими комірками.
<table border="1">
<TC>Специфікація комп’ютерів</TC>
<tr>
<th> </th>
<th>модель 100</th>
<th>модель 200</th>
</tr>
<tr bgcolor="magenta">
<th>Процесор</th>
<td>G9-l.6</td>
<td>G9-l.7</td>
</tr>
<tr>
<th>Винчестер</th>
<td>78 Гб</td>
<td BgColor=”blue”>90 Гб</td>
</tr>
<tr>
<th>Bидеoкapтa</th>
<td colspan="2" BgColor=”red”>Rageous 428p</td>
</tr>
<tr>
<th>A/B Вихід</th>
<td rowspan="2">Немає</td>
<td>Є</td>
</tr>
<tr>
<th>Пopт змінного дисководу</th>
<td>Опціонально</td>
</tr>
</table>
Вигляд такої таблиці у броузері показано на малюнку.
