Таблиці на web-сторінці

Інформація, представлена ​​в цій статті орієнтована в першу чергу для початківців web-майстрів.

Передмова

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

Застосування таблиць, їх види та коди

Таблиці - популярне засіб оформлення web-сторінок. Одним із способів їх застосування на сайті є використання в якості каркаса всієї сторінки:

Тут буде «шапка web-сторінки», логотип і назва сайту. Ширина задається в точках або в процентах. Ширина 100%-сайт займає весь вільний місце в браузері. Висота 50-150 точок або 5-15% або на ваш розсуд.

Область навігації по розділах сайту. Ширина 120-200 точок або 12-20%.

Основне вміст - контент сторінки. Займає все, що залишився простір.

Область дублюючої навігації сайту. Висота 40-50 точок або 4-5%.

Думаю, що таку таблицю вам спорудити нескладно і самим, але про всяк «пожежний» наведу приклад html-коду:

Ця схема не є обов'язковою. Є безліч інших варіантів.

Далі хочу представити вам можливі варіанти застосування різних таблиць і, відповідно, їх html-коди.

Таблиця пунктиром

Приклад розміщення контенту

Html-код таблиці виглядає так:

Увага! Важлива інформація!

А ось і сучасний погляд на побудову таблиці з рамкою-пунктиром. Для цього використовується значення dashed в параметрі border.

Просто пишете код таблиці з ідентифікатором, наприклад, demo3 -

, а CSS такої таблиці пишете в стилях в розділі head або в файлі стилів сайту:

demo3
border. 2px dashed # 000000; / * Рамка 2px, пунктиром, чорного кольору * /
margin: 0 auto; / * Вирівнювання по центру * /
width: 600px; / * В px або в% * /
overflow: auto; / * Таблиця збільшується в залежності від збільшення її вмісту, не даючи йому вийти за межі * /
>

Якщо потрібно зробити рамку точками - замість dashed пишіть значення dotted. До того ж обидві рамки можуть змінювати кольори. У прикладі виставлений чорний колір - # 000000.

Таблиця із закругленими кутами

Приклад розміщення контенту

Код таблиці:

Все как-будто просто і чудово, але є одна маленька «заморочка». Бачите в коді файли зображень, виділені маркером? Вони являють собою невеликі малюнки, зроблені в фотошопі і виглядають наступним чином:





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

Якщо колір таблиці вас задовольняє (його можна поміняти і зробити заливку зображень будь-яким іншим кольором), можна завантажити (3,1 кб) ці малюночки, завантажити їх в вашу папку з зображеннями на сайті, скопіювати код таблиці і «в добру путь!»

Один з варіантів цього способу виглядає так:

Схожі статті