HTML5 таблицы: руководство для начинающих

Теги для создания таблиц

Для работы с HTML таблицами используется тег <table>. Внутри него можно разместить элементы, формирующие структуру таблицы: шапку (<thead>), основную часть (<tbody>) и подвал (<tfoot>). Использование этих тегов не обязательно, но рекомендуется для лучшей организации кода. Для описания каждого ряда используется тег <tr> (table row). Его можно использовать внутри <thead>, <tbody> и <tfoot>. При отсутствии этих тегов, теги <tr> вкладываются непосредственно в <table>.

Создание столбцов и ячеек

Внутри каждого ряда (<tr>) создаются столбцы (ячейки). Для ячеек заголовка (в <thead>) используется тег <th> (table header), а для обычных ячеек (в <tbody> и <tfoot>) — тег <td> (table data). Тег <th> по умолчанию отображает текст жирным шрифтом.

Пример:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Джон</td>
      <td>Дейл</td>
    </tr>
    <tr>
      <td>Джон 2</td>
      <td>Дейл 2</td>
    </tr>
    <tr>
      <td>Джон 3</td>
      <td>Дейл 3</td>
    </tr>
    <tr>
      <td>Джон 4</td>
      <td>Дейл 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Last</td>
      <td>One</td>
    </tr>
  </tfoot>
</table>

Атрибуты таблиц

К таблице можно добавлять атрибуты. Атрибут border задаёт толщину рамки в пикселях:

<table border="1"></table>

Атрибут width задаёт ширину таблицы:

<table width="500"></table>

Атрибут align позволяет центрировать содержимое ячеек (рекомендуется использовать CSS для стилизации). Пример использования align внутри <th>:

<th align="center">Имя</th>

Рекомендуется использовать CSS для стилизации таблиц, а не атрибуты HTML.

Создание таблиц в HTML просто. Создаётся тег <table>, внутри которого размещаются <thead>, <tbody>, <tfoot> (по желанию), затем ряды (<tr>) и ячейки (<th> и <td>). Можно создавать таблицы любой сложности, добавляя необходимое количество рядов и столбцов. Для стилизации рекомендуется использовать CSS.