Създаване на таблици в HTML
В тази статия ще се запознаете с най-важния момент при създаването на вашия сайт - таблици!
Да започваме нека създадем проста HTML таблица.
Но преди да направим това, нека възстановим кода, който ни е останал след създаването на формуляра, тоест този: Създаване на формуляри в HTML
Принципът на създаване на таблици в html е това: създава се таблица, след това се създава ред, след това всички колони от този ред, след това следващият ред, отново всички следващи колони от този ред и т.н.
Таблицата се създава с помощта на маркера
За да стане по-ясно, нека напишем следните редове веднага след формуляра:
Тук сме създали таблица с два реда (два маркера
Сега да поговорим за атрибутите. Първо маркирайте атрибутите
1) Атрибут "граница", чиято стойност задава ширината на границата на таблицата в пиксели. По подразбиране въобще няма граница. Нека зададем стойността на този атрибут на"2".
2) Атрибути "ширина"и"височина"задайте съответно ширината и височината на таблицата. Размерът може да бъде посочен като абсолютни единици (пиксели, px), и в относителни (проценти, %). Хубавото на относителния размер е, че той винаги се приспособява към всяка резолюция на потребителския монитор и всеки браузър. А абсолютните са добри, защото няма да има изненади с дизайна, например с разтягането на елементи (ако мониторът е широкоекранен например), с всеки браузър и всякаква резолюция на монитора. Кой да изберете: зависи от вас, но аз лично предпочитам, по принцип, относителни размери, като от време на време разреждам с абсолютни, в зависимост от ситуацията. Нека поставим стойността на атрибутите "ширина"и"височина"от"тридесет%".
Мисля, че ви дадох достатъчно качества. Така че етикетът
Погледнете в браузъра как изглежда нашата таблица сега.
Сега нека поговорим за атрибутите на маркерите
1) Атрибут "височина". Забележете, че етикетът
Всъщност дори атрибутът "височина"всъщност не се използва, така че можем да кажем, че атрибутите на маркера
Най-богат на броя на атрибутите е маркерът
1) Атрибут "ширинаОбяснението е същото като за атрибута на етикета
2) Атрибут "colspan". Стойността на този атрибут означава броя на колоните, които тази клетка заема. Задайте този атрибут на стойността"2"където имаме координати"(единадесет)Незабавно погледнете резултата.
3) Атрибут "размах на редове". Стойността на този атрибут означава броя редове, които тази клетка заема. Задайте този атрибут на стойността"2"къде са координатите"(12)Незабавно погледнете резултата.
4) Атрибут "подравняване". Стойността на този атрибут означава хоризонтално подравняване на елемент в клетка. Има три стойности:"наляво"(подравнено вляво),"център"(в центъра),"нали"(вдясно). По подразбиране е подравняване вляво. Нека подравним координатите."(единадесет)"центрирано и координати"(2, 1)"подравнено вдясно. Вижте резултата.
5) Атрибут "валинг". Стойността на този атрибут означава вертикално подравняване на елемента в клетката. Отново има само три стойности:"връх"(на върха),"средна"(средна),"отдолу"(отдолу). По подразбиране е"средна". Нека променим стойността на този атрибут за"(2, 1)" На "връх". И също елементът"(2, 2)"задаване на стойността"отдолуНезабавно погледнете резултата.
Значи вашата маса има това Html код:
По принцип всичко е с теорията. Но на практика трябва да се научите как да прилагате тези знания. И като практика, сега ще подравним нашата форма. Първо изтрийте всички тагове , тъй като сега етикетът ще премине към нов ред
Сега поставяме цялото съдържание на формуляра в таблицата, т.е. веднага след маркера затваряме таблицата с помощта на маркера
Сега поставяме всеки ред от формуляра в отделен таг
Изглежда така:
Коментари (97):
Миша не може да получи таблицата, където да вмъкне това