РОЗМІЧАННЯ ТАБЛИЦЬ ЗАСОБАМИ HTML
Урок 33
Теги розмітки таблиці
Основні теги розмітки таблиці:
�
Тег | Призначення |
<table>…</table> | Обмежують таблицю |
<tr>…</tr> | Обмежують рядок таблиці |
<td>…</td> | Обмежують клітинку таблиці |
<th>…</th> | Використовують замість тегу <td>…</td> для виокремлення заголовків стовпців таблиці |
Теги розмітки таблиці
Розглянемо, як розмічати таблицю відповідними тегами
Теги розмітки таблиці
Макет вебсторінки можна утворити за допомогою HTML-таблиці, об’єднуючи певні клітинки і визначаючи розміщення певних об’єктів. Але зараз для вебсторінок застосовують:
CSS (від англ. Cascading Style Sheets) — каскадні таблиці стилів, які розміщують у HTML-файлі або в окремому файлі.
теги структурування документа
і
Атрибути тегів розмітки таблиці
Атрибути в тегах розмітки таблиці впливають на вигляд таблиці, клітинок і написів у них:
Атрибут | Призначення |
align | Вирівнювання таблиці у вікні браузера |
background | Фоновий малюнок |
bgcolor | Колір тла |
border | Товщина рамки в пікселях |
bordercolor | Колір рамки |
cellspacing | Відстань між клітинками таблиці |
cellpadding | Відстань між текстом клітинки та її межею |
rules | Відображення рамок таблиці |
title | Спливна підказка |
Атрибути тегів розмітки таблиці
Оскільки ширина клітинок одного стовпця не може бути різною в різних рядках, то її достатньо вказати лише для одного рядка.
ширина таблиці дорівнює ширині робочого поля вікна браузера
ширина клітинки дорівнює половині ширини таблиці
<table width=“100%”>
<table width=“50%”>
Відступи
Для налаштування відстаней між клітинками, а також між текстом і межами використовують атрибути відступів
Форматування вмісту клітинок
Теги рядків (<tr>) і клітинок (<td>) можуть включати атрибути для змінення вирівнювання тексту відносно меж клітинки.
Атрибут align дозволяє задавати горизонтальне вирівнювання:
Атрибут valign дозволяє задавати вертикальне вирівнювання:
Форматування вмісту клітинок
Варіанти вирівнювання тексту в клітинках
Форматування вмісту клітинок
При розмічанні таблиці виникає потреба об’єднати кілька клітинок. Для цього використовують атрибути:
colspan
(злиття клітинок у рядку)
rowspan
(злиття клітинок у стовпці)
Питання для самоперевірки�
1. Як додати таблицю на вебсторінку сайту?
2. Як вирівняти текст у клітинці таблиці по горизонталі?
3. Як вирівняти текст у клітинці таблиці по вертикалі?
4. Як установити товщину меж таблиці?
5. Як установити відступ від тексту в клітинці до її меж?
6. Як об’єднати клітинки одного рядка або стовпця таблиці?
Правила ТБ
Працюємо за комп’ютером
Працюємо за комп’ютером
Дякую за увагу!