Випуск №5. Table — HTML тег таблиці

21

Доброго часу шановні передплатники!

Сьогоднішній урок ми присвятимо створення таблиць в мові HTML. Таблиці в HTML створюються за допомогою тега table.

У WEB таблиці — це не тільки якісь звітні дані, які не тільки розклад або ще що-небудь в цьому стилі. У WEB таблицею можна поставити цілу структуру сайту.

Випуск №5. Table — HTML тег таблиці

Скільки ви таких сторінок бачили в Internet?

Тисячі і тисячі. Але якщо розібратися, то це ось така таблиця.

Запитаєте ви, а як розташовуються елементи на сторінці, рівному? А вони полягають у свої таблиці і вирівнюються потрібним чином.

Завдяки тому, що в кожну комірку таблиці, ми можемо розмістити нову таблицю будь-якої структури (або навіть кілька таблиць), можна добитися необхідного результату.

HTML-тег таблиці є тег table, рядком таблиці є тег tr, а стовпцем таблиці — тег td.

Таблиця заповнюється за рядками зверху вниз, а по стовпцях зліва на права. Кількість стовпців у рядку повинно бути однакове для всіх рядків.

Давайте розглянемо приклад, і ви відразу все зрозумієте.

Зробимо таку таблицю:

Випуск №5. Table — HTML тег таблиці

Зробимо це наступним чином:

Ставимо тег

і починаємо формувати перший рядок, пишемо:

У нас вийшла перша рядок таблиці з трьома стовпцями. Аналогічно формуємо другий рядок:

І третій:

Наші три рядки сформовані, залишилося закрити тег

Клітинка 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.

Ви, напевно, помітили, що кількість елементів у кожному рядку таблиці одне і теж. Так і повинно бути, але як же тоді зробити подібну таблицю на цю?

Випуск №5. Table — HTML тег таблиці

Для цього нам знадобляться параметри тега

colspan і rowspan..

Отже:

Формуємо перший рядок: так як в першому рядку у нас одна клітинка, і вона об’єднує три осередки другого рядка, то для однієї клітинки першого рядка вкажемо параметр colspan=3.

Друга рядок це просто три осередки:

Третій рядок: п’ята клітинка третього рядка об’єднує дві комірки другого рядка ( 2 і 3) і два рядки (третю і четверту).

Тому для неї задамо colspan=2 і rowspan=2. Осередок № 6 залишається.

Таким чином виходить, що в четвертому рядку повинна бути одна клітинка ()

1
2 3 4
5 6
7

Наша таблиця побудована.

Роль таблиць WEB дуже велика, тому рекомендую розібратися з побудовою таблиць.

Потренуватися можна на прикладах.

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

Посилання на файл Архів 5 уроку

Вправа:

Таблиця 1.

Випуск №5. Table — HTML тег таблиці

Таблиця 2.

Випуск №5. Table — HTML тег таблиці

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

Якщо є питання пишіть на E-mail: [email protected]

Проект webformyself.com — основи самостійного сайтобудування

З повагою, Андрій Бернацький.