Таблиці на веб-сторінках

Таблиці на веб-сторінках

Таблиці будуються за принципом вкладення і вводяться за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками.

Тег <table></table>

Елемент <table> служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і клітинок, які задаються за допомогою тегів <tr> і <td>. Усередині <table> допустимо використовувати наступні теги: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> і <tr>.

Додавання таблиці

<table>

<tr>

<td>...</td>

</tr>

</table>

де <tr></tr> - теги рядків, всередину яких додаються теги стовпчиків (колонок) <td></td>.

Приклад побудови таблиці з 3 рядків та 4 колонок (3x4)

<!DOCTYPE html>

<html>

<head>

<title>Проста таблиця 3 на 4</title>

</head>

<body>

<table border="1">

<tr>

<td>Перший рядок. Перша колонка</td>

<td>Перший рядок. Друга колонка</td>

<td>Перший рядок. Третя колонка</td>

<td>Перший рядок. Четверта колонка</td>

</tr>

<tr>

<td>Другий рядок. Перша колонка</td>

<td>Другий рядок. Друга колонка</td>

<td>Другий рядок. Третя колонка</td>

<td>Другий рядок. Четверта колонка</td>

</tr>

<tr>

<td>Третій рядок. Перша колонка</td>

<td>Третій рядок. Друга колонка</td>

<td>Третій рядок. Третя колонка</td>

<td>Третій рядок. Четверта колонка</td>

</tr>

</table>

</body>

</html>

Той факт, що таблиці застосовуються досить часто і не тільки для відображення табличних даних зумовлений не тільки їх гнучкістю і універсальністю, а й достатній кількості атрибутів тегів <table>, <tr> і <td>.

Далі перераховані деякі атрибути тега <table>, які застосовуються найчастіше.

align

Задає вирівнювання таблиці по краю вікна браузера (горизонтальне вирівнювання). Можна вибрати зі значень left - вирівнювання таблиці по лівому краю, center - по центру і right - по правому краю. Коли використовуються значення left і right, текст починає обтікати малюнок поруч і знизу.

valign

Встановлює вертикальне вирівнювання вмісту клітинки. За замовчуванням контент клітинки розташовується по її вертикалі в центрі (middle), top - вирівнювання вмісту клітинки по верхньому краю рядка, middle - вирівнювання по середині, bottom -вирівнювання по нижньому краю, baseline - вирівнювання по базовій лінії, при цьому відбувається прив'язка вмісту комірки до однієї лінії.

bgcolor

Встановлює колір фону таблиці.

border

Встановлює товщину границі в пікселах навколо таблиці. При наявності цього атрибута також відображаються межі між клітинками.

cellpadding

Визначає відстань між границею клітинки і її вмістом. Цей атрибут додає порожній простір до клітинки, збільшуючи тим самим її розміри. Без cellpadding текст в таблиці «налипає» на рамку, погіршуючи тим самим його сприйняття. Додавання ж cellpadding дозволяє поліпшити читабельність тексту. При відсутності границь особливого значення цей атрибут не має, але може допомогти, коли потрібно встановити порожній проміжок між клітинками.

cellspacing

Задає відстань між зовнішніми границями клітинок. Якщо встановлений атрибут border, товщина межі приймається в розрахунок і входить в загальне значення.

cols

Атрибут cols вказує кількість стовпців в таблиці, допомагаючи браузеру в підготовці до її відображенню. Без цього атрибута таблиця буде показана тільки після того, як весь її вміст буде завантажено в браузер і проаналізовано. Використання атрибута cols дозволяє дещо прискорити відображення вмісту таблиці.

rules

Повідомляє браузеру, де відображати границі між клітинками. За замовчуванням рамка малюється навколо кожної клітинки, утворюючи тим самим сітку. На додаток можна вказати відображати лінії між колонками (значення cols), рядками (rows) або групами (groups), які визначаються наявністю тегів <thead>, <tfoot>, <tbody>, <colgroup> або <col>. Товщина границі вказується за допомогою атрибута border.

