Всеки човек, който някога е искал да създаде сайт за своя проект, е изправен пред проблема с неговото писане. Не всеки иска да плати, а не всеки бюджет може да си го позволи, за създаването на сайт за професионални уебмастъри, така че повечето начинаещи по начина, по който създателите на сайта започват да изучават техниките на оформлението. Защото качеството на съдържанието и наличността на закупеното място на сървъра, който хоства сайта, не е достатъчно, за да съществува. Първо, трябва да създадете страница "скелет".

Какво е оформлението на HTML таблици?

За да отговорите на този въпрос, трябва да дефинирате понятието за оформление. Гнездене - процес на създаване на структура на html-страници, поставяне върху него на основните елементи. Разположението на таблицата е съответно използването на таблица с невидим контур като структура на страницата. Това означава, че страницата на сайта ще бъде таблица с определен брой колони и редове, където всяка клетка има специфичен елемент.


Оформленията на html-документи, създадени чрез таблично оформление, се използват в по-голямата част от обектите и се използват повече от 10 години. Това се дължи на простотата на структурата, напълването, както и на гъвкавостта на такава маркировка, която се показва по същия начин в различни браузъри.

Първи етап от създаването на сайта

Разположението на таблицата започва с маркиране: html кода на страницата се пише с таблица, състояща се от определен брой колони и редове. За да създадете електронна таблица в html, се използва специален таг, за да го отворите.Вътре в нея се използват тагове за създаване на низ,

за създаване на заглавие на таблица и

за създаване на колона. Графите и заглавките се създават в линията, а всяка колона може да бъде произволен брой.

Първата таблица
Първа колона	Втора колона

Възможността за създаване на таблица ви позволява да правите оформление на HTML таблици на страници, така че трябва да разберете какви са атрибутите при създаването на етикети и как да ги използвате.

Основните атрибути на табличните тагове

Tag Този маркер, като символ за отваряне на таблица, служи за ограничаване на неговата структура, която определя неговата позиция на страницата и общия вид на всички клетки, поради атрибутите:

Свойството за подравняване се използва за подравняване на позицията на таблицата. , може да приема стойности "ляво", "център" и "дясно". Това е подравняване съответно на левия ръб, центъра и дясно.

Атрибутът background ви позволява да зададете фоновото изображение за таблица с връзка към нея.

Bgcolor определя цвета на фона на таблицата, като стойността може да бъде името или кода на всеки цвят.

Border-дефинира дебелината на рамката на таблицата и е посочена в милисекунди.

Bordercolor задава цвета на рамката.

Клавиатурната настройка ви позволява да задавате интервали между текста и границите на клетките.

Свойството Frame казва на браузъра да показва границите на таблицата, като приема стойностите void, border, above, below, hsides, vsides, rhs, lhs. Което, съответно, означава да не се показва граница, да се начертае рамкаоколо масата, направи само горната граница или само дъното видима, не скривайте само хоризонталните граници или само вертикалните, само отразяват дясната или само лявата граница.

Атрибутът rules съдържа информация за границите, които клетките трябва да показват. Стойността none ви позволява да скриете всички граници, всички точки към тяхното показване, cols определя позицията на линиите между колоните, а редовете - между редовете.

Етикет
Този таг създава ред в таблицата, който съответства на неговия външен вид. Има малък набор от атрибути: подравнете, за да подравните текста в ред, bgcolor указва цвета на фона на клетката, bordercolor задава цвета на границата около линията. Тагове

и

Тези два маркера имат приблизително еднаква функционалност: създаване на клетка в ред и задаване на условията за показване чрез атрибутите:

Abbr ви позволява да направите кратък коментар за клетката.

Изравняването е отговорно за подравняването на съдържанието на трите хоризонтални позиции.

Фонът се използва за запълване на фона на клетка с конкретно изображение.

Bgcolor се използва за задаване на цвета на фона в клетката.

И bordercolor определя цвета на границите на клетката.

Височината служи за определяне на височината на клетката.

Nowrap се изисква да забрани прехвърлянето на низ.

Теглото определя ширината на клетката.

Пример за html-оформление на сайта

