Създаване на таблици в HTML

Таблица - много важна част от HTML, когато създавате всеки сайт, не може без таблици. Използване на електронни таблици прави по-лесно да се получи на сайта вида, който искате. защото ние сме свободни да се коригира ширината и височината на масата.

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

Ние сме създали една маса, но на масата - е набор от редове и колони в рамките на една маса, така че ние трябва да се създаде редове и колони. Без тях ние сме нищо на масата, няма да бъде в състояние да записва.

Ред в таблицата е създаден с помощта на двойката тагове

. и колона - с помощта на двойка тагове

Първата таблица атрибут - граница атрибут. който е отговорен за рамката. Стойността по подразбиране атрибут е на стойност "0" (кадър не се вижда). Ако искаме да видим границата, ние трябва да се сложи ненулева стойност, като "1"

Сега можем да кажем, че таблицата е създадена и е възможно нещо да пише. Нека създадем една маса в първия ни точка.

Първият параграф в таблица

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

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

Първият параграф в таблица

Ширината на нашата маса стана 600 пиксела. Е центрирана, използвайки познатия подравняване атрибут. отговорен за привеждане в съответствие.

Първият параграф в таблица

Сега нека да влязат в нашата линия на една колона, за да добавите няколко колони. За да направите това, ние трябва да се предписва няколко тагове

Първият параграф в таблица

. За всяка колона - един маркер.

Ако искаме да дадем на всяка колона конкретна ширина - предписва всеки таг здраве

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

Втората колона на таблицата

В третата колона на таблицата

ширина атрибут посочва подходящата ширина.

Сега, всяка колона на този ред е идентичен резолюция.

На следващо място, ние добавяме в нашата таблица има един ред, като се използват, съответно, друг таг

. И само да предпише в този ред на три колони.

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

Втората колона на таблицата

В третата колона на таблицата

Продължавай в създаването на масата. За да промените цвета на рамката атрибут BORDERCOLOR прилага. отговорен за цвета на рамката. Стойността на атрибута предписва цвета, който искаме.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

Frame стана червено.

Сега отстъп, в рамките на всяка клетка от таблицата (текстът в рамката се притиска към клетката). Това се прави с помощта на cellpadding атрибут (клетка - клетка, пълнеж - вътрешен отстъп). Стойността на атрибута предписва броя пиксели, които трябва да бъдат между текста и рамката клетка.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

И тъй като ние ще текстовете на всеки един от първата клетка на реда, за да се приведе в центъра (по подразбиране, то се натисне от лявата страна). За тази цел, маркерът на първия ред добавете подравняване атрибут с "център" на стойност.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

Текстът на първия ред на всяка клетка приведе към центъра.

Нека сега да се опитаме да добавите към нашата маса, създадена от третия ред, но с една клетка, ширината на трите клетъчни линии на върха.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

Проверка на браузъра. Имаме третия ред, но ширината на клетката, в този ред е същото като всички клетки. Ако приложите на ширина атрибут и остави на желаната стойност - това ни дава нищо (може да се провери). За нещо, което да широчината на третата линия на клетката, предприети няколко клетки трябва да се прилага специален атрибут на ColSpan (обедините няколко клетки), а стойността на атрибут, за да определите броя на клетките слива (две или три).

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

Третият ред

Това е работа ColSpan атрибут.

И ако трябва да се съчетаят двете в отделна графа клетки в една. В първата клетка на първия низ комбинира с първата клетка на втория ред. За тази цел има rowspan атрибут. Се вписва в първата клетка на първия ред rowspan атрибут, при което стойността на писане на броя на клетките, както ние искаме да се обединим.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

Третият ред

Проверка на браузъра. Това нещо не е наред. През втория ред имахме допълнително клетка. Това няма значение. Ние просто трябва да се премахне една клетка от втория ред.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

В третата колона на втория ред

Третият ред

Готово. Сега всички ние изглежда като ние искахме.

Това е rowspan атрибут съчетава вертикални клетки.

И все пак ние можем в нашето създаден маса за въвеждане на друга такава. Това може да бъде полезно за нас в нашата практика. Нека просто в обединена клетка, вместо на параграфа въвеждане на друга маса. Какво щеше да е по-удобно - ще се увеличи ширината на основната таблица 800, а ширината на обединена клетка 400.

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

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

Третият ред

Забележка: Стойността на ширина атрибут на вградената таблица е регистриран като процент. В нашия случай, вградената таблица заема 100% от обема на клетката.

Вграден маса и бихме могли да проникнат в клетките. С една дума, всичко, което може да се направи в един обикновен маса, и може да бъде построен инча

И все пак, ние трябва да знаем - това е цвета на фона на таблицата. При създаване на маса, тя не трябва цвета на фона. Предшестващо от таблицата, която е прозрачна фона на масата ще бъде същата като фона на страницата.

Между другото, как да настроите фона на страницата, не сме говорили. Това се прави много просто - таг предписва BGCOLOR атрибут със стойност на фона, че имаме нужда.

Просто попитайте на фона на масата, само атрибута BGCOLOR предписва таг

В първия ред на вградената таблица

Втората линия вградената електронна таблица

Втората колона на таблицата

В третата колона на таблицата

В първата колона на втория ред

Втората колона на втория ред

Третият ред

на масата, което прави на заден план.

С това завършва създаването на таблици.