При създаване на уеб страници, често е необходимо да се предвиди част от съдържанието на страницата, под формата на таблици. Понякога на масата се използва за създаване на структурата на страницата. Този подход не е съвсем вярно, защото на масата не е била първоначално предназначена за позиционирането на елементи на страницата. За тази цел най-добре е да се използва с CSS. Но в някои случаи, маси са необходими и подходящи за предоставяне на информация.
За създаването на таблици в HTML тагове реагира
и затварящ таг
. Но най-вероятно вече знаете, че на масата се състои от редове и клетки. Ето защо, за да се създаде таблица, се нуждаем от още две етикет: тя таг
който е отговорен за създаването на линии, както и етикет
отговорен за създаването на клетки.
За да видите как работи на практика, създаване на таблица, състояща се от два реда и четири клетки. нашата маса код ще бъде, както следва:
За да видим какво ще стане, създаване на HTML страница с кода намира по-долу.
Вие трябва да разполагате със следното:
Както можете да видите нашата маса, все още не прилича на една маса. Всичко това, защото нашата таг
и
имат редица качества, които трябва да укажете да има нашата маса имаше рамка, фон, размер, и така нататък. г.
Ние първо разглежда атрибутите, които са присъщи на тагове
. За да видите как нашата маса ще се промени, можете да ги добавите към тагове
и актуализиране на страницата, да видим как ще изглежда в браузъра на маса. За удобство, аз няма да цитирам целия код на страницата, само кода, свързани с маркер
т. е. това, че ние ще се промени.
И така маркера
Той има следните характеристики:
гранично - определя ширината на рамката на таблицата в пиксели, написани като:
.
BORDERCOLOR - цвета на рамката на масата, този атрибут не се поддържа от всички браузъри, така че не може да види определен цвят рамка:
Попитахме граничния ширината на 2 пиксела, ясно небе, на масата се следния вид:
ширина - определя ширината на таблицата в пиксели или като процент:
височина - височината на таблицата в пиксели или в проценти:
ширина на маса е на 250 пиксела и височина 150 пиксела, таблицата ще изглежда така:
подравняване - привеждане в съответствие на масата;
приведе = ляво - таблицата е подравнен вляво;
приведе = дясно - масата ще бъдат приведени в съответствие с десния край:
В таблицата се приема, както следва:
фон - с помощта на този атрибут, можете да зададете изображение, което да бъде на фона на масата.
Като пример, имайте малко изображение, което можете да видите в скоби () в папката, където сте намерили страницата с маса и етикет
добавите фон = "fon.gif" целият код:
Таблица се следната форма:
sellpadding - атрибут определя ляво, дясно, горно и долно уплътнение вътре в клетката. Например, ако ни таг
добави sellpadding = 10, текстът написан вътре в клетките получават вдлъбнатината.
cellspacing - определя разстоянието между маса клетки.
Ако се вгледате в графиката, ще видите, че между границите на клетките има малко пространство, то е пространството между клетките, това е по подразбиране. За да го почистите достатъчно, за да маркирате
регистрирате cellspacing = 0. Всички код:
В резултат на това нашите клетки се вкопчиха един до друг, и текста в клетките има тире:
hspace - определя дължината на масата, в ляво и в дясно, в пиксели, то се изписва така: hspace = 20
nowrap - тя забранява дума обвиване в клетката, записана само nowrap
Последните две характеристики се използват много рядко, така че в примерния код Аз не ги покажа.
А сега да разгледаме атрибутите на маркер
, някои от тях са същите като атрибути на тага
ширина - ширината на клетката в пиксели или като процент.
височина - височината на клетката в пиксели или проценти.
Например, ние определяме ширината на първата клетка на първия ред на 30% - ширина = 30%. и височината на първата клетка на втория ред на 100 пиксела. Кодът изглежда така:
Нашата маса е на следния вид:
Известие е достатъчно да се посочи размерът на височината клетка или ширина, и всички клетки на ред или колона ще бъде със същия размер. Ето защо, ако искате да зададете, като някои височина клетки е достатъчно, за да посочите тази опция за една клетка и всички други клетки в ред ще бъде същото.
приведе - привеждане на съдържанието на клетки, имат следните значения:
приведе = "LEF" - съдържанието на клетката ще бъде оставен обосновани;
приведе = "дясно" - съдържанието ще бъде приведена в съответствие с правото;
приведе = "център" - съдържанието ще бъдат приведени в съответствие с центъра на клетката.
Добавяне на тези качества и ценности в нашия код и изравнете съдържанието на 1 - во до левия край на клетката (вляво подравнени съдържанието по подразбиране, но в някои случаи се изисква този атрибут), съдържанието на 2 - та клетка подравнена в дясно и 4-ти в средата.
BGCOLOR - използването на този атрибут, можете да зададете цвета на клетката.
фон - задава изображението като фон на клетките.
С тези качества, ние вече са се срещали, като се има предвид атрибути на етикет
. Те работят по същия начин, само че в този случай се определя от техния фон на клетката. Например, ние определяме цвета на фона на 2-ри жълт клетката, и се установи следващото изображение () като фон на четвърто клетка.
За това в нашия код, за да добавите необходими атрибути за нашите клетки BGCOLOR = "# FFFF00" за втората клетка и фона = "fon.jpg" за 4-ти клетката. В резултат на това нашата маса ще изглежда така:
Както можете да видите, независимо от факта, че ние попита фона на самата таблица, ако сте задали на фона на клетки от таблица, тя ще се показва само на заден план, които сме си поставили за клетките.
BORDERCOLOR - задава цвета на рамката на клетката.
С този атрибут ние просто изпълнени, като се има предвид атрибути на етикет
. Напомням ви, че тя не работи във всички браузъри. Моля, имайте предвид, че таг
не атрибут рамка с контур клетката. Ние определяме цвета кадър 2 - червено за първата клетка на втората клетка, за да добавите атрибут BORDERCOLOR = "# FF0000"
Има и друг атрибут, който е предназначен да се приведе в съответствие със съдържанието на клетки:
valign - това подравнява съдържанието на клетки вертикално.
Той има следните стойности:
valign = "върха" - привеждане на съдържанието на горния ръб на клетката;
valign = "дъното" - привеждане на съдържанието на долния ръб на клетката;
valign = "среден" - привеждане на центъра на клетката;
valign = "базова линия" - привеждане на съдържанието на клетката на базовата линия.
Добавете тези атрибути за всеки един от нашите 4 места.
Нашата маса е на следния вид:
Последното нещо, което трябва да се помисли в този урок, е обединение на клетките на таблицата. За да обедините няколко клетки в ред, има атрибут ColSpan = "", където цитиран посочете броя на клетките, които искате да се слеят.
За да обедините клетки вертикално т. Е. В колоната, трябва да използвате атрибута rowspan = "", където цитиран посочете броя на клетките, които искате да се слеят.
За да видите как става това, да създадете нова таблица съдържа три реда от по три клетки всяка. Код на тази таблица е както следва:
Сега съчетават 1-ви и 2-ри клетка на реда и на 3-ти, 6-ти и 7-ми клетка на реда. нашата маса код ще бъде, както следва:
Имайте предвид, че на етикетите на клетката, които се комбинират, не се записват. Нашата маса ще бъде, както следва:
Това бяха последните клетъчни атрибути. Както можете да видите атрибутите в тагове
и
настроен. Това ви позволява да поставите в таблицата на различното съдържание, като го позиционирате и вземане, както е необходимо.
Задача. Създаване на страница, за да видите модела. Приложение 2.
