За да комбинирате две или повече клетки в една, използвайте атрибутите colspan и rowspan на маркера
Пример 12.3. Невалидна клетъчна конкатенация
| клетка 1 | клетка 2 | |
| клетка 3 | клетка 4 | |
Резултатът от този пример е показан на фиг. 12.5.
Ориз. 12.5. Появата на допълнителна клетка в таблицата
Първият ред от примера има три клетки, две от тях са свързани с помощта на атрибута colspan, а вторият ред добавя само две клетки. Това създава допълнителна клетка, която се показва в браузъра. Може ясно да се види на фиг. 12.5.
Пример 12-4 демонстрира правилното използване на атрибутите colspan и rowspan.
Пример 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" са комбинирани къде две, а къде три клетки. Приложено е вертикално сливане в клетката с надпис „Браузър“.
Ще ви разкажа подробно и подробно как да комбинирате клетките вертикално и хоризонтално в таблици.
В тази статия няма да обясняваме принципите на създаване на 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, добавете атрибута colspan със стойността 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 вертикално. Извършваме подобна процедура - задаваме атрибута rowspan на клетка номер 9 със стойност 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. Това се прави с помощта на етикета
| добавя клетка към ред. Не забравяйте да затворите тагове. Например, нека създадем таблица като тази:
За да се виждат рамки на таблицата, етикетът
|