width

Задає ширину таблиці. Якщо загальна ширина вмісту перевищує зазначену ширину таблиці, то браузер буде намагатися «втиснутися» в задані розміри за рахунок форматування тексту. У разі, коли це неможливо, наприклад, в таблиці знаходяться зображення, атрибут width буде проігнорований, і нову ширину таблиці буде обчислено на основі її вмісту.

title

Описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент. Вид такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.

Атрибути width, height (висота), align, valign, bgcolor застосовуються і в окремих тегах рядків <tr> та колонок <td>, <th>.

Заголовки колонок та рядків

Тег <th> призначений для створення однієї клітинки таблиці, яка позначається як заголовок. Текст в такій клітинці відображається браузером зазвичай жирним шрифтом і вирівнюється по центру. Тег <th> повинен розміщуватися всередині контейнера <tr>, який в свою чергу розташовується всередині тега <table>.

Приклад таблиці з рядком заголовків

<!DOCTYPE html>

<html>

<head>

<title>Проста таблиця 3 на 4</title>

</head>

<body>

<table border="1">

<tr>

<th>Перший рядок. Перша колонка</th>

<th>Перший рядок. Друга колонка</th>

<th>Перший рядок. Третя колонка</th>

</tr>

<tr>

<td>Другий рядок. Перша колонка</td>

<td>Другий рядок. Друга колонка</td>

<td>Другий рядок. Третя колонка</td>

</tr>

</table>

</body>

</html>

Об'єднання клітинок

Атрибут colspan

Встановлює число клітинок, які повинні бути об'єднані по горизонталі. Цей атрибут має сенс для таблиць, що складаються з декількох колонок.

Атрибут rowspan

Встановлює число клітинок, які повинні бути об'єднані по вертикалі. Цей атрибут має сенс для таблиць, що складаються з декількох рядків.

Приклад таблиці з об'єднаними клітинками

<!DOCTYPE html>

<html>

<head>

<title>Об'єднання клітинок</title>

</head>

<body>

<table width="100%" border="1">

<tr>

<th colspan="3">Об'єднання по горизонталі</th>

</tr>

<tr>

<td>Другий рядок. Перша колонка</td>

<td>Другий рядок. Друга колонка</td>

<td rowspan="2">Об'єднання по вертикалі</td>

</tr>

<tr>

<td>Третій рядок. Перша колонка</td>

<td>Третій рядок. Друга колонка</td>

</tr>

</table>

</body>

</html>

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

Приклад табличної верстки веб-сторінки

<!DOCTYPE html>

<html>

<head>

<title>Модульні блоки у поданні таблиці</title>

</head>

<body>

<table width="100%" cellpadding="5" cellspacing="5">

<tr bgcolor="#00FF00" align="center" height="50px">

<td colspan="2">Верхній контейнер (шапка сайту, header)</td>

</tr>

<tr>

<td bgcolor="#ADFF2F" width="20%">

<ul><h3>Меню</h3>

<li>Головна сторінка</li>

<li>Про сайт</li>

<li>Послуги</li>

<li>Контакти</li>

</ul>

</td>

<td bgcolor="#98FB98">

Контент сторінки

</td>

</tr>

<tr bgcolor="#FFA500" align="center">

<td colspan="2">Нижній контейнер (підвал, footer)</td>

</tr>

</table>

</body>

</html>

Опрацюйте теоретичні відомості:

04_Таблиці.pdf

Практична частина

Вправа

Виконайте завдання за зразком:

Текст тегу <title> - Прізвище Ім'я.

Зберегти файл з іменем timetable_своє прізвище.html

Збережений файл завантажте на сторінку завдання у Google-клас, обравши у правій стороні вікна кнопку "Додати або створити".

Після завантаження файлу, обов'язково натисніть кнопку "Позначити як виконане"!