Створення таблиці в HTML

29 0 Новини високих технологій

У таблицях зручно розташовувати дані, об'єднані між собою певними залежностями. Для створення таблиць у HTML використовуються спеціальні HTML-теги. З їх допомогою можна сконструювати таблицю будь-якої складності. Крім того, досить поширена практика табличної верстки, дозволяє красиво і зручно розташовувати елементи на веб-сторінці.

Створення першої таблиці

Відкрийте, як правило, текстовий редактор, створіть порожній HTML-файл і між тегами вставте наступний код:













1 2 3
4 5 6

Збережіть документ. Відкрийте файл. Якщо ніде не допущено помилок, браузер видасть наступний результат:

Створення таблиці в HTML

Розберемо описаний код:

  1. Теги
    оголошують браузеру, що потрібно створити таблицю.
  2. Атрибут border задає межі таблиці, а параметр 1 їх товщину в пікселях.
  3. За допомогою задаються рядка таблиці.
  4. Кількість тегів визначає кількість стовпців.
  5. Цифри між тегами є вмістом комірок.

Якщо потрібно залишити комірку порожньою, слід прописати в ній якийсь невидимий символ, наприклад знак пробілу , а не залишати її взагалі без вмісту. Це необхідно для коректного відображення порожньої клітинки усіма браузерами. Деякі з них можуть спотворити результат, якщо цього не зробити.

Вмістом може бути абсолютно будь-який елемент HTML: числа, текст, зображення, і навіть самі таблиці цілі сторінки. Головне тут - не тільки знати як зробити таблицю в HTML, але і дотримати вкладеність тегів.



Завдання розміру

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

  1. width - задає ширину.
  2. height - задає висоту.

Значення цих атрибутів можуть бути пікселі або відсотки. Деякі браузери невірно працюють з відсотками стосовно атрибута height. Тому слід тестувати свій код в кількох найпоширеніших:

  • IE.
  • Mozilla Firefox.
  • Opera.
  • Konqueror.
  • Safari.

При неправильному відображенні варто змінити значення висоти таблиці у відсотках на значення в пікселях. Вибір на користь пікселів можна зробити ще й по тому міркуванню, що відвідувач вашого сайту може зайти з пристрою, що має маленький монітор (стільниковий телефон). Текст у таблиці HTML на моніторі телефону буде підігнаний під його розмір. І якщо будуть встановлені відсотки, таблиця буде настільки мілкою, що неможливо буде прочитати її.

Використовуючи атрибути width і height, задамо розміри: ширина таблиці HTML - 300 а висота 200 пікселів:

  











1 2 3
4 5 6

В результаті браузер видасть таблицю з потрібними нам розмірами:



Створення таблиці в HTML

Позиціонування

Сенс цієї дії полягає в розташуванні як самого вмісту комірок, так і в розташуванні самої таблиці на веб-сторінці. Однак технологія HTML в таблицях, пропонуються на веб-сторінці, обмежується їх розташуванням зліва (за замовчуванням), по центру або праворуч за допомогою атрибута align та потрібних значень:

Значення Розташування на сторінці
left зліва (за замовчуванням)
center по центру
right праворуч

Синтаксис такий:

  

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

Для визначення розташування вмісту комірок ті ж самі атрибути з тими ж значеннями застосовуються до тегу :

  





вміст клітинки

Розташуємо нашу таблицю праворуч, а вміст комірок вирівняємо по центру:

  











1 2 3
4 5 6

У результаті повинно вийти ось що:

Створення таблиці в HTML

Об'єднання рядків

Щоб зробити кілька комірок рядка однією коміркою, використовується атрибут colspan зі значенням, рівним кількості об'єднуваних осередків. При цьому в коді видаляються наступні теги разом з їх вмістом. Кількість видаляються тегів одно значенням атрибуту colspan мінус один.

Розглянемо це правило на прикладі. Припустимо, необхідно створити таблицю по центру сторінки з довільними числами розміром 4 стовпця і 3 ряди. Потім об'єднати у другому ряді клітинки 2 і 3 по горизонталі щоб браузер видав ось такий результат:



Створення таблиці в HTML

Реалізацією такої таблиці у веб-документі буде наступний код:
11
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. В таблиці, наприклад, зручна буде реалізація нескладної таблиці фруктів та їх кольорів:

Створення таблиці в HTML

Як бачите, осередки цієї таблиці містять текст, зображення і заповнення кольором фону. До елементів комірок застосовні і будуть працювати всі теги HTML. У таблиці також можуть розташовуватися під гіперпосилання всіх їх формах (текстові, посилання, зображення тощо).

Особливо потрібно оговорити заповнення клітинок кольором: оскільки вони порожні, не містять ніяких даних, потрібно прописати порожній пробіл: . При цьому ширина комірки може не відповідати необхідної. А майже завжди так і відбувається. У цьому випадку до цього тегу застосовується атрибут width з необхідним значенням: .

Для коректного відображення кольору, застосовуваного до тексту або тексту, існують так звані безпечні кольори в HTML. Таблицю їх кодів можна знайти на безлічі сайтів. Безпечний колір HTML не означає, що він може завдати шкоди комп'ютеру, а означає, що він буде відображатися на консолі відвідувача вашого майбутнього сайту таким, як було задумано вами, без спотворень.

Заголовки таблиці

Часто виникає необхідність озаглавливать таблиці. Здійснюється це за допомогою спеціального парного тега . Розміщується він відразу ж після тега

перед :

  














Таблиця з числами
2 1
4 3
6 5

У браузері ця таблиця буде виглядати так:

Створення таблиці в HTML

Крім назви таблиць використовують назви стовпців або рядків за допомогою тега . Текст у таблиці HTML, укладений між цими тегами буде відображатися жирним шрифтом. До цього тегу застосуємо атрибут об'єднання клітинок по горизонталі colspan. Перетворимо наведену в якості прикладу таблицю, внісши зміни в код:

  

















Таблиця з числами
Парні Непарні
2 1
4 3
6 5


В результаті браузер видасть озаглавлену таблицю з озаглавленными стовпцями:
Створення таблиці в HTML
Для створення бічних заголовків, коли вони є елементами певного стовпця, тег



розташовується відразу ж після тега перед першим тегом

.

Таблична верстка веб-документа

Це найпоширеніший спосіб створення веб-сторінок. Суть табличної верстки полягає в розміщенні елементів на сторінці сайту у клітинках за допомогою таблиць. При цьому беруться окремі частини сайту (футер, хідер, боді), які, в свою чергу, також можуть бути осередками. На практиці здійснюється таблична верстка в більшості випадків за наступним алгоритмом:
  • веб-дизайнер готує макет сайту;
  • за допомогою графічних редакторів або іншого програмного забезпечення окремі елементи макета (кнопки, зображення) відрізаються і стають самостійними;
  • веб-програміст створює таблицю елементів сайту за задумом дизайнера, залишаючи пусті клітинки;
  • веб-програміст відтворює з нарізаних елементів картинку сайту, використовуючи мови розмітки веб-програмування, стежачи за функціональністю, працездатністю кожного їх них.
  • Таблична верстка сайту дозволяє красиво і логічно вибудувати вміст (контент) для надання зайшов на нього відвідувачу. Однак має два мінуси:
  • Вимагає великого обсягу коду.
  • Збільшують обсяг сайту і знижує швидкість його завантаження.
  • Але іноді, для того щоб дотримати технічне завдання з чітким позиціонуванням елементів, верстка HTML в таблиці стає єдиним рішенням.

    Популярі новини
    загрузка...