За да обедините две или повече клетки в една, използвайте атрибутите colspan и rowspan на тага
Пример 12.3. Неправилно сливане на клетки
| Клетка 1 | Клетка 2 | |
| Клетка 3 | Клетка 4 | |
Резултат този примерпоказано на фиг. 12.5.
Ориз. 12.5. Появата на допълнителна клетка в таблицата
Първият ред на примера има три клетки, две от които са обединени с атрибута colspan, а вторият ред има само две добавени клетки. Това води до показване на допълнителна клетка в браузъра. Ясно се вижда на фиг. 12.5.
Правилното използване на атрибутите colspan и rowspan е показано в пример 12-4.
Пример 12.4. Сливане на клетки вертикално и хоризонтално
| Браузър | Internet Explorer | Опера | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| Поддържа се | Не | да | Не | да | да | да | да |
Резултатът от този пример е показан на фиг. 12.6.
Ориз. 12.6. Таблица с обединени клетки
Тази таблица има осем колони и три реда. Част от клетките с надписи "Internet Explorer", "Opera" и "Firefox" са обединени, където има две и където има три клетки. Към клетката с етикет „Браузър“ е приложено вертикално сливане.
масиНай-добрият пример е простата таблица, показана в листинг 5-10 в HTML.
Това е обикновена таблица, чиито клетки са номерирани - така че ще ни бъде по-лесно в бъдеще. На фиг. 5.2 показва външния му вид в прозорец на уеб браузър.
Сега разгледайте таблицата на фиг. 5.3.
Тук някои клетки са обединени. Вижда се, че обединените клетки сякаш са се слели в една. Как да го направя?
Специално за тези тагове и
За да обедините няколко клетки хоризонтално в една, следвайте тези стъпки.
1. Намерете в кода HTML таг (
2. Въведете атрибута COLSPAN в него и му задайте броя на клетките, които да се комбинират, като броите и първата.
3. Премахване на етикети (
Нека обединим клетки 2 и 3 от таблицата (вижте списък 5.10). Коригираният кодов фрагмент, който създава първия ред на тази таблица, е показан в листинг 5-11.
По същия начин ще създадем комбинираните клетки 4 + 5 и 12 + 13 + 14 + 15.
Обединяването на клетки вертикално е малко по-сложно. Ето стъпките, които трябва да следвате за това.
1. Намерете в кода HTML низ(таг), който съдържа първата от обединените клетки (ако броите редовете отгоре надолу).
2. Намерете етикета (
3. Въведете в него атрибута ROWSPAN и му задайте количество обединени клетки, включително и първия от тях.
4. Вижте следващите редове и премахнете тагове от тях (
Останахме сливане на клетки 1 и 6 от нашата таблица. Списък 5-12 съдържа коригирания фрагмент от нейния HTML код (корекциите засягат първия и втория ред).
Обърнете внимание, че премахнахме етикета от втория ред, който създава шестата клетка, тъй като той е обединен с първата клетка.
Сега не се използва много често. Въпреки това, по-рано, по време на разцвета на табличния уеб дизайн, беше трудно да се срещне таблица без обединени клетки. Така или иначе, не е зле да знаете за това.
Ще ви разкажа подробно и подробно как да обединявате клетки вертикално и хоризонтално в таблици.
В тази статия няма да обясняваме принципите създаване на htmlтаблици, за тези знания вземете нашия курс по HTML.
За да обедините клетки в таблица, към етикета има два атрибута
Някои хора имат проблеми с използването на тези атрибути, сливането на клетки.
Атрибутите colspan и rowspan приемат цели числа от 0 до 1000 като параметри. Ето малък пример за това как можете да обедините клетки в таблица.
На пръв поглед е изпълнена не много сложна структура, но като се види изобилието
Предлагаме ви универсален и много удобен начин за обединяване на клетки.
За да започнете, подгответе заготовка за бъдещата си таблица, представяйки я с всички разделени клетки. Може да е маса 3x3, 6x10и така нататък. Ще дадем на всяка клетка собствен номер, като започнем да броим отляво надясно и отгоре надолу.
Нека анализираме създаването на таблицата, показана по-горе, използвайки този метод.
Ето как ще изглежда кодът на нашия детайл и самият детайл:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Необходимо е хоризонтално обединяване на клетки с числа 1,2,3. За да направите това, в кода, клетка номер 1, добавете атрибут col spanсъс стойност 3. И изтрийте
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Сега трябва да обединим клетки 9 и 13 вертикално. Извършваме подобна процедура - за клетка №9 задаваме атрибута rowspan със стойност 2, изтриваме клетката с №13, записваме номерата на клетките, от които се състои в обединената клетка.
Това ще промени нашия код и външен видмаси:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
Остава да обединим 11,12,15,16 клетки в една. За да направите това, в клетката с номер 11 записваме атрибутите colspan ="2" rowspan ="2" . Клетки 12,15,16 се премахват от кода. Записваме в комбинираната клетка числата 11,12,13,14.
Ето как нашият код и външният вид на таблицата ще се променят:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
Това е всичко, получихме оригиналната таблица, сега клетките могат да бъдат попълнени с информацията, която ще бъде удобна за вас.
Надяваме се, че разбирате принципа за създаване на сложни таблици с обединяване на клетки.
Остава да поговорим за една интересна функция HTML език. Този т.нар сливане на клеткимаси. Най-добрият пример е простата таблица, чийто HTML е показан в списък 5-10.
Списък 5.10
Това е обикновена таблица, чиито клетки са номерирани - така че ще ни бъде по-лесно в бъдеще. На фиг. 5.2 показва външния му вид в прозорец на уеб браузър.
Сега разгледайте таблицата на фиг. 5.3.
Тук някои клетки са обединени. Вижда се, че обединените клетки сякаш са се слели в една. Как да го направя?
Специално за тези тагове и
Ориз. 5.2.Оригиналната таблица, чиито клетки ще бъдат обединени
Ориз. 5.3.Таблицата, показана на фиг. 5.2, след обединяване на някои клетки (обединените клетки се обозначават чрез добавяне на техните номера)
За да обедините няколко клетки хоризонтално в една, следвайте тези стъпки.
1. Намерете етикета в HTML кода
По същия начин ще създадем комбинираните клетки 4 + 5 и 12 + 13 + 14 + 15.
Обединяването на клетки вертикално е малко по-сложно. Ето стъпките, които трябва да следвате за това.
1. Намерете реда (тага) в HTML кода, който съдържа първата от клетките за обединяване (ако броите редовете отгоре надолу).
2. Намерете етикета в кода на този ред
Обърнете внимание, че премахнахме етикета от втория ред, който създава шестата клетка, тъй като той е обединен с първата клетка.
Сливането на клетки не се използва много често в наши дни. Въпреки това, по-рано, по време на разцвета на табличния уеб дизайн (за табличен уеб дизайн вижте глава 10), беше трудно да се намери таблица без обединени клетки. Така или иначе, не е зле да знаете за това.
Много удобен артикул. Можете да правите всичко с тях. Разбира се, основната цел е да се постави информация под формата на таблица. Но разработчиците на уебсайтове са отишли по-далеч. По едно време беше много популярно да се използват таблици за създаване на рамка на сайта. Сега професионалистите се опитват да не правят това.
Таблиците са намерили широко приложение поради големия брой атрибути. Например, свойството за свързване на редове или колони се оказа много полезно.
Въведение в теорията
В HTML клетките се обединяват с помощта на два атрибута: colspan и rowspan. Те са посочени за td тага.
Нека първо анализираме структурата на всяка таблица, преди да се задълбочим в темата. Всяка таблица има ред с клетки в нея. Не забравяйте, че първоначално всички таблици трябва да съдържат еднакъв брой клетки.
Фигурата по-горе показва два реда, всеки с по три клетки. Това е обикновена маса. Ако посочите по-малък брой клетки в който и да е ред, тогава таблицата ще се "премести", всичко ще се покаже неправилно.
HTML таблица: Обединяване на клетки вертикално и хоризонтално
Можете да посочите по-малко клетки или редове само ако обединявате нещо. Но вместо премахнатия елемент трябва да се посочи допълнителен атрибут в най-близкия съсед до началото. Ако комбинирате колони, тогава colspan, ако редове, тогава rowspan. Стойността на атрибута определя броя на елементите, които да бъдат комбинирани.
Моля, обърнете внимание, че трябва да го посочите в най-близкия елемент до началото. Например, на фигурата по-горе, ако искате да обедините клетка 1 и 2, бихте задали клетка 1 да има атрибута colspan, зададен на две. И изтрийте клетка номер 2 или 3, вече няма значение.
Основното е, че казвате на клетката колко място ще заема. Стойността по подразбиране е 1.
Обединяването на клетки вертикално в HTML таблица следва същия принцип. Просто заетото пространство ще се счита вертикално. Вижте снимката по-долу.
Тук клетката с номер 43 заема два реда. За това беше зададен атрибутът rowspan. Лесно е да запомните:
- Ред - низ.
- Col - колона/колона.
- Span - съюз.
Създателите на езика се опитаха да го доближат възможно най-близо до човека, така че дори и без да го познават, човек може поне по някакъв начин да го разбере.
В HTML клетките могат да се обединяват в две посоки едновременно: вертикално и хоризонтално. За да направите това, посочете и двата атрибута едновременно.
На фигурата по-горе това е точно това, което показва, че можете да направите обединение: редове, колони и в същото време колони и редове.
HTML: обединяване на клетки. Примери
Нека да разгледаме по-сложни примери стъпка по стъпка в големи таблици. Фигурата по-долу вляво показва оригиналната версия на обикновена маса. И вдясно - вариант с обединението на две клетки във втория ред. Така е по-ясно и по-лесно да сравнявате HTML кода.
Можете също така да обедините три клетки в центъра. В първия случай атрибутът colspan е посочен в клетка #1. Тук първият ще бъде непроменен, а към втория е добавен colspan, равен на три.
Ако искате да обедините всички клетки подред в една, изтрийте четири tds и посочете colspan="5" в първата.
Както можете да видите, всъщност е доста просто. Няма нищо трудно. Основното нещо е внимателно, от първия път, да разберете всички клопки на таблиците и тогава не трябва да възникват проблеми.
Таблици като рамка на сайта
В HTML сливането на клетки не винаги се използва за обикновени таблици с информация (както в Word или Excel). Разработчиците на уебсайтове често и преди без изключение ги използваха за оформление на уебсайтове.
Например, разгледайте това оформление на сайта. Този дизайн е много прост и примитивен. Но тук е възможно да се покаже изрично използването на присъединяването.
Първоначално имаше таблица от три реда, по две клетки. След това, за да се постави логото на сайта, двете клетки на първия ред бяха обединени. AT долната линиянаправи същото, за да постави "мазето".
Благодарение на това можете да поставите дизайнерски елементи на техните места и нищо няма да излезе извън неговите граници. Много е удобно и просто. Ето защо беше толкова популярен. Тагът div вече се препоръчва за създаване на блокове.
Заключение
И не забравяйте, че в HTML таблица можете да правите каквото искате, за да обедините клетки. Всичко зависи от това от какво имате нужда и как искате да го подредите. Най-важното е да не се бъркате. Ако искате да създадете голяма таблица с голям брой съединения, препоръчително е първо да нарисувате всичко това на лист хартия или в Paint. За начинаещи ще бъде по-лесно по този начин.
Когато натрупате опит, можете лесно да извършвате такива операции в главата си.