Створення таблиці в HTML
Створення першої таблиці
Відкрийте, як правило, текстовий редактор, створіть порожній HTML-файл і між тегами вставте наступний код: 1
2
3
4
5
6
Збережіть документ. Відкрийте файл. Якщо ніде не допущено помилок, браузер видасть наступний результат:
Розберемо описаний код:
- Теги оголошують браузеру, що потрібно створити таблицю.
- Атрибут border задає межі таблиці, а параметр 1 їх товщину в пікселях.
- За допомогою задаються рядка таблиці.
- Кількість тегів визначає кількість стовпців.
- Цифри між тегами є вмістом комірок.
Якщо потрібно залишити комірку порожньою, слід прописати в ній якийсь невидимий символ, наприклад знак пробілу , а не залишати її взагалі без вмісту. Це необхідно для коректного відображення порожньої клітинки усіма браузерами. Деякі з них можуть спотворити результат, якщо цього не зробити.
Вмістом може бути абсолютно будь-який елемент HTML: числа, текст, зображення, і навіть самі таблиці цілі сторінки. Головне тут - не тільки знати як зробити таблицю в HTML, але і дотримати вкладеність тегів.
Завдання розміру
Розглянутий вище приклад видав таблицю невеликого розміру, незручну для зорового сприйняття. Підігнати розміри таблиці під необхідні параметри можна за допомогою двох атрибутів:
- width - задає ширину.
- height - задає висоту.
Значення цих атрибутів можуть бути пікселі або відсотки. Деякі браузери невірно працюють з відсотками стосовно атрибута height. Тому слід тестувати свій код в кількох найпоширеніших:
- IE.
- Mozilla Firefox.
- Opera.
- Konqueror.
- Safari.
При неправильному відображенні варто змінити значення висоти таблиці у відсотках на значення в пікселях. Вибір на користь пікселів можна зробити ще й по тому міркуванню, що відвідувач вашого сайту може зайти з пристрою, що має маленький монітор (стільниковий телефон). Текст у таблиці HTML на моніторі телефону буде підігнаний під його розмір. І якщо будуть встановлені відсотки, таблиця буде настільки мілкою, що неможливо буде прочитати її.
Використовуючи атрибути width і height, задамо розміри: ширина таблиці HTML - 300 а висота 200 пікселів:
1
2
3
4
5
6
В результаті браузер видасть таблицю з потрібними нам розмірами:
Позиціонування
Сенс цієї дії полягає в розташуванні як самого вмісту комірок, так і в розташуванні самої таблиці на веб-сторінці. Однак технологія HTML в таблицях, пропонуються на веб-сторінці, обмежується їх розташуванням зліва (за замовчуванням), по центру або праворуч за допомогою атрибута align та потрібних значень:
| Значення | Розташування на сторінці |
| left | зліва (за замовчуванням) |
| center | по центру |
| right | праворуч |
Синтаксис такий:
В майбутньому, при вивченні технології CSS, ви дізнаєтеся, як позиціонувати елементи веб-документів по вертикалі.
Для визначення розташування вмісту комірок ті ж самі атрибути з тими ж значеннями застосовуються до тегу
: вміст клітинки
Розташуємо нашу таблицю праворуч, а вміст комірок вирівняємо по центру:
1
2
3
4
5
6
У результаті повинно вийти ось що:
Об'єднання рядків
Щоб зробити кілька комірок рядка однією коміркою, використовується атрибут colspan зі значенням, рівним кількості об'єднуваних осередків. При цьому в коді видаляються наступні теги
разом з їх вмістом. Кількість видаляються тегів одно значенням атрибуту colspan мінус один.Розглянемо це правило на прикладі. Припустимо, необхідно створити таблицю по центру сторінки з довільними числами розміром 4 стовпця і 3 ряди. Потім об'єднати у другому ряді клітинки 2 і 3 по горизонталі щоб браузер видав ось такий результат:
Реалізацією такої таблиці у веб-документі буде наступний код:
20
4
14
58
36
80
19
10
15
29
Зверніть увагу на код HTML в таблиці, де об'єднуються дві клітинки:
58
36
80
Так як значення параметра colspan дорівнює 2 то видалений 1 тег
, наступного за ним (2 - 1 = 1) з усім його вмістом. Якщо необхідно було б об'єднати три клітинки, то віддалялися б 2 тега .Об'єднання стовпців
Осередки по вертикалі об'єднуються з допомогою атрибута rowspan. Числове значення визначає кількість скорочуваних по вертикалі осередків. Ця тема представляє найбільші труднощі для студентів.
Самим легким для розуміння її є наступний спосіб: створіть таблицю і пронумеруйте осередку різними цифрами. Наприклад таку:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
Код таблиці буде наступний:
1
2
3
4
5
6
7
8
9
10
11
12
Давайте позбудемося двозначних чисел, об'єднавши стовпці з цифрами 6 і 10 7 і 11 8 і 12. Залишимо в об'єднаних по вертикалі клітинках числа: 6 7 і 8.
Об'єднуємо 6 і 10. В теге
, що містить цифру 6 прописуємо: , а конструкцію 10 видаляємо взагалі. Аналогічно потрібно зробити і для решти пар цифр. У підсумку код зміниться таким чином: 1
2
3
4
5
6
7
8
9
Браузер повинен видати потрібну нам таблицю:
Порада: поки ви не досягнете автоматизму дій при об'єднанні стовпців, використовуйте цей спосіб з використанням цифр, замінюючи їх на потрібні дані.
Вміст комірок
Як вже згадувалося вище, елементами клітинок можуть бути будь-які елементи HTML. В таблиці, наприклад, зручна буде реалізація нескладної таблиці фруктів та їх кольорів:
Як бачите, осередки цієї таблиці містять текст, зображення і заповнення кольором фону. До елементів комірок застосовні і будуть працювати всі теги HTML. У таблиці також можуть розташовуватися під гіперпосилання всіх їх формах (текстові, посилання, зображення тощо).
Особливо потрібно оговорити заповнення клітинок кольором: оскільки вони порожні, не містять ніяких даних, потрібно прописати порожній пробіл:
. При цьому ширина комірки може не відповідати необхідної. А майже завжди так і відбувається. У цьому випадку до цього тегу застосовується атрибут width з необхідним значенням: .Для коректного відображення кольору, застосовуваного до тексту або тексту, існують так звані безпечні кольори в HTML. Таблицю їх кодів можна знайти на безлічі сайтів. Безпечний колір HTML не означає, що він може завдати шкоди комп'ютеру, а означає, що він буде відображатися на консолі відвідувача вашого майбутнього сайту таким, як було задумано вами, без спотворень.
Заголовки таблиці
Часто виникає необхідність озаглавливать таблиці. Здійснюється це за допомогою спеціального парного тега
. Розміщується він відразу ж після тега Таблиця з числами
2
1
4
3
6
5
У браузері ця таблиця буде виглядати так:
Крім назви таблиць використовують назви стовпців або рядків за допомогою тега
. Текст у таблиці HTML, укладений між цими тегами буде відображатися жирним шрифтом. До цього тегу застосуємо атрибут об'єднання клітинок по горизонталі colspan. Перетворимо наведену в якості прикладу таблицю, внісши зміни в код: Таблиця з числами
Парні
Непарні
2
1
4
3
6
5
В результаті браузер видасть озаглавлену таблицю з озаглавленными стовпцями:
розташовується відразу ж після тега перед першим тегом
.
Таблична верстка веб-документа
Це найпоширеніший спосіб створення веб-сторінок. Суть табличної верстки полягає в розміщенні елементів на сторінці сайту у клітинках за допомогою таблиць. При цьому беруться окремі частини сайту (футер, хідер, боді), які, в свою чергу, також можуть бути осередками. На практиці здійснюється таблична верстка в більшості випадків за наступним алгоритмом: веб-дизайнер готує макет сайту; за допомогою графічних редакторів або іншого програмного забезпечення окремі елементи макета (кнопки, зображення) відрізаються і стають самостійними; веб-програміст створює таблицю елементів сайту за задумом дизайнера, залишаючи пусті клітинки; веб-програміст відтворює з нарізаних елементів картинку сайту, використовуючи мови розмітки веб-програмування, стежачи за функціональністю, працездатністю кожного їх них. Таблична верстка сайту дозволяє красиво і логічно вибудувати вміст (контент) для надання зайшов на нього відвідувачу. Однак має два мінуси: Вимагає великого обсягу коду. Збільшують обсяг сайту і знижує швидкість його завантаження. Але іноді, для того щоб дотримати технічне завдання з чітким позиціонуванням елементів, верстка HTML в таблиці стає єдиним рішенням.
