Объединение ячеек.

Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну.

На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть".

Эту задачу решают атрибуты colspan и rowspan

· colspan - определяет какое количество столбцов будет занимать данная ячейка

· rowspan - количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<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>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>

Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.

Исправленный пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<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>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>

Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>

Всё просто.. главное быть внимательным!








Дата добавления: 2015-04-19; просмотров: 908;


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

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

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

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