Створення таблиць в html

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

У цій статті Ви познайомитеся з найважливішим моментом при створенні свого сайту - таблицями!

Я думаю, що Ви звернули увагу на те, що в попередніх статтях ми не займалися вирівнюванням, якщо, звичайно, не брати до уваги вирівнювання по лівому краю, по центру і по правому краю браузера. Власне, цього вкрай недостатньо для красивого оформлення сторінки. Яскравий тому приклад - наша форма, яку ми створили в попередній статті. Як можна бачити, форма дуже нерівне. Ось, як раз для того, щоб вирівнювати елементи сторінки більш точно, ніж просто по краях браузера, і були придумані html таблиці.

Давайте для початку створимо просту html таблицю.

Але перш, ніж це робити, давайте відновимо код, який у нас залишився після створення форми, тобто ось цей: Створення форм в HTML

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

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

Щоб стало зрозуміліше, давайте відразу після форми напишемо такі рядки:

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

Тепер поговоримо про атрибути. Спочатку атрибути тега.

1) Атрибут "border", Значення якого задає товщину рамки таблиці в пікселях. За замовчуванням, рамки взагалі немає. Давайте поставимо значення цього атрибута в"2".

2) Атрибути "width"І"height"Задають ширину і висоту таблиці відповідно. Розмір може бути вказаний, як в абсолютних одиницях (пікселі, px), Так і у відносних (відсотки, %). Відносний розмір, ніж хороший, так це тим, що він завжди підлаштується під будь-який дозвіл монітора користувача та будь-який браузер. А абсолютні тим хороші, що при будь-яких браузерах і будь-яких дозволах монітора не буде сюрпризів з дизайном, пов`язані, наприклад, з розтягуванням елементів (якщо монітор широкоекранний, наприклад). Який вибрати: вирішувати Вам, але я, особисто, вважаю за краще, в основному, відносні розміри, зрідка розбавляючи абсолютними, в залежності від ситуації. Давайте поставимо значення атрибутів "width"І"height"По"30%".

Думаю, що атрибутів Вам дав досить. Таким чином, тег виглядає так:

Подивіться в браузері, як виглядає тепер наша таблиця.

Тепер поговоримо про атрибути тега:

1) Атрибут "height". Зауважте, що у тега немає атрибута"width", Втім, це логічно, адже тег відповідає за рядок, а, отже, за висоту. А за ширину відповідають стовпці.

Власне, навіть атрибут "height"Не особливо-то і використовується, тому можна сказати, що атрибутів у тега і зовсім немає.

Найбільш багатим за кількістю атрибутів є тег, який відповідає за елемент таблиці:

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

1) Атрибут "width". Пояснення той же, що і для атрибута тега. Відповідно, атрибута"height"Немає.

2) Атрибут "colspan". Значення цього атрибута означає кількість стовпців, яке займає ця група. Поставте цей атрибут в значення"2", Де у нас координати"(1, 1)". Відразу подивіться на результат.

3) Атрибут "rowspan". Значення цього атрибута означає кількість рядків, яке займає ця група. Поставте цей атрибут в значення"2", Де координати"(1, 2)". Відразу подивіться на результат.

4) Атрибут "align". Значення цього атрибута означає вирівнювання елемента всередині осередку по горизонталі. Бувають три значення:"left"(По лівому краю),"center" (по центру), "right"(По правому краю). За умовчанням стоїть вирівнювання по лівому краю. Давайте вирівняти координати"(1, 1)"По центру, а координати"(2, 1)"По правому краю. Подивіться результат.

5) Атрибут "valign". Значення цього атрибута означає вирівнювання елемента всередині осередку по вертикалі. Знову є тільки три значення:"top"(По верху),"middle"(По середині),"bottom"(По низу). За замовчуванням стоїть значення"middle". Давайте поміняємо значення цього атрибута у елемента"(2, 1)"На"top". А також у елемента"(2, 2)"Поставимо значення"bottom". Відразу подивіться на результат.

Таким чином, Ваша таблиця має такий HTML-код:

В принципі, з теорією все. А ось на практиці необхідно навчитися застосовувати ці знання. І як практики, ми зараз вирівняти нашу форму. Для початку зітріть все теги , так як тепер на новий рядок у нас буде переходити тег .

Відео: Таблиця в html. (Уроки HTML)

Тепер поміщаємо весь вміст форми в таблицю, тобто відразу після тега закриваємо таблицю за допомогою тега (не забуваємо про принцип вкладеності!). Рекомендую поставити тимчасово рамку у таблиці, щоб бачити, як все вирівнюється, і як ділиться спільний простір між елементами таблиці.

Тепер кожен рядок форми поміщаємо в окремий тег. І робимо два стовпці: перший для опису елемента, а другий для самого елемента форми. І так робимо аж до .

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

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

Далі все поміщаємо в один рядок і один осередок, але шириною цей осередок буде в два стовпці.

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

З повагою, Михайло Русаков.

P.S. Якщо Ви хочете дізнатися більше по HTML, то подивіться мій безкоштовний курс з прикладом створення сайту на HTML: https://srs.myrusakov.ru/html