HTML таблицы - как создать таблицу в HTML, пример кода
Меню
Справочник

Таблицы HTML

html tables

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

 

Имя Email Веб-сайт
Эдуард example@mail.ru www.example.ru
Александра example@gmail.com www.example.com
Примечание: таблицы 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> и </td>, является содержимым ячейки таблицы.

<table>
  <tr>
    <td>Имя</td>
    <td>Email</td>
    <td>Веб-сайт</td>
  </tr>
</table>
Примечание: ячейка таблицы может содержать все виды HTML-элементов: текст, изображения, списки, ссылки, другие таблицы и т. д.

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

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

tr обозначает строку таблицы.
<table>
  <tr>
    <td>День</td>
    <td>Месяц</td>
    <td>Год</td>
  </tr>
  <tr>
    <td>05</td>
    <td>30</td>
    <td>1975</td>
 </tr>
</table>
День Месяц Год
30 05 2000

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

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

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

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

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

th обозначает заголовок таблицы.

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

<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 таблиц, которые необходимо изучить для создания таблиц.

    Тег Описание
    <table> Определяет таблицу HTML
    <th> Определяет ячейку заголовка в таблице
    <tr> Определяет строку в таблице
    <td> Определяет ячейку в таблице
    <caption> Определяет заголовок таблицы
    <colgroup> Указывает группу из одного или нескольких столбцов в таблице для форматирования
    <col> Задает свойства столбца для каждого столбца в элементе <colgroup>
    <thead> Группирует содержимое заголовка в таблице
    <tbody> Группирует содержимое тела в таблице
    <tfoot> Группирует содержимое нижнего колонтитула в таблице

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


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

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

    Поделиться ссылкой