HTML Таблицы

Таблицы HTML позволяют веб-разработчикам располагать данные в виде строк и столбцов.

Пример таблицы HTML:

Компания	Контактное лицо	Страна
Alfreds Futterkiste	Maria Anders	Германия
Centro comercial Moctezuma	Francisco Chang	Мексика
Ernst Handel	Roland Mendel	Австрия
Island Trading	Helen Bennett	Великобритания
Laughing Bacchus Winecellars	Yoshi Tannamuri	Канада
Magazzini Alimentari Riuniti	Giovanni Rovelli	Италия

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

Таблица в HTML состоит из ячеек, расположенных в строках и столбцах.

Пример

Простая таблица HTML:

<table>
  <tr>
    <th>Компания</th>
    <th>Контактное лицо</th>
    <th>Страна</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Германия</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Мексика</td>
  </tr>
</table>

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

Каждая ячейка таблицы определяется тегами <td> и </td>.

<td> обозначает данные ячейки таблицы.
Между этими тегами располагается содержимое ячейки.

Пример:

<table>
  <tr>
    <td>Эмиль</td>
    <td>Тобиас</td>
    <td>Линус</td>
  </tr>
</table>

Примечание: Ячейка таблицы может содержать различные HTML-элементы: текст, изображения, списки, ссылки, другие таблицы и т.д.

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

Каждая строка таблицы начинается с тега <tr> и заканчивается тегом </tr>.

<tr> обозначает строку таблицы.

Пример

<table>
  <tr>
    <td>Эмиль</td>
    <td>Тобиас</td>
    <td>Линус</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Количество строк в таблице может быть неограниченно большим, главное, чтобы количество ячеек оставалось одинаковым в каждой строке.

Примечание: Существуют случаи, когда строка может содержать разное количество ячеек. Эту особенность мы изучим позднее.

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

Иногда нужно сделать ячейку заголовком таблицы. В таких случаях используйте тег <th> вместо <td>.

<th> обозначает заголовочную ячейку таблицы.

Пример

Пусть первая строка содержит заголовки столбцов:

<table>
  <tr>
    <th>Человек 1</th>
    <th>Человек 2</th>
    <th>Человек 3</th>
  </tr>
  <tr>
    <td>Эмиль</td>
    <td>Тобиас</td>
    <td>Линус</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

По умолчанию текст в элементах <th> жирный и выровнен по центру, но это поведение можно изменять с помощью CSS.