Таблица е мрежа от клетки, които образуват редове и колони. Примерите за таблици включват различни финансови отчети, спортни резултати, календари, графици и др. Индивидуалният блок на мрежата се нарича клетка на таблица. Клетките на таблицата могат да съдържат голямо разнообразие от информация, включително числа, текст и дори видео и аудио обекти. Използвайки езика HTML, таблиците се пишат ред по ред.
Елемент
служи като контейнер за елементите, които определят съдържанието на таблицата. За да създадете ред в таблица, трябва да добавите вътре в елемента
сдвоен блок маркер
(съкратено от английски. "taye row" - ред в таблицата). Колко тагове
добавите, толкова редове в таблицата и ще има. Отварящ се етикет
означава началото на нов ред в таблицата. Елементите се поставят след него |
(съкратено от английски „taye data“ - таблични данни), всяка от които посочва отделна клетка в този ред. Вътрешен елемент |
поставяте съдържанието си (текст, числа, изображения и т.н.), показвано в тази клетка. Краят на реда е обозначен с краен маркер |
.
Елемент
(съкратено от английското "taYe heading" - заглавието на таблицата) - незадължителен елемент от таблицата, който се използва по същия начин като елемента |
целта му обаче е да създаде заглавка за ред или колона. Обикновено елементът |
поставени в първия ред на таблицата. Браузърите показват текст в елемент |
с удебелен шрифт и го центрирайте спрямо клетката. Използване на елемент в кода |
помага на хората, които използват екранни четци, а също така подобрява работата на индексиращите таблици на търсачките.
Помислете за проста таблица, която има три реда и три колони, като клетките в първия ред са заглавията на съответните колони. По подразбиране таблиците обикновено се показват без рамка:
Пример: Проста HTML таблица
| Заглавие 1 | Заглавие 2 | Заглавие 3 |
|---|
| Клетка 2x1 | Клетка 2x2 | Клетка 2x3 |
| Клетка 3х1 | Клетка 3х2 | Клетка 3х3 |
Граница на маса
Вече знаем, че по подразбиране таблиците се показват без рамка. За да добавите рамка около таблица, трябва да посочите няколко прости правила за стилови таблици във вашия документ. Имот границаконтролира показването на линиите на мрежата на таблицата, а също така задава ширината на границата около таблицата в пиксели. Около масата и между клетките се появява рамка. Добавете рамка с ширина един пиксел към вече създадената таблица, като зададете свойството границаза всички елементи на таблицата например по следния начин:
Пример: Прилагане на имот граница
Рамка около масата
| Заглавие 1 | Заглавие 2 | Заглавие 3 |
|---|
| Клетка 2x1 | Клетка 2x2 | Клетка 2x3 |
| Клетка 3х1 | Клетка 3х2 | Клетка 3х3 |
Единична рамка за маса
По подразбиране съседните клетки на таблицата ще имат собствена граница. Това води до един вид „двойна граница“, както се вижда в горния пример. За да се отървете от "двойната граница", добавете CSS свойството срутване на границатакъм вашата таблица със стилове:
Пример: Прилагане на имот срутване на границата
Рамка около масата
| Заглавие 1 | Заглавие 2 | Заглавие 3 |
|---|
| Клетка 2x1 | Клетка 2x2 | Клетка 2x3 |
| Клетка 3х1 | Клетка 3х2 | Клетка 3х3 |
Полета на таблици и интервали
По подразбиране клетките на таблицата са оразмерени така, че да отговарят на съдържанието им, но понякога е необходимо да се оставят някои отстъпки около данните от таблицата. Тъй като разстоянието и полетата са свързани с елементи за представяне на данни, това пространство може да се персонализира с помощта на CSS стилови таблици. Клетъчно поле ( подплънки) Разстоянието между съдържанието на клетката и нейната граница. За да го добавите, използвайте свойството подплънкикъм елемент |
или |
... Разстояние между клетките ( разстояние между границите) Разстоянието между тях ( |
или |
). Първо задайте стойността отделниИмот срутване на границатаелемент
и след това задайте разстоянието между клетките, като промените стойността на параметъра разстояние между границите... Преди това атрибутите са били отговорни за полетата и разстоянието между клетките. клетъчна подложкаи разпределение на клеткитеелемент
но те бяха отхвърлени в спецификацията на HTML5.
Пример за използване подплънкии разстояние между границите:
Пример: Прилагане на свойства подплънкии разстояние между границите
подплънки и гранични разстояния
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
Ширина на масата
Ширината, заемана от таблицата в прозореца на браузъра, може да бъде зададена с помощта на свойството ширина CSS, в пиксели или проценти. Посочването на ширината на таблицата в пиксели ви позволява да определите точната й ширина. Процентът ви позволява да направите таблицата гъвкава, т.е. той ще се "разтегне" или "свие" в зависимост от това какви други елементи са на страницата и колко голям е прозорецът на браузъра.
Ето един пример за използване на свойството ширина: Маса (ширина: 100%;) Пример: Прилагане на имот ширина
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
ширина: 100%
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
Свързващи клетки (colspan и rowpan)
Една от основните характеристики на структурата на таблицата е конкатенацията на клетките, която включва разтягане на клетка за обхващане на множество редове или колони. Това позволява сложни структури на таблици: заглавки
или клетки |
се комбинират чрез добавяне на атрибути colspanили редове... Атрибут colspanопределя броя на клетките, които дадена клетка се простира хоризонтално, и редове- вертикално.
Свържете колони
Свързването на колони се постига с помощта на атрибута colspanв елементи |
или |
- клетката е опъната надясно, за да покрие следващите колони. В следния пример стойността на атрибута colspanе равно на 2, което означава, че клетката трябва да обхваща две колони.
Пример: Прилагане на атрибут colspan
Атрибут Colspan
| colspan= "2"> Клетка с две колони |
|---|
| Клетка 1 | Клетка 2 |
| Клетка 3 | Клетка 4 |
Свързващи низове
Низове, свързани заедно с атрибут редове, се държат точно като обединени колони, с единствената разлика, че диапазонът от клетки е отгоре надолу и обхваща множество редове.
Този пример разтяга първата клетка на таблицата на два реда надолу:
Пример: Прилагане на атрибут редове
| Клетка на две линии |
Клетка 1 | Клетка 2 |
|---|
| Клетка 3 | Клетка 4 |
Атрибут на диапазона на редовете
| редове= "2"> Клетка на два реда |
Клетка 1 | Клетка 2 |
|---|
| Клетка 3 | Клетка 4 |
Заглавка на таблица
Етикет за двойка се използва за създаване на заглавие или надпис на таблица
(от английския надпис - подпис). Елемент
е за организиране на заглавката на таблицата. Намира се веднага след етикета
но извън описанието на ред или клетка.
Пример: Използване на маркер
Елемент на надписа
Това е заглавката на таблицата
| Клетка на две линии |
Клетка 1 | Клетка 2 |
|---|
| Клетка 3 | Клетка 4 |
Групиране на тагове за елементи от таблицата
За да групирате елементи от таблицата, използвайте таговете
,
и
... Точно както уеб страницата може да съдържа заглавка, тяло и долен колонтитул, таблицата може да съдържа глава, тяло и долен колонтитул. За да групирате логически редове в горната част на таблицата (тоест, за да създадете горната глава на таблицата), използвайте маркера
... Заглавките на таблицата трябва да бъдат поставени в елемента
, например:
| Заглавие 1 | Заглавие 2< /th> |
|---|
Основното съдържание (тялото) на таблицата трябва да бъде вътре в елемента
(може да има няколко такива блока в таблицата). За логическо групиране на редове в долната част на таблицата (тоест за създаване на „долен колонтитул“ на таблицата), използвайте маркера
(не повече от един маркер е разрешен в една таблица
). В изходния код тагът
поставени преди етикета
... Освен логическото групиране, една от причините за използване на елементи
и
е, че ако таблицата ви е твърде дълга, за да се показва едновременно на екрана (или да бъде отпечатана), тогава браузърът ще покаже заглавието (
) и последният ред (
), когато потребителят превърта таблицата ви.
Пример: Етикети
,
и
Taad, tbody и tfoot тагове
| Това е заглавката на таблицата |
|---|
| Това е долният колонтитул на таблицата |
| Клетка 1 | Клетка 2 | Клетка 3 | Клетка 4 |
Въпреки факта, че сме пред
добавено
, въпреки това се появява в края на таблицата. Това идва от факта, че
може да съдържа много редове. Но браузърът трябва да визуализира долната част на таблицата, преди да получи всички (потенциално многобройни) редове данни. Ето защо
в кода се пише преди елемента
.
Задачи
Таблиците са един от най -важните, но сложни елементи, които трябва да присъстват на уеб страниците. С тяхна помощ е удобно да представите важна и полезна информация в доста сбита форма. Разбира се, повечето редактори в шаблони, работещи на различни двигатели, ви позволяват автоматично да вмъкнете таблица в страница на сайт или отделна публикация, но какво ще стане, ако дизайнът на уеб ресурс, неговите страници са създадени от нулата? Тогава начинаещият съветник може да се сблъска с проблем: как да го направя. Нека да разберем как правилно и бързо да създадем този елемент. Избор на редакторНа първо място, започвайки да създавате таблица, трябва да решите редактора, в който ще работите. Разбира се, най -лесният начин е да изберете програмата, в която създавате основния код на сайта. Но най -добре е да използвате добър стар тефтер за тези цели. Може да попитате защо да си усложнявате живота, защото ако правите всичко наведнъж в редактора, тогава резултатът също може да се види веднага, а също така можете да използвате съветите на програмата. Да, това е вярно, но създавайки таблица от нулата, вие не само ще можете да проучите задълбочено самия принцип на нейното създаване, но и да предотвратите досадни правописни грешки и грешки в основния код. Понякога се случва курсорът случайно да се премести надолу и в процеса на писане грешка прониква в кода, който понякога е трудно да се намери. След като създадете таблица в бележник, можете да копирате нейния шифър и да я поставите където искате. Алгоритъм за създаване на таблицаПърво, нека съставим кратък алгоритъм за това как да направите таблица в HTML. Това е така, за да разберете последователността на всяка стъпка. След това ще анализираме как точно да изпълним всяка от точките. 
Нека започнем с подготвителните стъпки. 1. Начертайте схематично изображение на масата върху лист хартия. 2. Преброяваме броя на линиите и клетките. Ако броят на последните е различен, броим за всеки ред поотделно. 3. Определете броя на заглавните клетки в реда (например клетки "Не", "Име" и т.н.). 4. Запишете основните параметри на таблицата - цвят, височина и ширина, подравняване на текста - като цяло, каквото смятате за необходимо. 1. Вмъкнете тагове на таблицата. 2. Вмъкнете маркери на ред въз основа на номера, от който се нуждаете. 3. В редовете вмъкнете етикетите на клетки (обикновени и главни), също въз основа на номера, който сте написали на хартия. 4. Задайте параметрите за таблицата като цяло. 5. Ако е необходимо, задайте индикатори за отделни клетки. 6. Запълваме клетките си с текст. 
Създайте таблицаИ така, вие сте избрали редактор, сега нека да разберем как да създадете таблица в HTML. Етикетът, с който таблицата се вмъква в кода на страницата ( ), е сдвоен, тоест нашата конструкция започва с този маркер и завършва с .След като вмъкнахме етикетите на таблицата, продължаваме да създаваме редове и клетки. Веднага отбелязваме, че тези елементи също са сдвоени. Етикет посочва низове и | - клетки. За заглавните клетки използвайте сдвоения елемент | . Както вече беше споменато, първата стъпка е да се изготвят линиите, след което да се запишат клетките в тях. За да не се объркате, ви съветваме или да направите отстъп между всеки блок в един или два реда, или да напишете нов блок от елементи, като използвате клавиша "Tab". Как би могло да изглежда? Подобно на това: ;;| P / p No. | ;| Фамилия | ; ;;| 1 | ;| Иванов | ; | ; .
Както можете да видите, няма нищо сложно в това. Основното нещо е да не се объркате в броя редове и клетки. В противен случай масата може да се изкриви. Обсъждахме създаването на таблица в HTML, сега можем да преминем към параметрите както на самата матрица, така и на нейните редове и клетки. 
Параметри на таблицатаКогато кодът е написан, трябва да обърнете внимание на следните точки: подравняване в граници, фон, текст и т.н. Параметрите на таблицата са зададени в маркера ... Те включват:1. Граница - ширината на границите. Задайте като цяло число. По подразбиране границите на всяка таблица са нула. 2. Граничен цвят - цвят на рамката. Може да бъде зададен като шестнадесетичен цветен код (# 00008B) и името му на английски (DarkBlue). По подразбиране винаги е сиво. 3. Bgcolor - Задава се също по код или име. 4. Align - подравняване на текста зад масата. По подразбиране е подравнено вляво. Има следните опции за този параметър: - ляво - навийте се надясно;
- надясно -обвиване наляво;
- център - показва таблицата в центъра, без да се увива.
5. Ширина и височина - ширина и височина на масата. Може да се задава както в пиксели, така и като процент (спрямо размера на прозореца на браузъра). Предписвайки този или онзи индикатор, трябва да обърнете специално внимание на дизайна. Параметърът трябва да бъде последван от знак "равен", последван от посочената стойност в кавички. Що се отнася до цвета на текста, той е оформен по същия начин като нормалния текст в HTML формат. Пример за дизайн на маса: ;;| P / p No. | ;| Фамилия | ; ;;| 1 | ;| Иванов | ; | ; .
Параметри на низИ така, вече разбрахме как да направим таблица в HTML и да регистрираме основните й параметри. Но какво, ако трябва да подчертаем ред? Трябва ли да бъде оформен по различен начин от основния текст на таблицата? Параметрите на низа са записани в маркера абсолютно същото като данните от таблицата. Следните променливи могат да бъдат зададени за низ:1. Граница, bordercolor и bgcolor вече са ви известни. 2. Align - подравняване на текста в ред. Той може да приема стойностите наляво, в центъра и вдясно. 3. Valign - този маркер подравнява текста вертикално. Той приема следните стойности: - отгоре - текстът е подравнен към горната граница;
- средна - в центъра;
- отдолу - по долната граница.
Пример за форматиране на ред: Параметри на клеткатаИ последното нещо, на което си струва да се обърне внимание за тези, които искат да знаят как да направят таблица в HTML, са параметрите на отделни клетки, както обикновени, така и главни. Всъщност всичко се прави по същия начин, както за таблица или ред. Единственото нещо е, че се добавят още два важни елемента: 1. Colspan - този параметър определя броя колони, които клетката може да обхваща. 2. Обхват на редовете - вече показва броя редове, които тази клетка заема. Тъй като дизайнът не се различава от писането на ред, няма да даваме пример за кода. 
изводиНаправата на маса не е толкова трудна, колкото изглежда на пръв поглед. Основното при писането на нейния код е постоянство и внимание. Що се отнася до това как да вмъкнете таблица в HTML, просто трябва да копирате и поставите нейния шифър на точното място на вашата страница, където според вас тя трябва да се намира. Не се колебайте да експериментирате и скоро ще овладеете техниката за създаване на маси до съвършенство. Късмет!
HTML таблиците са толкова функционални, че можете да ги използвате за набиране на цели сайтове (четене). Сега ще говорим за вмъкване на прости HTML таблици в уеб страница, анализиране само на маркирането, но не докосване на дизайна, защото е по -добре да украсявате таблици със CSS стилове.
Етикети и атрибути на таблицата
Ето основните елементи, от които се нуждаете, за да създадете таблици:
- контейнера, в който се намира масата (същото като за етикетирани или
за номерирани списъци).
- граница- атрибут, който определя дебелината на рамките. По -добре е вместо това да използвате граничното CSS свойство.
-
посочва подписа на таблицата. Не е нужно да използвате контейнера, но ако все пак решите да заглавите таблицата, поставете я веднага след маркера
, извън клетките и линиите.
- сдвоен маркер, съдържащ ред на таблица (клетки, разположени на същото ниво хоризонтално).
|
- маркерът, който създава заглавната клетка на таблицата. Външно съдържанието му се различава от съдържанието в други клетки - обикновено текстът вътре |
браузърът е удебелен и центриран.
- контейнер, с който се създава проста клетка. Колко такива тагове ще съдържа низът (tag
, в него ще има толкова клетки: един маркер - една клетка.
-
ви позволява да групирате колони, бързо и без да претрупвате кода, за да ги дефинирате общи характеристики. С помощта на контейнер можете да отделите логически части на таблица една от друга. Намира се след етикета
, ако не, тогава след
.
-
използва се за същата цел като
.
може да съдържа
но не обратното.
- педя- атрибут, който определя броя на колоните, към които се прилагат свойствата на контейнера
.
-
,
и
- контейнери, които ви позволяват да разделите таблицата съответно на горната (заглавки), основната (тялото) и долната (крайната) част. В HTML таблица последователността на тези тагове е същата като последователността на контейнерите
,
и в HTML документа.
- colspanнеобходими за комбиниране на клетки в един ред. Стойността на атрибута съдържа число, което определя броя на клетките, които трябва да бъдат обединени.
- редовеобединява клетките в колони.
Пример за създаване на таблица
Създайте HTML документ и копирайте следния код в него:
Примерна таблица
Инструменти за изграждане на уебсайтове
| Назначаване | Инструмент |
| Маркировка | Html | XHTML |
| Регистрация | CSS |
| Развитие на | PHP | Python |
В браузъра документът ще изглежда така: Нека анализираме кои редове код са отговорни за какво.
- отвори масата, като зададе дебелината на рамките.
-
Инструменти за изграждане на уебсайтове
- го озаглави.
- отвори линия.
|
Назначаване |
- създаде клетка с дизайн на заглавие.|
Инструмент |
- създаде втора заглавна клетка в реда. Параметърът colspan показва, че тази клетка трябва да заема две хоризонтално.
- затвори линията. Останалите редове бяха създадени по същия начин. |
Маркировка |
Html |
XHTML |
- добавен е вторият ред на таблицата с обичайните, не заглавни клетки. Следващите редове и клетки бяха вмъкнати по подобен начин.
- затвори масата.
е тялото на масата. Тялото се състои от редове и колони. Таблицата се попълва ред по ред.
Всеки етикет създава нов ред. По -нататък в гнездо се създават колони. Могат да бъдат създадени няколко колони. В този случай трябва да следите броя на колоните във всеки ред. Например, ако първият ред имаше 5 колони, следващите редове също трябва да имат 5 колони. В противен случай масата ще плава. Възможно е да се комбинират клетки.
Как да направите таблица в html
Нека дадем пример, html код:
| Примерна таблица |
| Колона 1 |
Колона 2 |
Обърнете внимание на клетката | ... Използваме специалния атрибут colspan, за да комбинираме клетките хоризонтално. Числената му стойност показва броя на колоните за комбиниране. Има и аналог на този атрибут: tag | (заглавка на таблица), където също трябва да напишете colspan. Резултатът ще бъде същият. Но често се използва обичайният td.
Сега нека разгледаме по -отблизо всички атрибути на маркера.
.
Атрибути и свойства на маркера
Към началния маркер можете да напишете различни атрибути.
1. Свойство align = "параметър" - задава подравняване на таблицата. Тя може да приема следните стойности:
В горния пример подравнихме таблицата в центъра align = "center".
Този атрибут може да се приложи не само към таблица, но и към отделни клетки на таблицата. или струни | ... По този начин подравняването ще бъде различно в различните клетки.
Например
| ... |
| ... |
...
2. Свойство фон = "URL" - задава фоновото изображение. Вместо URL адреса трябва да бъде изписан адресът на фоновото изображение.
Пример
| Примерна таблица |
| Колона 1 |
Колона 2 |
Преобразувано на страницата в следното:
В горния пример нашето фоново изображение се намира в img папката (която се намира в същата директория като html страницата), а изображението се нарича fon.gif. Обърнете внимание, че в маркера сме добавили style = "color: white;" ... Тъй като фонът е почти черен, така че текстът да не се слива с фона, направихме текста бял.
3. Свойство bgcolor = "color" - задава цвета на фона на таблицата. Като цвят можете да изберете някоя от цялата палитра (вижте кодовете и имената на html цветове)
4. Граница на свойството = "номер" - задава дебелината на границата на таблицата. В предишните примери зададохме border = "1", което означава, че ширината на рамката е 1 пиксел.
5. Свойство bordercolor = "цвят" - задава цвета на границата. Ако border = "0", тогава няма да има рамка и цветът на рамката няма да има смисъл.
6. Свойство cellpadding = "число" - отстъп от рамката към съдържанието на клетката в пиксели.
7. Свойство cellpacing = "число" - разстоянието между клетките в пиксели.
8. Свойство cols = "число" - броят на колоните. Ако не го посочите, браузърът сам ще определи броя на колоните. Единствената разлика е, че посочването на този параметър вероятно ще ускори зареждането на таблицата.
9. Свойство frame = "параметър" - как да се показват граници около таблицата. Тя може да приема следните стойности:
- void - не чертайте граници
- border - границата около масата
- отгоре - рамка в горната част на таблицата
- отдолу - рамка в долната част на таблицата
- hsides - добавете само хоризонтални рамки (отгоре и отдолу на таблицата)
- противоположни страници - нарисувайте само вертикални граници (отляво и отдясно на таблицата)
- rhs - рамка само от дясната страна на масата
- lhs - рамка само от лявата страна на масата
10. Свойство височина = "число" - задава височината на таблицата: или в пиксели, или в проценти.
11. Правила на свойството = "параметър" - къде да се показват границите между клетките. Тя може да приема следните стойности:
- всички - линия е нарисувана около всяка клетка на таблицата
- групи - редът се показва между групите, които са образувани от тагове , , ,
или
- cols - редът се показва между колоните
- няма - всички граници са скрити
- редове - границата се очертава между редовете на таблицата, създадени чрез маркера
12. Property width = "number" - задава ширината на таблицата: или в пиксели, или в проценти.
13. Свойство class = "class_name" - можете да посочите името на класа, към който принадлежи таблицата.
14. Style style = "styles" - стиловете могат да се задават индивидуално за всяка таблица.
Сега е моментът да се потопите в таблицата и да разгледате атрибутите на клетките на таблицата. Тези атрибути трябва да бъдат записани в началния маркер.
.
Атрибути и свойства и |
1. Свойство align = "параметър" - задава подравняване на отделна клетка на таблица. Тя може да приема следните стойности:
- ляво - ляво подравняване
- център - центриране на центъра
- дясно - дясно подравняване
2. Свойство background = "URL" - задава фоновото изображение на клетката. Вместо URL адреса трябва да бъде изписан адресът на фоновото изображение.
3. Свойство bgcolor = "color" - задава цвета на фона на клетката.
4. Свойство bordercolor = "цвят" - задава цвета на границата на клетката.
5. Свойство char = "буква" - задава буквата, от която подравняването трябва да се извърши. Стойността на атрибута align трябва да бъде зададена на char.
6. Свойство colspan = "число" - задава броя на хоризонталните клетки, които да се комбинират.
7. Височина на свойството = "число" - задава височината на таблицата: или в пиксели, или в проценти%.
8. Property width = "number" - задава ширината на таблицата: или в пиксели, или в проценти%.
9. Свойство rowspan = "число" - задава броя на слетите вертикални клетки.
10. Свойство valign = "параметър" - вертикално подравняване на съдържанието на клетката.
- отгоре - подравнява съдържанието на клетката до горната част на реда
- средно - средно подравняване
- отдолу - подравнете към дъното
- baseline - изравняване на базовата линия
Бележка 1 За етикет | налични са същите опции като за | ... Параметри за един маркер | ще се прилага йерархично за всички вътре в него
Как да предотвратим слепването на клетките на таблицата
В случай на използване на рамка (граница на клетки) и нулева подложка между клетките, те все още са залепени заедно и получавате двойна рамка. За да избегнете това, трябва да регистрирате границата-сгъване: сгъване таблица в таблицата със стилове:
...
Уважаеми читателю, сега научихте много повече за етикета на html таблицата. Сега ви съветвам да преминете към следващия урок.
Изходен код на проста HTML таблица
Клетка 1 |
Клетка 2 |
Клетка 3 |
Клетка 4 |
Клетка 5 |
Клетка 6 |
Клетка 7 |
Клетка 8 |
Клетка 9 |
HTML заглавки на таблици
В HTML таблиците има 2 типа клетки. Етикетът определя клетка от обичайния тип. Ако клетката действа като заглавие, тя се идентифицира с маркер.
Примерна HTML таблица с th заглавие
| Volkswagen AG |
Daimler AG |
BMW Group |
|---|
| Ауди |
Mercedes-Benz |
BMW |
| Шкода |
Mercedes-AMG |
Мини |
| Lamborghini |
Умен |
Ролс Ройс |
Изходен код на HTML таблица с th заглавия
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Ауди |
Mercedes-Benz |
BMW |
Шкода |
Mercedes-AMG |
Мини |
Lamborghini |
Умен |
Ролс Ройс |
Свържете клетките в HTML таблица
HTML таблиците имат възможност да комбинират клетки хоризонтално и вертикално.
Да се обединяват клетки хоризонталноизползвайте атрибута colspan = " NS", в клетката или, където х
Да се обединяват клетките вертикалноизползвайте атрибута rowspan = " NS", в клетката или, където х- броя на клетките за комбиниране.
Клетките могат да бъдат обединени хоризонтално и вертикално едновременно. За да направите това, използвайте атрибутите colspan и rowspan за желаната клетка:
Текст на клетка |
Обърнете внимание, че броят на елементите в реда се променя, когато обединявате клетки. Например, ако една таблица има 3 колони с клетки и ние комбинираме първата и втората клетки, тогава в маркера ще има 2 елемента, определящи този ред, първият от тях ще съдържа атрибута colspan = "2".
Примерна HTML таблица с конкатенация на клетки
Източник на HTML таблица със слети клетки
Nissan |
|---|
Модел |
Оборудване |
Наличност |
|---|
Nissan Qashqai |
ВИЗИЯ |
+ |
ТЕКНА |
+ |
Nissan x-trail |
АКЕНТА |
+ |
CONNECTA |
- |
Заглавни и долни колонтитули и подпис в HTML таблици
HTML таблиците могат да бъдат разделени на 3 области: заглавка, текст, долен колонтитул.
Това става чрез обвиване на редовете на избраната част от таблицата с тагове. определя областта на заглавката, - областта на долния колонтитул, - тялото на таблицата.
По подразбиране заглавките и долните колонтитули не са оформени (това може да стане чрез CSS, ако е необходимо), но могат да се използват от браузърите. Например, когато отпечатвате таблица с много страници, горните и долните колонтитули могат да се дублират на всяка отпечатана страница.
Правилният ред на поставяне на маркери на области в HTML кода на таблицата е следният: първо заглавката, след това долният колонтитул, след това основното тяло. В този случай основната част на страницата ще се показва между заглавните и долните колонтитули.
Можете да добавите подпис към таблицата, ако е необходимо. За да направите това, използвайте маркер.
Примерна HTML таблица със заглавни и долни колонтитули и подпис
Изходен код за таблица със заглавни и долни колонтитули и подпис
Пълен комплект Renault Sandero Stepway
Характеристика |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Наличност |
+ |
+ |
+ |
|---|
Мощност на двигателя |
0,9 (90 к.с.) |
0,9 (90 к.с.) |
1.5 (90 к.с.) |
|---|
Гориво |
бензин |
бензин |
дизел |
|---|
Степен на токсичност |
Евро 6 |
Евро 6 |
Евро 5 |
|---|
Колони и групи колони
HTML таблицата може да бъде разделена на колони и групи колони с помощта на таговете и.
Това разделяне ви позволява да зададете стилове за таблицата, като използвате минимален брой CSS свойства, като по този начин намалите количеството на кода на таблицата (вместо да дефинирате стилове за всяка клетка в колона, можете да зададете стилове за една или повече колони наведнъж).
Етикети и поставени вътре в етикета преди таговете, AKP6 (EDC) Предаване |
HTML източник c таблица и
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Характеристика |
|---|
1.5 (90 к.с.) |
1.2 (115 к.с.) |
1.5 (90 к.с.) |
Мощност на двигателя |
|---|
дизел |
бензин |
дизел |
Гориво |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Предаване |
|---|
Таблици в оформлението на страницата на сайта
На съвременните сайтове е важно правилно да се показват страници както на компютри, така и на мобилни устройства. Не е препоръчително да се използват таблици за създаване на скелет на HTML страница, тъй като способността да се адаптира съдържанието към екрани с различни размери (компютри, смартфони, таблети) се губи.
Етикетите на групата таблици се използват най-добре в рамките на страница за показване на съдържание, форматирано в таблица.
| |
|
| | |
| | |
