Как да направите таблица в HTML: подробно описание

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

Изберете редактор

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

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

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

Алгоритъм за създаване на таблица

Първо, ще съставим кратък алгоритъм за това как да направите таблица в HTML. Това е необходимо, за да разберете последователността на всяка стъпка. Тогава ще анализираме как да изпълняваме всеки от елементите.

Нека започнем с подготвителните действия.

1. Начертайте диаграма на таблицата върху лист хартия.

2. Преброявайте броя редове и клетки. Ако номерът на последния е различен - ние разглеждаме за всеки ред отделно.

3. Определете броя на клетките в заглавните редове (например клетките "No.", "Name" и т.н.).

4. Запишете главните параметри на таблицата - цвят, височина и ширина, подравняване на текста - като цяло, всичко, от което се нуждаете.

След това отидете директно към създаването на таблица:

1. Поставете етикетите на таблицата.

2. Поставете етикетите на редовете въз основа на необходимата сума.

3. В редовете вмъкваме етикетите на клетките (обикновени и капитали), също така и на сумата, която е написана на вашата хартия.

4. Задайте параметрите за таблицата като цяло.

5. Ако е необходимо, настройваме индикаторите за отделни клетки.

6. Попълнете клетките с текст.

Създайте таблица

Така че, вие сте избрали редактора, сега нека разберем как да създадем таблица в HTML. Етикет, който вмъква таблица в кода на страницата (

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

Отбелязваме веднага, че тези елементи също са сдвоени. свободен край задава линии и - клетка.

За заглавните клетки използвайте сдвоения елемент .

Както вече беше споменато, на първо място е необходимо да се издават линиите, а след това и в тях да се регистрират клетките. За да не се объркате, ви съветваме да направите или отстъпи между всеки блок в един или два реда или да предложите нов блок от елементи, като използвате клавиша "Tab".

Как може да изглежда? Приблизително така:

• ;
• ;
• № п / п ;
• Фамилно име ;
• ;
• ;
• 1;
• Иванов;
• ;
• .

Както можете да видите, нищо не е сложно в това. Основното нещо е да не се бъркаме с броя на редове и клетки. В противен случай таблицата може да се изкриви.

Обсъдихме създаването на таблица в HTML, сега можем да преминем към параметрите на самата матрица и нейните редове и клетки.

Опции за таблици

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

Параметрите на таблицата са зададени в маркера

1. Граница - ширината на границите. Той се дава като цяло число. По подразбиране границите на всяка таблица са нула.

2. Bordercolor - граничен цвят. Може да се посочи като шестнадесетичен цветен код (# 00008B), а името му е на английски (DarkBlue). По подразбиране винаги е сиво.

3. Bgcolor - цвят на фона. Също така се определя от код или име.

4. Align - подравняване на текста зад таблицата. Стандартът е оставен. Има следните опции за този параметър:

• ляво е потокът отдясно;
• десния поток наляво;
• center - извеждайте масата в центъра без поток.

5. Ширина и височина - ширина и височина на масата. Може да се зададе и в двата пиксела и в проценти (спрямо размера на прозореца на браузъра).

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

Що се отнася до цвета на текста, той е проектиран по същия начин като обикновен текст в HTML формат.

Пример за таблица:

• ;
• ;
• № п / п;
• Фамилно име;
• ;
• ;
• 1;
• Иванов;
• ;
• .

Параметри на линията

Така че вече сме измислили как да направим таблица в HTML и да предпишем нейните основни параметри. Но какво ще стане, ако трябва да изберем линия? Да го проектирате не като основния текст на таблицата?

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

1. Вече познавате границата, bordercolor и bgcolor.

2. Подравняване - подравняване на текста в реда. Тя може да има стойности наляво, в центъра и вдясно.

3. Valign - този етикет подравнява текста вертикално. Това отнема следните стойности:

• горе - текстът е подравнен на горната граница;
• среден - центриран;
• долу - на долната граница.

Пример за линия:

• ;
• № п / п;
• Фамилно име;
• .

Клетъчни настройки

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

1. Colspan - този параметър определя броя на колоните, които клетката може да обхване.

2. Rowspan - указва броя редове, които тази клетка заема.

Тъй като дизайнът не се различава от написването на линията, няма да ви дадем пример за кода.

данни

Създаването на маса не е толкова трудно, колкото изглежда на пръв поглед. Основното нещо, когато пишете кода, е упоритост и внимание.

Що се отнася до това как да вмъкнете таблица в HTML, нейният шифър се копира и поставя точно в мястото на вашата страница, в която според Вас трябва да се намира.

Не се страхувайте да експериментирате и скоро ще овладеете техниката за създаване на таблици. Успех!