HTML-тег `<table>`

Тег <table> определяет HTML-таблицу. Он содержит другие HTML-элементы, которые определяют структуру таблицы.

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

Тег <th> размещается в первой строке таблицы. Текст в нём по умолчанию жирный и выровнен по центру.

TIP

Тег <th> не является обязательным элементом таблицы, но мы рекомендуем его использовать, так как это улучшает структуру таблицы, а также помогает поисковым системам лучше индексировать её содержимое.

Более сложная таблица также может включать элементы <caption>, <thead>, <tbody>, <tfoot> или <colgroup>.

DANGER

Не рекомендуется использовать таблицы для вёрстки страниц. Иногда таблицы в HTML ошибочно используются для управления макетом страницы. Для этого вместо HTML-таблиц лучше использовать CSS.

Синтаксис

Тег <table> является парным. Содержимое записывается между открывающим (<table>) и закрывающим (</table>) тегами.

Пример использования HTML-тега `<table>`:

HTML-тег <table>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>June</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>July</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Результат

пример таблицы

Атрибуты

DANGER

Атрибуты тега <table> не поддерживаются в HTML5. Для стилизации таблиц используйте свойства CSS, перечисленные ниже.

Атрибут	Значение	Описание	Свойство CSS
align	left center right	Определяет выравнивание таблицы относительно окружающего текста. Не поддерживается в HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Определяет цвет фона таблицы. Не поддерживается в HTML5.	background-color
border	1 0	Определяет размер рамки вокруг таблицы. Не поддерживается в HTML5.	border
cellpadding	pixels	Определяет отступ между границей ячейки и её содержимым. Не поддерживается в HTML5.	padding
cellspacing	pixels	Определяет отступ между ячейками. Не поддерживается в HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Определяет, какие стороны рамки вокруг таблицы должны отображаться. Не поддерживается в HTML5.	border-style border-width
rules	none groups rows cols all	Определяет, какие части внутренних границ должны быть видны. Не поддерживается в HTML5.	border (Используйте это свойство в сочетании с тегами thead, tbody, tfoot, col или colgroup).
width	pixels	Определяет ширину таблицы. Не поддерживается в HTML5.	width

Тег <table> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Каково назначение тегов <table>, <tr>, <td> и <th> в HTML?

Тег <table> используется для создания таблицы.Тег <tr> используется для создания строки в таблице.Тег <td> используется для создания ячейки в таблице.Тег <th> используется для создания ячейки-заголовка в таблице.Тег <th> используется для создания сноски в таблице.Тег <td> используется для вставки изображений в таблицу.

HTML-тег <table> ​

Синтаксис ​

Пример использования HTML-тега <table>: ​

Результат ​