Таблица - набор от данни, разпределени в редове и клетки. Повечето от клетките съдържат таблични данни, останалите съдържат заглавки за редове и колони, които описват съдържанието.
За да създадете таблица в HTML документ, използвайте етикета
| , създава редовни клетки с данни. По подразбиране маркирайте съдържанието | подравнени вляво. Вторият таг за създаване на клетки е тагът | , ви позволява да дефинирате клетки, които съдържат заглавки за колони или редове, съдържанието на такива клетки се показва удебелен тексти центрирано. етикети | и | може да включва всички HTML елементи, които са налични за използване в тялото на документа.
Таблица в таблицаHTML има способността да създава вложени таблици, тоест таблици, които се намират в други таблици. За да направите вложена таблица, трябва да поставите кода на таблицата, която искате да направите вложена във всеки етикет | .
Например, нека вземем таблицата, която вече създадохме по-рано, и да поставим този код във втората клетка на втория ред:
Маса с рамки
РЕЗУЛТАТ: Маса без границиМаса с рамкиАтрибути на тагове Пример
РЕЗУЛТАТ:
Съгласно стандарта HTML5, всички използвани преди това атрибути на таблица, като напр граница, разстояние между клетките, клетъчна подложкаи т.н. вече не се поддържат и валидаторът счита използването им за грешки в кода. За да проектирате таблици, трябва да използвате CSS стилове, с които можете да замените всички остарели атрибути на таблици. Например вместо атрибута разстояние между клеткитесвойството се използва за промяна на разстоянието между клетките на таблицата border-spacing, и за подравняване на съдържанието в клетките на таблицата - свойства подравняване на тексти вертикален-aling. CSS стилове за таблици тагове за групиране на редове в html таблицаЕтикетите могат да се използват за създаване на по-сложни таблици: Пример
РЕЗУЛТАТ: тагове за групиране на колони в html таблицаАтрибут етикети
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Най-лесният начин да разберете как може да се използва групирането на редове и колони е с примера на таблица судоку.
Тагът col задава параметри отделно за всяка колона. Няма значение как пишеш програмен код:
Пример
| жълто | червен | ||
|---|---|---|---|
РЕЗУЛТАТ:
Не се опитвайте да задавате стила подравняване на текстза етикети
Хоризонтално подравняванетекстът в конкретна колона на таблицата може да бъде променен чрез указване на стил подравняване на текстза псевдо клас td:nth-child(n), където n е номерът на колоната. Този метод обаче няма да работи, ако има атрибут сред клетките на таблицата colspan.
Пример
| Име | Цена, търкайте.) |
|---|---|
| Плащане на солариум на минута (от 4 минути) | 15 |
| 50 минути солариум (14 rub/min, 1 месец) | 700 |
| 100 минути солариум (13 rub/min, 2 месеца) | 1300 |
| 200 минути солариум (12 rub/min, 3 месеца) | 2400 |
РЕЗУЛТАТ:
Този метод обаче няма да работи, ако има атрибут сред клетките на таблицата colspan.
Таблиците в HTML са толкова функционални, че можете да ги използвате за набор на цели сайтове (прочетете). Сега ще говорим за вмъкване на прости HTML таблици в уеб страница, анализирайки само маркирането, но без да засягаме дизайна, защото е по-добре да украсите таблиците с CSS стилове.
Тагове и атрибути на таблици
Ето основните елементи, които са необходими за създаване на таблици:
- контейнерът, в който се намира масата (същото като
- граница- атрибут, който определя дебелината на рамките. Вместо това е по-добре да използвате граничен имот CSS.
, извън клетки и редове.
- таг за двойка, съдържащ ред от таблица (клетки, разположени на едно и също ниво хоризонтално). - таг, който създава заглавна клетка на таблица. Външно съдържанието му е различно от съдържанието в другите клетки - обикновено текстът вътре Браузърът подчертава удебелен шрифт и поставя в центъра. - контейнер, с който се създава проста клетка. Колко такива етикета ще съдържа низът (tag , толкова много клетки ще има в него: един етикет - една клетка. .
използвани за същата цел като , но не и обратното. - педя- атрибут, който указва броя на колоните, към които се прилагат свойствата на контейнера
. - , и - контейнери, които ви позволяват да разделите таблицата съответно на горна (заглавки), основна (тяло) и долна (крайна) части. В HTML таблица последователността на тези етикети е същата като последователността на контейнерите , и в HTML документ.
- colspanнеобходими за обединяване на клетки в ред. Стойността на атрибута съдържа число, което указва броя на клетките за обединяване.
- обхват на редасвързва клетки по колони.
Пример за създаване на таблица
Създайте HTML документ и копирайте следния код в него:
Примерна таблица Инструменти за изграждане на уебсайтове Предназначение Инструмент маркиране HTML XHTML Декор css развитие PHP Python В браузъра документът ще изглежда така:
Нека да разберем кои редове от код са отговорни за какво.
- отвори масата, задавайки дебелината на рамките за нея.
- затворете масата.- отвори линията. - затворете линията. Останалите линии са създадени по същия начин.Предназначение - създаде клетка с дизайн на заглавка.Инструмент - създаде втората заглавна клетка в реда. Параметърът colspan показва, че тази клетка трябва да заема две хоризонтално.маркиране HTML XHTML
Прост изходен код на HTML таблица
Клетка 1
Клетка 2
Клетка 3
Клетка 4
Клетка 5
Клетка 6
Клетка 7
Клетка 8
Клетка 9
Заглавки на HTML таблици
В HTML таблиците има 2 вида клетки. Етикетът дефинира клетка от нормален тип. Ако клетка действа като заглавка, тя се идентифицира с помощта на етикета.
Пример за HTML таблица с th заглавие
Volkswagen AG Daimler AG BMW Group Audi мерцедес бенц BMW Шкода Мерцедес-AMG Мини Lamborghini Умен Ролс Ройс Изходен код на HTML таблица със заглавки
Volkswagen AG
Daimler AG
BMW Group
Audi
мерцедес бенц
BMW
Шкода
Мерцедес-AMG
Мини
Lamborghini
Умен
Ролс Ройс
Обединяване на клетки в HTML таблица
В HTML таблиците е възможно да се обединяват клетки хоризонтално и вертикално.
Да се обединяване на клетки хоризонталноизползвайте атрибута colspan=" х“, в клетката или къде х
Да се обединяване на клетки вертикалноизползвайте атрибут rowspan=" х“, в клетката или къде х- броя на клетките за сливане.
Клетките могат да се обединяват хоризонтално и вертикално едновременно. За да направите това, използвайте атрибутите colspan и rowspan за желаната клетка:
Текст в клетка Моля, имайте предвид, че когато клетките се сливат, броят на елементите в ред се променя. Например, ако има 3 колони с клетки в таблицата и ние комбинираме първата и втората клетка, тогава всичко вътре в тага, който дефинира дадена линияще има 2 елемента, като първият ще съдържа атрибута colspan="2" .
Пример за HTML таблица с обединяване на клетки
Изходен код на HTML таблица с обединени клетки
Nissan
Модел
Оборудване
Наличност
Nissan Qashqai
ВИЗИЯ
+
ТЕКНА
+
Nissan X-Trail
ACENTA
+
CONNECTA
-
Горни и долни колонтитули в HTML таблици
HTML таблиците могат да бъдат разделени на 3 области: заглавка, тяло, долен колонтитул.
Това става чрез обвиване на редовете на избраната част от таблицата с тагове. дефинира областта на горния колонтитул, - областта на долния колонтитул, - тялото на таблицата.
По подразбиране горните и долните колонтитули не са стилизирани (това може да се направи чрез CSS, ако е необходимо), но могат да се използват от браузърите. Например, когато отпечатвате многостранична таблица, горните и долните колонтитули може да се дублират на всяка отпечатана страница.
Правилният ред за регионалните тагове в HTML кода на таблицата е както следва: първо заглавката, след това долният колонтитул, след това тялото. В този случай основната част от страницата ще се покаже между горните и долните колонтитули.
По желание можете да добавите надпис към таблицата. За да направите това, използвайте етикета.
Пример за HTML таблица с горни и долни колонтитули и надпис
Изходен код на таблица с горни и долни колонтитули и надпис
Пълен комплект Renault Sandero Stepway
Характеристика
SUTA 09H 6R
SUTA 09HR6R
SUTA 15H 5R
Наличност
+
+
+
Мощност на двигателя
0.9 (90 HP)
0.9 (90 HP)
1.5 (90 HP)
гориво
бензин
бензин
дизел
Степен на токсичност
Евро 6
Евро 6
Евро 5
Колони и групи колони
Една HTML таблица може да бъде разделена на колони и групи от колони с помощта на таговете и .
Това разделяне ви позволява да задавате стилове за таблицата, като използвате минималния брой CSS свойства, като по този начин намалявате количеството код на таблицата (вместо да дефинирате стилове за всяка клетка на колона, можете да зададете стилове за една или повече колони наведнъж).
Етикети и се поставят вътре в етикета преди таговете, AKP6 (EDC)
Предаване Изходен код на HTML c таблица
и
ZEN 2E2C AL A
ZEN 2E2C J5 A
ИНТЕНЗИВЕН 2E3C AL A
Характеристика
1.5 (90 HP)
1.2 (115 HP)
1.5 (90 HP)
Мощност на двигателя
дизел
бензин
дизел
гориво
AKP6 (EDC)
AKP6 (EDC)
AKP6 (EDC)
Предаване
Таблици в оформлението на страницата на сайта
В съвременните сайтове правилното показване на страници е важно както на компютри, така и на мобилни устройства. Не е препоръчително да използвате таблици за създаване на рамка на HTML страница, тъй като се губи възможността за адаптиране на съдържание към екрани с различни размери (компютри, смартфони, таблети).
Етикетите за групови таблици се използват най-добре в рамките на страница за показване на съдържание във формат на таблица.
Здравейте скъпи читатели на блог! Често на уеб страниците, освен текст и снимки, става необходимо да се показват различни данни под формата на таблици. Да, това е разбираемо, таблицата е най-удобният начин за представяне на голямо количество информация. Следователно възниква въпросът Как да вградите таблици в html?. В тази статия ще отговоря на този въпрос и ще ви дам много примери за различни html таблици.
Как да създадете таблица с помощта на HTML
HTML таблиците се създават в четири стъпки.
1. На първата стъпка в html кода, използвайки сдвоените етикет
кажете на браузъра, че таблица е вмъкната в уеб страницата:
. Елементът таблица е блоков елемент на уеб страница. Следователно таблицата винаги се извежда с нова линияс отстъп вертикално от съседни елементи, така че няма нужда да го поставяте в параграф.
2. На втората стъпка оформяме линиитаблици чрез поставяне на сдвоени тагове
вътре . Всеки елемент
създава отделен ред:
3. След това на третата стъпка оформяме клеткитаблици със сдвоени етикети
и , които се поставят вътре в елемента . Етикет създава обичайноклетка и клетка заглавка, т.е. заглавка на съответната колона:
4. Е, на последната стъпка го поставихме вътре в елементите
и съдържание на клетка. HTML кодът за вмъкване на таблица в уеб страница изглежда по следния начин:
Колона 1 Колона 2 Колона 3
Клетка 1-1 Клетка 1-2 Клетка 1-3
Клетка 2-1 Клетка 2-2 Клетка 2-3
За фина настройка на дисплея на границите ще помогне. С можете да промените дебелината и цвета на рамките, както и да промените вида на границите.
Текстът, който трябва да бъде поставен в клетките, не е задължителен, но ако текстът е голям, той може да бъде разделен на параграфи чрез прилагане на етикета
Ако трябва по някакъв начин да стилизирате вмъкнатия текст, можете да използвате .
Освен текст, можем да поставим снимки в клетки с помощта на тага
:
Съдържанието на клетка може дори да бъде друга таблица. В този случай създаването на вложена таблица не се различава от създаването на обикновена таблица. Само между етикети
и се вмъкват етикетии
и в него се вмъкват редове и клетки.Има някои правила, които трябва да имате предвид, когато създавате таблици:
- само тагът се използва за създаване на таблицата
;
- етикет
може да бъде само вътре в таг ;
- етикети
и може да бъде само вътре в таг , всяко друго съдържание на маркер игнориран от браузъра; - съдържанието на таблицата (текст или снимки) може да бъде само в тагове
и ; - клетките на таблицата трябва да имат поне малко съдържание, в противен случай браузърът може изобщо да не ги покаже, ако някоя клетка трябва да е празна, тогава в нея обикновено се поставя непрекъснато пространство (HTML литерал);
- таблицата се отнася до блоковите елементи на уеб страницата;
- размерите на таблицата и нейните клетки зависят от съдържанието, т.е. масата е опъната на ширина и височина, така че всичко да пасне;
- прави се малък отстъп между границите на отделните клетки и между границата на всяка клетка и нейното съдържание;
- текстът на заглавните клетки (тият елемент) се показва с удебелен шрифт и центриран;
- границите около таблицата и нейните клетки не се изчертават по подразбиране.
Заглавие на таблицата
Да започнем с сдвоен етикет
, което дава заглавие на таблицата. Текстът на заглавието се поставя в този таг, който трябва да е вътре в тага. И без значение къде в html кода на таблицата да поставите тага
, браузърът пак ще показва заглавието над таблицата и ще го центрира. Но обикновено етикетът поставен непосредствено след отварящия таг :
Това е маса
Клетка 1.1 Клетка 1.2
Клетка 2.1 Клетка 2.2
Дисплей:
Секции на маса
html таблицата може логично да се раздели на части – секции. Има три вида раздели:
- заглавна секция, в която се поставят заглавните клетки, които формират заглавката на таблицата;
- секция на тялото, в които се намират клетки с основни данни;
- раздел за завършване, в които се поставят клетки с общи данни.
Секцията за заглавка на таблицата се формира с помощта на таг за двойка . Освен това е допустимо да се използва не повече от един елемент в рамките на същата таблица и трябва да отиде до html кодточно след етикета
.
Секцията на тялото е създадена с етикет за двойка
. един html таблицаможе да съдържа множество секции на тялото, което ви позволява да създавате изграждащи блоковекъм които могат да се прилагат унифицирани стилове.Секцията за завършване се формира от таг за двойка
и в рамките на същия контейнерможе да има само един.
Всички тези сдвоени тагове трябва да съдържат тагове
, които образуват редове, свързани със съответните секции:
Колона 1 Колона 2 Колона 3
Клетка 1.1 Клетка 1.2 Клетка 1.3
Клетка 2.1 Клетка 2.2 Клетка 2.3
Резултат 1 Резултат 2 Резултат 3
Обединяване на клетки от таблица
Остава да говорим за най-важната характеристика на таблиците - сливане на клетки.Атрибутите се използват за комбиниране на множество клетки в една. colspanи обхват на редаетикети
и . Атрибутът colspan задава броя на клетките, комбинирани хоризонтално, а rowspan - вертикално:
1.1 1.2-1.3
2.1 2.2 2.3
3.1-4.1 3.2 3.3
4.2 4.3
Примерен резултат:
1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Когато обединявате клетки, е важно да проверите броя на клетките във всеки ред, за да няма грешки. Да, дизайнът
замества две клетки, така че следващият ред трябва да има два етикета , или същия дизайн! Ако броят на клетките във всички редове не съвпада, тогава ще се появят празни допълнителни клетки. Пример за неправилен html код при обединяване на клетки:
клетка 1.1 клетка 1.2
клетка 2.1 клетка 2.2
И резултатът, показан в браузъра:
Тези. ако анализирате html кода, ще забележите, че първият ред има три клетки, две от които са обединени с помощта на атрибута colspan, а вторият ред има само две добавени клетки. Следователно на втория ред се появява трета празна клетка.
Атрибути на етикети
В тази публикация вече срещнахме един атрибут на етикет
. С атрибута border, който задава ширината на границата в пиксели. По подразбиране е 0 и следователно клетките по подразбиране се показват без рамка.
В допълнение към атрибута border, има няколко други важни атрибута, поддържани от етикета.
. Нека да ги разгледаме.
Атрибут подравнете— комплекти подравняванетаблици на страницата. Може да приема стойностите ляво, централно, дясно, които задават подравняването съответно вляво, в центъра и вдясно. По подразбиране е оставено.
Атрибут заден план, което на задава фоновото изображениекъм масата. Той приема адреса на файла с изображение като стойност.
bgcolor- инсталира Цвят на фонамаси. Може да се използва заедно с атрибута background.
Атрибут цвят на границатакомплекти цвят на рамкатамаси.
клетъчна подложка- определя разстояние между границата на клетката и нейното съдържание. Позволява ви да подобрите четливостта на таблицата. Стойността може да бъде всяко положително число.
Разстояние между клетките— комплекти разстояние между външните граници на клетката.
За това да говорим как да вмъкнете таблица в html страница Ще завърша, само ще обобщя:
- таговете се използват за вмъкване на таблица
- обозначение на масата,
- добавяне на линия и - вмъкване на клетка; - таблицата е блоков елемент на уеб страница;
- съдържанието на клетките може да бъде не само текст, но и картини и други таблици;
- таблицата може да съдържа три вида секции: заглавна секция — , раздел за завършване и част от тялото ;
- използвайте атрибути на тагове за обединяване на клетки
colspan и rowspan. Това е всичко, в следващата публикация ще говоря за инструментите за навигация в html сайта. Абонирайте се за актуализациите на моя блог, за да не пропуснете тази публикация! Всички, до скоро!
- етикет