Сьогоднішній урок ми присвятимо створення таблиць в мові HTML. Таблиці в HTML створюються за допомогою тега table.
У WEB таблиці — це не тільки якісь звітні дані, які не тільки розклад або ще що-небудь в цьому стилі. У WEB таблицею можна поставити цілу структуру сайту.
Скільки ви таких сторінок бачили в Internet?
Тисячі і тисячі. Але якщо розібратися, то це ось така таблиця.
Запитаєте ви, а як розташовуються елементи на сторінці, рівному? А вони полягають у свої таблиці і вирівнюються потрібним чином.
Завдяки тому, що в кожну комірку таблиці, ми можемо розмістити нову таблицю будь-якої структури (або навіть кілька таблиць), можна добитися необхідного результату.
HTML-тег таблиці є тег table, рядком таблиці є тег tr, а стовпцем таблиці — тег td.
Таблиця заповнюється за рядками зверху вниз, а по стовпцях зліва на права. Кількість стовпців у рядку повинно бути однакове для всіх рядків.
Давайте розглянемо приклад, і ви відразу все зрозумієте.
Зробимо таку таблицю:
Зробимо це наступним чином:
Ставимо тег
і починаємо формувати перший рядок, пишемо:
Клітинка 1, рядок 1
Клітинка 3, рядок 1
У нас вийшла перша рядок таблиці з трьома стовпцями. Аналогічно формуємо другий рядок:
Клітинка 1, рядок 2
Клітинка 2, рядок 2
Клітинка 3, рядок 2
І третій:
Клітинка 1, рядок 3
Клітинка 2, рядок 3
Осередок 3 рядок 3
Наші три рядки сформовані, залишилося закрити тег
.
Наша таблиця готова.
Якщо таблиці треба дати заголовок, то за це відповідає тег Заголовка таблиці .
За замовчуванням він розташовується по центру, над таблицею. Тег заголовка таблиці необхідно розміщувати між тегом
і першим тегом
.
В принципі заголовок можна зробити, поставивши тег
Заголовок таблиці
перед тегом
.
Якщо стовпця треба дати заголовок, то для цього передбачений тег
Заголовок стовпця
.
Тег
— те ж що і тег
, але його вміст відображається жирним шрифтом з вирівнюванням по центру, а вміст
як ви вже побачили, з вирівнюванням по лівому краю, зі шрифтом за замовчуванням.
З тегами, що стосуються таблиць, мабуть, все.
Тепер розглянемо параметри цих тегів.
Тег
має наступні параметри:
width=число — ширина таблиці в пікселях або у % відносно ширини вікна браузера.
height=число – висота таблиці в пікселях або у % відносно ширини вікна браузера (висота зазвичай розраховується автоматично, тому міняти її не рекомендую).
align = left — вирівнювання таблиці по лівому краю.
right — вирівнювання таблиці по правому краю.
center — вирівнювання таблиці по центру.
border= число — товщина рамки таблиці в пікселях.
cellspacing=число – відстань між суміжними комірками в пікселях (за замовчуванням = 2).
cellpadding=число — відстань між вмістом комірки і її кордоном в пікселях (за замовчуванням =1).
bgcolor= колір — колір тла таблиці.
background= ” url – фонове зображення для таблиці.
bordercolor=колір – колір усіх ліній рамки таблиці.
Розглянемо параметри тегів
,
,
:
width=число — ширина комірки в пікселях або у % відносно ширини вікна браузера (для
не застосовується).
height=число – висота комірки в пікселях або у % відносно ширини вікна браузера (для
не застосовується).
(висота зазвичай розраховується автоматично, тому міняти її не рекомендую).
align = left — вирівнювання в клітинці по лівому краю.
right — вирівнювання в комірці по правому краю.
center — вирівнювання в клітинці по центру.
valign – вертикальне вирівнювання вмісту комірки.
top – вирівнювання по верхньому краю комірки.
bottom — вирівнювання по нижньому краю комірки.
middle — вирівнювання по середині комірки.
bgcolor= цсє — колір тла комірки.
background= ” url — фонове зображення для клітинки.
bordercolor=колір — колір усіх ліній межі осередку.
colspan=число – кількість об’єднуваних осередків по стовпцях (для
не застосовується).
rowspan=число – кількість об’єднуваних клітинок за рядками (для
не застосовується).
Давайте детальніше зупинимося на параметрах colspan і rowspan.
Ви, напевно, помітили, що кількість елементів у кожному рядку таблиці одне і теж. Так і повинно бути, але як же тоді зробити подібну таблицю на цю?
Для цього нам знадобляться параметри тега
colspan і rowspan..
Отже:
Формуємо перший рядок: так як в першому рядку у нас одна клітинка, і вона об’єднує три осередки другого рядка, то для однієї клітинки першого рядка вкажемо параметр colspan=3.
1
Друга рядок це просто три осередки:
2
3
4
Третій рядок: п’ята клітинка третього рядка об’єднує дві комірки другого рядка ( 2 і 3) і два рядки (третю і четверту).
Тому для неї задамо colspan=2 і rowspan=2. Осередок № 6 залишається.
5
6
Таким чином виходить, що в четвертому рядку повинна бути одна клітинка ()
7
Наша таблиця побудована.
Роль таблиць WEB дуже велика, тому рекомендую розібратися з побудовою таблиць.
Потренуватися можна на прикладах.
Якщо виникнуть питання, пишіть або скачайте файл з готовими таблицями з вправи.
Посилання на файл Архів 5 уроку
Вправа:
Таблиця 1.
Таблиця 2.
На сьогодні, випуск присвячений HTML-тегами таблиці, я закінчую.
Від автора: вітаю вас, друзі. З цієї коротенької статті ви дізнаєтеся, як зробити карту сайту на DLE, що таке карта сайту й навіщо взагалі вона потрібна.