Таблицы HTML

Таблицы HTML — это больше, чем просто инструменты отображения данных. Они структурируют данные таким образом, чтобы улучшить взаимодействие с пользователем и добавить глубины вашим веб-страницам. Чтобы помочь вам понять это, давайте воспользуемся аналогией: представьте таблицу HTML как электронную таблицу. Это сетка, которая организует данные в строки и столбцы, что делает их понятными и удобными для навигации.

Это подробное руководство поможет вам погрузиться в мир HTML-таблиц и поможет вам создать любую таблицу, от самой простой до самой сложной, а также понять их анатомию и изучить их варианты разнообразных применений. Независимо от того, являетесь ли вы опытным разработчиком или новичком, здесь есть что-то для вас!

HTML таблицы на экране смартфона

Определение HTML таблицы

Таблица в HTML состоит из её ячеек внутри строк и столбцов.

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

<table>
  <tr>
    <th>Имя</th>
    <th>Email</th>
    <th>Веб-сайт</th>
  </tr>
  <tr>
    <td>Эдуард</td>
    <td>example@mail.ru</td>
    <td>www.example.ru</td>
  </tr>
  <tr>
    <td>Александра</td>
    <td>example@mail.com</td>
    <td>www.example.com</td>
  </tr>
</table>

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

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

Всё, что находится между <td> и </td>, является содержимым ячейки таблицы.

<table>
  <tr>
    <td>Имя</td>
    <td>Email</td>
    <td>Веб-сайт</td>
  </tr>
</table>

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

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

<table>
  <tr>
    <td>День</td>
    <td>Месяц</td>
    <td>Год</td>
  </tr>
  <tr>
    <td>05</td>
    <td>30</td>
    <td>1975</td>
 </tr>
</table>

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

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

Таблицы также могут иметь заголовки.

И скорее всего, вы захотите, чтобы ячейки вашей таблицы были ячейками заголовка таблицы. В этих случаях используйте тег <th> вместо тега <td>:

В этом примере первая строка будет ячейками заголовка таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Email</th>
    <th>Веб-сайт</th>
  </tr>
  <tr>
    <td>Эдуард</td>
    <td>example@mail.ru</td>
    <td>www.example.ru</td>
  </tr>
  <tr>
    <td>Александра</td>
    <td>example@mail.com</td>
    <td>www.example.com</td>
  </tr>
</table>

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

HTML таблицы, подразделы

Справочник по тегам HTML

Эта таблица содержит теги HTML таблиц, которые необходимо изучить для создания таблиц.

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

☛ Границы таблиц HTML

Заголовок HTML страниц ☚