Створення таблиць у HTML
У цій статті Ви познайомитеся з найважливішим моментом під час створення свого сайту -таблицями!
Давайте для початку створимо просту html таблицю.
Але перш, ніж це робити, відновимо код, який у нас залишився після створення форми, тобто ось цей: Створення форм у HTML
Принцип створення таблиць в htmlтакий: створюється таблиця, потім створюється рядок, потім всі стовпці даного рядка, потім черговий рядок, знову всі чергові стовпці даного рядка і таке інше.
Таблиця створюється за допомогою тега
Щоб стало зрозуміліше, давайте відразу після форми напишемо наступні рядки:
Тут ми створили таблицю, що складається з двох рядків (два теги
Тепер поговоримо про атрибути. Спочатку атрибути тега
1) Атрибут "border", значення якого задає товщину рамки таблиці в пікселях. За умовчанням рамки взагалі немає. Давайте поставимо значення цього атрибуту "2".
2) Атрибути "width" і "height" задають ширину та висоту таблиці відповідно. Розмір може бути зазначений, як в абсолютних одиницях (пікселі,px), так і в відносних (відсотки,%). Відносний розмір, ніж хороший, так це тим, що він завжди підлаштовується під будь-яку роздільну здатність монітора користувача та будь-який браузер. А абсолютні теми хороші, що при будь-яких браузерах і будь-яких дозволах монітора не буде сюрпризів з дизайном, пов'язані, наприклад, з розтягуванням елементів (якщо монітор широкоекранний, наприклад). Який вибрати: вирішувати Вам, але я, особисто, віддаю перевагу в основному відносним розмірам, зрідка розбавляючи абсолютними, залежно від ситуації. Давайте поставимо значення атрибутів "width" та "height" по "30%".
Думаю, що атрибутів вам дав достатньо. Таким чином, тег
Подивіться в браузері, як тепер виглядає наша таблиця.
Тепер поговоримо про атрибути тега
1) Атрибут "height". Зауважте, що у тега
Власне, навіть атрибут "height" не особливо використовується, тому можна сказати, що атрибутів у тега
Найбільш багатим за кількістю атрибутів є тег
1) Атрибут "width". Пояснення те саме, що й для атрибуту тега
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-код:
В принципі, з теорією все. А ось на практиці необхідно навчитися застосовувати ці знання. І як практика, ми зараз вирівняємо нашу форму. Для початку зітріть усі теги, тому що тепер на новий рядок у нас переходитиме тег
Тепер поміщаємо весь вміст форми до таблиці, тобто відразу після тега закриваємо таблицю за допомогою тега
Тепер кожен рядок форми поміщаємо в окремий тег
Вона виглядає ось так:
Коментарі ( 97 ):
Мишко не виходить таблиця куди саме вставляти ось це