След като изучава теорията на работата с таблици в html, можете да започнете да създавате свой собствен оформление на страницата. За да направите това, определете кои функционални блокове ще бъдат в сайта Ви. Това може да е шапка, мазе,блок със съдържание, странични блокове. В оформлението на HTML таблицата е необходимо само да създадете таблица.
Всъщност на този етап можете да създадете напълно завършено оформление, като зададете външния вид на всеки елемент чрез описаните по-горе свойства на маркера. И тогава просто трябва да копирате кода на таблицата на всяка нова страница, така че да има един стил. Но това е доста неудобно, тъй като стилът на страницата ще бъде запазен само в неговия файл, което означава, че ако трябва да промените нещо, ще трябва да се опитате да намерите подходящия стилов атрибут във всеки документ и да промените неговата стойност. Но има опция за оптимизиране на този процес, като се използва методът на CSS табличен план. Следователно при създаването на html таблица не е необходимо да се използват атрибутите на стила в документа. Единственият атрибут, който се използва, е id, който след това ви позволява да се отнасят до стила само на един елемент. Това е универсален атрибут, който се използва с всички маркери. Отнема стойности, които се състоят от латински букви и символи. Когато създавате таблица, трябва да зададете идентификатор за етикета, например със стойността на "документ". След това, за клетката (таг

или

), разпределена под заглавката, идентификаторът на id може да приеме стойността "header". Лявото меню може да бъде наречено "left_side", а дясното е "right_side". Блокът за съдържание, предполагам, ще се нарича "съдържание", а основата на сайта - "footer".

Това ще покаже страницата в браузъра.

Вторият етап от оформлението

Създаденият документ трябва да бъде свързан със стилистичнияCSS файл за контрол на външния вид на обектите на страници. За да направите това, трябва да създадете CSS документ, наречете го, например, mystyle.css. И сега вътре в етикета в основния документ на страницата трябва да предпишете следното: След това, като напишете в mystyle.css условията за показване на елементите, можете да промените външния вид на страницата, както бихте желали. Например, свойството color определя цвета на текста, а фонът определя как ще изглежда фона на елемента. Има около 20 основни свойства, с които можете да промените позицията на елементите, техния размер, цвят и селекция. Ето защо, това оформление не е много сложно и дори може да бъде направено от новак, но колко креативно и интересно ще бъде, зависи само от вас.

CSS-layout

Както знаете, повечето уебмастъри сега избират втората между таблицата и блоковото оформление в html. Това се дължи главно на факта, че кодът за оформление на таблицата е много тромав и това затруднява изтеглянето на сайта. Обемът на кода се обяснява с наличието на сложна структура на таблична структура (ниво 3: тогава и само след

). Но има решение на този проблем на езика на Cascading Style Sheets (CSS).
Разпределението на CSS в раздели може да се извърши например, ако в етикет има само отделни елементи, които не са таблица. За да оптимизирате кода, можете да създавате таблични документи директно чрезсвойства на стиловете. Това използва свойството display, което указва на браузъра как да възприеме този или онзи елемент в документа. Например, ако стойността е таблица, тогава елемента се показва като таблица и ако табличната или табличната клетка е съответно таблица и клетъчна линия. Това елиминира необходимостта да се използват тагове тагове в html набор.

Адаптивно оформление на таблицата

Адаптивното оформление включва промяна на дисплея на сайта на различни екрани в зависимост от разделителната способност и размера на дисплея. Това е доста трудна задача за разработчика, тъй като изисква внимателни изчисления и тестване на много платформи. Въпреки това, всеки популярен съвременен ресурс не може да бъде представен без използването на адаптация за различни устройства. И CSS се използва за решаване на този проблем. На първо място, така че във всички браузъри стилът на сайта беше единственият, трябва да нулирате всички стандарти за показване на браузъра, използвайки css reset, за да се отървете от нестандартни отстъпки, селекции и други подобни. Второ, трябва да получите медийни заявки от устройства, които се свързват с ресурса, за да получите информация за разделителната способност на екрана и да приложите адаптация. За тази цел се използват предимно свойствата min-width, max-width и display. Първите две определят границите на разширяването на блока, а свойството на дисплея със стойността none позволява да скриете големи и нефункционални блокове на дисплеи с ниска резолюция.

Примери

Няма значение кой метод се използва от разработчика за създаване на маркиране, той ще може да го подреди с помощта на CSS, така уникален иЕстетически достатъчно въображение е достатъчно. По-долу са дадени примери за оформления на HTML таблици. Друг пример. И можете да го подредите и така. Всъщност няма никакво значение, че оформлението на масата вече не изглежда съвременно и уместно - лесно се компенсира от творчеството и грамотността на дизайна.