W3docs
ru
Войти

HTML-таблицы

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

В HTML таблицы создаются с помощью тега <table> в сочетании с тегами <tr>, <td> и <th>.

HTML-таблицы позволяют отображать данные (например, изображения, текст, ссылки) в столбцах и строках ячеек. Строки таблицы можно группировать в разделы заголовка, подвала и тела с помощью элементов <thead>, <tfoot> и <tbody> соответственно.

В HTML5 элемент <tfoot> можно размещать как до, так и после тега <tbody>. Оба элемента должны следовать после любых элементов <caption>, <colgroup> и <thead>.

Большинство атрибутов элемента <table> не используются в HTML5. Чтобы оформить внешний вид таблицы, используйте CSS.

Таблицы данных и таблицы макета. Используйте таблицы только для табличных данных — то есть информации, в которой между строками и столбцами существует смысловая связь. Не применяйте таблицы для вёрстки страницы (расположения боковой панели, навигации и т. д.). Таблицы-макеты затрудняют работу скринридеров и усложняют адаптивный дизайн. Для макета страницы используйте CSS Flexbox или Grid.

Синтаксис

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

Пример тега HTML <table>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

MonthDate
January10.01.2014
February10.01.2014

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

Группировка строк с помощью <thead>, <tbody> и <tfoot>

Для больших таблиц строки можно объединить в раздел заголовка, раздел тела и раздел подвала с помощью элементов <thead>, <tbody> и <tfoot>. Это делает разметку более читаемой, позволяет независимо стилизовать каждый раздел с помощью CSS и помогает браузерам повторять заголовок и подвал при печати длинной таблицы на нескольких страницах.

Пример группировки строк таблицы:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Доступность: заголовки и подписи

Таблицы бывает сложно воспринимать пользователям скринридеров, поскольку отдельная ячейка («$80») лишена смысла без информации о том, к какой строке и столбцу она принадлежит. Несколько простых приёмов сделают таблицы понятными для всех.

Отмечайте ячейки-заголовки тегом <th>. Ячейка <th> объявляется как заголовок, и скринридеры используют её для подписи ячеек с данными, расположенных ниже или рядом. Использование <td> для заголовков — или имитация заголовков полужирным текстом внутри <td> — разрушает эту связь.

Добавляйте атрибут scope. Атрибут scope сообщает вспомогательным технологиям, к чему относится заголовок — к своему столбцу или к своей строке. Используйте scope="col" для заголовков столбцов и scope="row" для заголовков строк. Это особенно важно, когда таблица имеет заголовки и в верхней части, и слева.

Пример заголовков с атрибутом scope:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Monthly savings</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Savings</th>
      </tr>
      <tr>
        <th scope="row">January</th>
        <td>$100</td>
      </tr>
      <tr>
        <th scope="row">February</th>
        <td>$80</td>
      </tr>
    </table>
  </body>
</html>

Задайте таблице элемент <caption>. Элемент <caption> — это заголовок всей таблицы. Он является первым дочерним элементом <table> и объявляется скринридером до содержимого таблицы, чтобы пользователь понимал, о чём таблица, прежде чем переходить к её навигации. По умолчанию он отображается над таблицей; переместить его можно с помощью свойства CSS caption-side.

Пример таблицы с элементом <caption>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
      caption {
        font-weight: bold;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Delivery schedule</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.02.2014</td>
      </tr>
    </table>
  </body>
</html>

Объединение нескольких строк и столбцов

Ячейку можно растянуть на несколько строк или столбцов. Обычно ячейка не может занять пространство выше, ниже или рядом с другой ячейкой, однако атрибуты colspan и rowspan позволяют одной ячейке занять область нескольких ячеек.

Чтобы один заголовок охватывал два или более столбца, используйте атрибут colspan на ячейке с указанием числа охватываемых столбцов.

Пример тега HTML <table> с атрибутом colspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

Month and Date
January10.01.2014
February10.01.2014

Здесь единственный заголовок <th colspan="2"> располагается над обоими столбцами — Month и Date.

То же самое можно сделать со строками, используя атрибут rowspan. Ячейка с rowspan="2" распространяется на строку ниже, поэтому следующей строке требуется на одну ячейку меньше. Это удобно, когда одно значение относится к нескольким последовательным строкам.

Пример тега HTML <table> с атрибутом rowspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td rowspan="2">10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

MonthDate
January10.01.2014
February(shares the cell above)

В этом примере ячейка 10.01.2014 использует rowspan="2", поэтому она охватывает строки January и February, а строке February нужна лишь ячейка Month.

Связанные теги

  • <table> — контейнер таблицы
  • <tr> — строка таблицы
  • <th> — ячейка-заголовок
  • <td> — ячейка с данными
  • <caption> — заголовок таблицы
  • <colgroup> — группировка столбцов для стилизации

Практика

Практика
Какой атрибут ячейки-заголовка сообщает скринридерам, что заголовок относится к своему столбцу?
Какой атрибут ячейки-заголовка сообщает скринридерам, что заголовок относится к своему столбцу?
Практика
Где должен располагаться элемент caption внутри таблицы?
Где должен располагаться элемент caption внутри таблицы?
Was this page helpful?