Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...

Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...

Комплексной системы оценки состояния охраны труда на производственном объекте (КСОТ-П): Цели и задачи Комплексной системы оценки состояния охраны труда и определению факторов рисков по охране труда...

Интересное:

Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...

Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...

Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Расширим Ячейку1 на два столбца

2020-05-10

163

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 4 из 4

Расширим Ячейку1 на два столбца, задав ей атрибут colspan в значении 2. При этом она вытеснит ячейки справа и таблица развалится:

<table>

<tr>

<td colspan="2">Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 8</td>

<td>Ячейка 9</td>

</tr>

</table>

Таблица развалилась (Ячейка3 вылезла справа):

Ячейка 1		Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на два столбца без разваливания таблицы

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 - без разницы):

<table>

<tr>

<td colspan="2">Ячейка 1</td>

<td>Ячейка 2</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 8</td>

<td>Ячейка 9</td>

</tr>

</table>

Таблица больше не разваливается:

Ячейка 1		Ячейка 2
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на 3 столбца без разваливания таблицы

Расширим Ячейку1 на 3 столбца, задав ей атрибут colspan в значении 3. При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:

<table>

<tr>

<td colspan="3">Ячейка 1</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 8</td>

<td>Ячейка 9</td>

</tr>

</table>

Так код будет выглядеть в браузере:

Ячейка 1
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Блок 2. Как объединить строки

Кроме атрибута colspan существует также аналогичный атрибут rowspan, который расширяет ячейки по вертикали.

Расширим Ячейку1 на два ряда

Расширим Ячейку1 на два ряда, задав ей атрибут rowspan в значении 2. При этом она вытеснит ячейки из ряда под ней и таблица развалится:

<table>

<tr>

<td rowspan="2">Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 5</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 8</td>

<td>Ячейка 9</td>

</tr>

</table>

Таблица развалилась (Ячейка6 вылезла справа):

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 1	Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на два ряда без разваливания таблицы

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек из второго ряда (и это не обязательно Ячейка4, которая находится непосредственно под нашей Ячейкой1, можно удалять любую, я удалил ячейку с номером 5):

<table>

<tr>

<td rowspan="2">Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 8</td>

<td>Ячейка 9</td>

</tr>

</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 1	Ячейка 4	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на 3 ряда без разваливания таблицы

Теперь расширим нашу ячейку не на два ряда, а на 3, задав ей rowspan в значении 3. При этом удалим одну из ячеек из третьего ряда (ячейку 7, 8 или 9 - без разницы), чтобы таблица не развалилась:

<table>

<tr>

<td rowspan="3">Ячейка 1</td>

<td>Ячейка 2</td>

<td>Ячейка 3</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 9</td>

</tr>

</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

Расширим еще и Ячейку2 на 2 столбца

Расширим еще и Ячейку2 на 2 столбца в дополнение к первой ячейке. Для этого Ячейке2 добавим colspan в значении 2. При этом удалим Ячейку3, чтобы таблица не развалилась:

<table>

<tr>

<td rowspan="3">Ячейка 1</td>

<td colspan="2">Ячейка 2</td>

</tr>

<tr>

<td>Ячейка 4</td>

<td>Ячейка 6</td>

</tr>

<tr>

<td>Ячейка 7</td>

<td>Ячейка 9</td>

</tr>

</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

Задачи для решения

⇐ Предыдущая 1 2 34

Поделиться с друзьями:

Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...

Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...

Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...

Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...