Створення таблиці в HTML

Об’єднання стовпців

Осередки по вертикалі об’єднуються з допомогою атрибута rowspan. Числове значення визначає кількість скорочуваних по вертикалі осередків. Ця тема представляє найбільші труднощі для студентів.

Самим легким для розуміння її є наступний спосіб: створіть таблицю і пронумеруйте осередку різними цифрами. Наприклад таку:

1 2 3 4
5 6 7 8
9 10 11 12

Код таблиці буде наступний:

<table border=”1″ align=”center” width=”30%” height=”20%”>
<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>
</table>

Давайте позбудемося двозначних чисел, об’єднавши стовпці з цифрами 6 і 10, 7 і 11, 8 і 12. Залишимо в об’єднаних по вертикалі клітинках числа: 6, 7 і 8.

Об’єднуємо 6 і 10. У тегу <td>, що містить цифру 6, прописуємо: <td rowspan=”2″>, а конструкцію <td>10</td> видаляємо взагалі. Аналогічно потрібно зробити і для решти пар цифр. У підсумку код зміниться таким чином:

<table border=”1″ align=”center” width=”30%” height=”20%”>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td rowspan=”2″>6</td>
<td rowspan=”2″>7</td>
<td rowspan=”2″>8</td>
</tr>
<tr>
<td>9</td>
</tr>
</table>

Браузер повинен видати потрібну нам таблицю:

Порада: поки ви не досягнете автоматизму дій при об’єднанні стовпців, використовуйте цей спосіб з використанням цифр, замінюючи їх на потрібні дані.