Робимо сайт на html: як робити таблиці. Урок 2.

Відео: Як створити сайт.Відеоурок по HTML для чайніков.УРОК 1

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

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

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

У будь-якої таблиці є свої параметри і записуються вони після слова

, робимо пробіл і починаємо писати всередині тега. наприклад , головне не ставити прогалин перед словом table, якщо потрібно прописати більше параметрів відокремлюємо їх пробілами.

Перерахуємо параметри таблиці.
1. Вирівнювання по горизонталі: align = center, align = right, align = left Всі ці параметри відповідають за вирівнювання всієї таблиці по горизонталі (по центру, по правому краю сторінки, по лівому краю сторінки) Дуже корисний тег, таблиця збилися вліво (по замовчуванням) виглядає погано.
2. Вирівнювання по вертикалі: valign = top - вирівнювання по верхньому краю сторінки, щоб таблиці не виявлялася в центрі-valign = bottom - по нижньому краю сторінки, ніколи не встречал- valign = center - по центру, теж вкрай рідко застосовується.
3. Ширина таблиці: Width - вимірюється у відсотках, пікселях, точках. Наприклад: Width = 800px або Width = 90%. Помилка - Width = 870
4. Висота таблиці: Height - одиниці вимірюванні ті ж, запам`ятовувати цей параметр напам`ять не варто, попрацюєте саме запам`ятається. Приклад: Height = 90% - якщо параметр valign = top в низу сторінки буде 10% порожнього місця.
5. bgcolor - колір фону таблиці - встановлюється для всієї таблиці відразу, але можна окремо вказати і кольору осередків. Колір вказується в форматі RGB - числа від 000000 до FFFFFF - кожні два числа кодують прозорість певного кольору (червоного, зеленого або блакитного), числа можна підбирати методом тику, але можна і в Adobe Photoshop або скористатися таблицями квітів, або спеціальними програмами.
6. background - встановлює фон таблиці у вигляді малюнка. Ви повинні вказати шлях до малюнка, до речі, помістіть малюнок в папку images, яка знаходиться (повинна знаходитися) у папці з вашим сайтом. Приклад: background = images / fon-table.jpg проаналізуємо - тут вказаний відносний шлях до вашого малюнку з розширенням .jpg Приклад абсолютного шляху: background = http: //vash-sait.narod.ru/images/fon-table.jpg легко бачити, що тут неув`язочка - ви не знаєте як називається ваш сайт і тому перший варіант вказівки шляху вам підходить, а другий ні, коли ви викладете сайт все буде працювати, відсутня частина адреси буде додаватися автоматично. Звертаю вашу увагу, що ніяких російських назв папок і файлів.
7. border - зовсім забув - рамка або кордону, border = 1 - цифра вказує товщину лінії рамки.
8. cellspacing - відстань між кордонами осередків таблиці. Приклад: cellspacing = 0 - відстань між кордонами осередків нуль пікселів.
9. cellpadding - відстань між кордонами осередків таблиці і вмістом цих осередків. Приклад: cellpadding = 0 - відстань між кордонами осередків таблиці і вмістом цих осередків нуль пікселів.
10. Приклад тега з усіма параметрами Як ви бачите ніяких зайвих прогалин до знака рівності (=) і після. Мова HTML терпимо ставиться до помилок, тому деякі доведеться шукати самостійно.

Усередині таблиці знаходяться рядки - теги теж парні, вони знаходяться всередині таблиці.
Приклад: - це таблиця всередині якої всього один рядок.
А це таблиця з двома рядками.

Відео: Таблиці html. Як створити і налаштувати осередки

Так розібратися важкувато, спробуємо просто розташувати теги трохи по іншому.

bgcolor = 003300 background = images / fon-table.jpg cellspacing = 0 cellpadding = 0 border = 1 gt;

Відео: Відеокурс HTML & CSS. Урок 3. Таблиці і списки

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

Осередок тег парний, всередині тега вже міститься текст, осередку йдуть одна за одною в кожному рядку окремо.

Приклад з помилкою:

1
1	2	3
1

Помилка №1 - в першому рядку таблиці сайту всього один осередок, а в другій їх три, якщо ми хотіли, щоб один осередок розтягувалася і по довжині дорівнювала трьом осередкам другого рядка, то нам доведеться додати параметр до тегу першого рядка.
Помилка №2 - ми не вказали тега вирівнювання для осередків, текст в таких осередках буде по центру, і якщо осередок висотою 500px - 500 пікселів, то можете собі уявити як буде виглядати текст знаходиться посередині, уявіть газету весь текст якої вирівнюється від центру.
Помилка №3 - ми не вказали довжину і висоту осередків - в такому випадку висота, і ширина будуть визначатися вмістом.

Хоча це все не проблема, працювати все буде - тільки криво :)

Перерахуйте параметри осередку:
Справа в тому, що параметри таблиці схожі за значенням з параметрами осередку (виняток пункт 9 і 10), тільки застосовуються до певної осередку. Розглянемо додаткові.
1. Colspan - параметр об`єднання осередків по горизонталі. Приклад: Colspan = 2 цей запис означає, що осередок розтягується по горизонталі на два осередки.
2. Rowspan - параметр об`єднання осередків по вертикалі. Приклад: Rowspan = 2 цей запис означає, що осередок розтягується по вертикалі.

Тепер знаючи параметри об`єднання осередків, просто додаємо їх до тих осередків, які потрібно розтягнути.
Приклад з помилкою:

1
1	Height = 80% gt; 2	Height = 80% gt; 3
1

І додаємо теги вирівнювання ....

Відео: HTML5 уроки для початківців | # 11 - Створення таблиць в HTML

Спробуйте закріпити, просто створіть таблиці з іншими
характеристиками - наприклад з трьома осередками в першому рядку, перша осередок розтягнута на три вниз (Rowspan), в інших рядках по два осередки.

Я сподіваюся ви звернули увагу на те, що я вказав параметри довжини і ширини осередків в таблиці, якщо ви так не будете робити вираховуючи довжину рядка підсумовуючи довжини всіх осередків, а так само висоту, у вас буде кривої шаблон - малюнок буде по центру осередки з незрозумілими розмірами.
І ще ви повинні визначитися які малюнки у вас будуть фоном, бекграундом, а які просто вставлені. Справа в тому, що бекграунд - малюнки фон можуть дублюватися, а якщо ви не хочете щоб вони дублювалися потрібно жорстко в пікселях вказувати довжину і ширину цих осередків, але пам`ятайте що всі осередки взаємопов`язані - змінюєте в одній, подивіться довжину і ширину інших осередків - все правильно? Звертаю вашу увагу, що якщо малюнок є фоном осередку або таблиці, він не буде реагувати на додавання тексту в осередок зміщенням вниз.

Вдало попрацювати над сайтом - раджу прочитати і інші статті по темі створення сайтів.

І не бійтеся задавати питання.