Создание таблицы в HTML

Назначение таблиц

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

Создание таблицы

Рассмотрим, как создать таблицу в HTML. Это делается с помощью тэга <table>. Таблицы состоят из строк, внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг <tr> добавляет в таблицу строку, а тэг <td> добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу:

Вот код такой таблицы:

<table border="1">
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
  </tr>
</table>

Для того, чтобы были видны рамки таблицы, тэгу <table> был задан атрибут border. Но в HTML5 этот атрибут считается устаревшим, и использование его не желательно. Кроме того, есть и другие атрибуты для работы с рамками, фоном и выравниванием контента. Все эти атрибуты также нежелательны, вместо них нужно использовать стили.

Объединение ячеек таблицы

Есть возможность объединить несколько ячеек в одну. Для этого у тэга <td> есть атрибуты, которые меняют структуру таблицы. Атрибут colspan объединяет ячейки внутри одной строки. А атрибут rowspan, объединяет ячейки из разных строк. Значением этих атрибутов является количество объединяемых ячеек.

Создадим такую таблицу:

Код такой таблицы выглядит так:

<table border="1">
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td colspan="2">Объединённая ячейка</td>
</tr></table>

Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек. Поэтому общее количество ячеек в этой строке будет меньше, чем в других, в данном случае, одна.

Теперь создадим такую таблицу:

Код у этой таблицы такой:

<table border="1">
  <tr>
    <td>строка 1 ячейка 1</td>
    <td rowspan="2">Объединённая ячейка</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
</tr></table>

Дополнительные табличные тэги

Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.

<th> - заголовочная ячейка. Обычно находятся в первой строке таблицы. Используются для создания названия колонки таблицы. От тэга <td> отличается только жирным шрифтом и выравниванием по центру.

<caption> - находится внутри тэга <table>, добавляет заголовок таблицы.

<thead> - cодержит несколько первых строк таблицы для указания особого стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с самой первой строки.

<tbody> - содержит несколько строк таблицы для указания особого стиля. Таких тегов в таблице может быть несколько.

<tfoot> - содержит строки таблицы, которые отобразятся в самом низу таблицы.

<col> - определяет стиль для одной колонки таблицы, начиная с первой. То есть первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает по-разному в разных браузерах.