Удобное объединение ячеек html таблиц

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

В этой статье мы не будем объяснять принципы создания html таблиц, для получениях этих знаний пройдите наш курс по HTML.

Для объединения ячеек внутри table существуют два атрибута, задаваемые тэгу <td> это colspan(объединение по горизонтали) и rowspan(объединение по вертикали).

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

Атрибуты colspan и rowspan принимают в качестве параметра целые значения от 0 до 1000. Вот небольшой пример того, как можно объединять ячейки в таблице.

Код:

<table>
<tbody>
		<tr>
			<td colspan="3">&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td rowspan="2">&nbsp;</td>
			<td>&nbsp;</td>
			<td colspan="2" rowspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

На первый взгляд реализована не очень сложная структура, но поглядев на обилие <td> и <tr> элементов в коде сложно понять по какому принципу можно объединить еще пару ячеек.

Мы вам предлагаем универсальный и очень удобный способ объединения ячеек.

Для начала подготовьте заготовку вашей будущей таблицы, представив ее со всеми разделенными ячейками. Это может быть таблица 3х3, 6х10 и так далее. Каждой ячейке дадим свой номер, начиная считать слева направо и сверху вниз.

Разберем создание таблицы, показанной выше по этому методу.

Вот как будет выглядеть код нашей заготовки и сама заготовка:

	<table>
<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
		</tr>
		<tr>
			<td>13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
		</tr>
	</tbody>
</table>

Необходимо объединить ячейки с номерами 1,2,3 по горизонтали. Для этого в коде, ячейке № 1 добавляем атрибут colspan со значением 3. И удаляем <td> элементы с номерами 2 и 3. Номера объединенных ячеек запишем в полученную ячейку.

Так изменится наш код и внешний вид таблицы:

	
<table>
<tbody>
		<tr>
			<td colspan="3">1,2,3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
		</tr>
		<tr>
			<td>13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
		</tr>
	</tbody>
</table>

Теперь нам нужно объединить ячейки 9 и 13 по вертикали. Проделываем аналогичную процедуру - ячейке № 9 задаем атрибут rowspan со значением 2, удаляем ячейку с № 13, в объединенную ячейку записываем номера ячеек из которых она состоит.

Так изменится наш код и внешний вид таблицы:

<table style="width: 941px;">
	<tbody>
		<tr>
			<td colspan="3">1,2,3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td rowspan="2">9,13</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
		</tr>
		<tr>
			<td>14</td>
			<td>15</td>
			<td>16</td>
		</tr>
	</tbody>
</table>

Осталось объединить 11,12,15,16 ячейки в одну. Для этого ячейке с № 11 записываем атрибуты colspan="2"rowspan="2". Ячейки 12,15,16 удаляем из кода. Записываем в объединенную ячейку номера 11,12,13,14.

Так изменится наш код и внешний вид таблицы:

<table style="width: 941px;">
	<tbody>
		<tr>
			<td colspan="3">1,2,3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td rowspan="2">9,13</td>
			<td>10</td>
			<td colspan="2" rowspan="2">11,12,15,16</td>
		</tr>
		<tr>
			<td>14</td>
		</tr>
	</tbody>
</table>

Вот и все, мы получили исходную таблицу, теперь ячейки можно заполнять той информацией, которая вам будет удобно.

Надеемся, вы поняли принцип создания сложных таблиц с объединением ячеек.