Учебник HTML. Глава 8: Таблицы

Узнайте, как создавать таблицы в HTML с использованием простых примеров. Разберитесь с основными элементами таблиц: заголовками, строками, столбцами и ячейками. Освойте техники объединения ячеек для сложных макетов.

<< Учебник HTML

Таблица – это элемент веб-страницы, который позволяет организовать данные в строки и столбцы. В HTML для создания таблиц используются специальные теги.

8.1. Вставка таблицы в документ

Для того чтобы вставить таблицу в HTML-документ, используется тег <table>. Внутри этого тега размещаются другие элементы, такие как строки и ячейки.

Пример:

<table>
  <!-- Здесь будут добавлены строки и ячейки -->
</table>

8.2. Заголовок таблицы

Заголовок таблицы создается с помощью тега <caption>, который обычно располагается сразу после открывающего тега <table>.

Пример:

<table>
  <caption>Список студентов</caption>
  <!-- Здесь будут добавлены строки и ячейки -->
</table>

8.3. Строки таблицы

Строки таблицы создаются с помощью тега <tr> (табличная строка). Каждая строка содержит одну или несколько ячеек.

Пример:

<table>
  <tr>
    <!-- Здесь будут добавлены ячейки -->
  </tr>
</table>

8.4. Столбцы таблицы

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

Пример:

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
  </tr>
</table>

8.5. Ячейки таблицы

Ячейки таблицы создаются с помощью тега <td> (ячейка данных) или <th> (заголовочная ячейка), если необходимо выделить заголовочные данные.

Пример кода:

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Марина</td>
    <td>Петрова</td>
    <td>22</td>
  </tr>
</table>

Результат:

Имя	Фамилия	Возраст
Иван	Иванов	20
Марина	Петрова	22

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

Иногда возникает необходимость объединить несколько ячеек в одну. Для этого используются атрибуты colspan (объединение по горизонтали) и rowspan (объединение по вертикали).

Горизонтальное объединение (colspan)

Атрибут colspan указывает, сколько соседних ячеек по горизонтали должны быть объединены в одну.

Пример кода:

<table>
  <tr>
    <th colspan="2">ФИО</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван Иванов</td>
    <td></td>
    <td>20</td>
  </tr>
  <tr>
    <td>Марина Петрова</td>
    <td></td>
    <td>22</td>
  </tr>
</table>

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

Результат:

ФИО		Возраст
Иван Иванов		20
Марина Петрова		22

Вертикальное объединение (rowspan)

Атрибут rowspan указывает, сколько соседних ячеек по вертикали должны быть объединены в одну.

Пример кода:

<table>
  <tr>
    <th rowspan="2">ФИО</th>
    <td>Иван Иванов</td>
  </tr>
  <tr>
    <td>Марина Петрова</td>
  </tr>
  <tr>
    <th>Возраст</th>
    <td>20</td>
    <td>22</td>
  </tr>
</table>

Здесь первая ячейка занимает две строки, а остальные ячейки располагаются под ней.

Результат:

ФИО	Иван Иванов
	Марина Петрова
Возраст	20	22

---