Урок в HTML. Обединяване на клетките

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

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

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

В HTML, съединението на клетките възниква с помощта на два атрибута: colspan и rowspan. Те са посочени за td тага.

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

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

HTML таблица: комбиниране на клетките вертикално и хоризонтално

Можете да посочите по-малко клетки или редове само ако комбинирате нещо. Но вместо изтрития елемент в най-близкия съсед до началото, трябва да посочите допълнителен атрибут. Ако комбинирате колони, след това colspan, ако редовете, а след това rowspan. Стойността на атрибута определя броя на елементите, които ще бъдат обединени.

Обърнете внимание, че трябва да посочите точно в най-близкия елемент до началото. Например, във фигурата по-горе, ако искате да обедините клетки 1 и 2, трябва да посочите в клетка 1 атрибута colspan с стойност две. И изтрийте клетка номер 2 или 3, няма значение.

Най-важното е, че кажете на клетката колко пространство ще отнеме. Стойността по подразбиране е 1.

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

Тук клетката с числото 43 заема два реда. За да направите това, сте задали атрибута rowspan. Спомням си просто:

• Редът е низ.
• Col Column / column.
• Span - сдружение.

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

В HTML, комбинирането на клетките може да се извърши в две посоки: вертикално и хоризонтално. За целта задайте едновременно и двата атрибута.

На фигурата по-горе, само това е показано, че можете да направите съюз на редове, колони и в същото време колони и редове.

HTML: Обединяване на клетки. примери

Помислете за по-сложни примери стъпка по стъпка в големи таблици. По-долу във фигурата вляво е оригиналната версия на обикновената таблица. И вдясно - вариант със съединението на две клетки във втората линия. По-лесно е да сравнявате HTML кода.

Можете също да комбинирате три клетки в центъра. В първия случай атрибутът colspan е посочен в клетка # 1. Тук първата ще бъде непроменена, а във втората добавен colspan, равен на три.

Ако искате да комбинирате всички клетки в един ред с един, изтрийте четири td, а в първия - colspan = `5`.

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

Таблици като скелет на обекта

В HTML, съюзът на клетките не винаги се използва за обикновени таблици с информация (както в Word или Excel). Разработчиците на уеб сайтове често използват и ги използват за оформление на уебсайтове.

Например, можете да видите това оформление на сайта. Този дизайн е много прост и примитивен. Но тук можете да покажете изрично използването на асоциацията.

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

Благодарение на това можете да поставите дизайнерски елементи на техните места и нищо няма да отиде никъде извън техните граници. Това е много удобно и просто. Ето защо беше толкова популярен. Сега се препоръчва да създадете блок за тагове div.

заключение

И не забравяйте, че в HTML таблицата можете да комбинирате клетките по ваш избор. Всичко зависи от това, от което се нуждаете, и как искате да го направите. Основното нещо, не се обърквайте. Ако искате да създадете голяма маса с голям брой връзки, препоръчително е първо да изтеглите всичко това на лист хартия или в Paint. Ще бъде по-лесно за начинаещи.

Когато спечелите опит, можете лесно да извършвате такива операции в главата си.