Одновременно вертикальное и горизонтальное объединения

Естественно ячейки HTML-таблиц можно объединять по вертикали и горизонтали одновременно, но здесь есть одно очень важное правило — объединять можно только равноценные ячейки. Например, если у вас есть ячейка состоящая из двух горизонтальных, то по вертикали ее можно объединить только точно с такой же.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Объединение по вертикали и горизонтали</title>

</head>

<body>

 

<table border="2">

<tr><td colspan="2" rowspan="2">Ячейки 1.1, 1.2 и 2.1, 2.2</td><td>Ячейка 1.3</td></tr>

<tr><td>Ячейка 2.3</td></tr>

<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>

</table>

 

</body>

</html>

 

Результат в браузере

 

 

Вложенные таблицы

Как вы уже могли убедиться, используя объединение ячеек, можно создать HTML-таблицу любой конфигурации, но это довольно запутанное занятие. Поэтому часто бывает удобней при помощи объединения ячеек наметить только основной каркас таблицы, а для более мелких деталей просто вложить в нужную ячейку еще одну таблицу.

Пример создания вложенных таблиц в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Вложенные таблицы в HTML</title>

</head>

<body>

<table border="3">

<tr>

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

<td colspan="3">Ячейки 1.2 - 1.4</td>

</tr>

 

<tr>

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

<td colspan="2" rowspan="2">Ячейки 2.2, 2.3 и 3.2, 3.3</td>

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

</tr>

 

<tr>

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

<td>

<table border="2">

<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>

<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>

</table>

</td>

</tr>

 

<tr>

<td colspan="4">Ячейки 4.1 - 4.4</td>

</tr>

</table>

</body>

</html>

Результат в браузере

 

 








Дата добавления: 2015-12-11; просмотров: 1907;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

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

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.006 сек.