w3docs logo

HTML Таблицы

Для создания таблиц в HTML используется элемент <table>. Он служит контейнером для элементов, которые определяют содержимое таблицы.

Строки в таблице задаются парным блочным тегом <tr> (сокр. от англ. “table row” - строка таблицы). Каждая строка в таблице записывается в отдельный тег <tr>.

В тег <tr> записываются ячейки таблицы, которые добавляются при помощи тега <td> (сокр. от англ. “table data” - данные таблицы). Каждая ячейка записывается в отдельный тег <td>. В ячейках записывается содержимое таблицы (числа, текст и т.д.).

Заголовок строки или столбца таблицы задается при помощи тега <th> (сокр. от англ. “table head” - строка таблицы). Тег <th> размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.

Синтаксис

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

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

Пример

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
</head>
<body>
  <table> 
    <tr>
      <th>Месяц</th>
      <th>Дата</th>
    </tr>
    <tr>
      <td>Январь</td>
      <td>10.01.2018</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>10.01.2018</td>
    </tr>
  </table>
</body>
</html>

Результат

Месяц Дата
Январь 10.01.2018
Февраль 10.01.2018

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

Как видно из примера, браузер по умолчанию не отображает рамки таблицы. Добавить их можно двумя способами, используя атрибут border, либо при помощи CSS стилей. Рассмотрим подробно оба варианта.

Атрибут span class="attribute">border устанавливает рамку вокруг таблицы, а также границы между ячеек. Если значение атрибута не указано, то браузер отображает рамку толщиной в один пиксель. По умолчанию рамка изображается двойной.

Выглядит это так: 

<table border="1">
<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
</head>
<body>
  <table border="1"> 
    <tr>
      <th>Месяц</th>
      <th>Дата</th>
    </tr>
    <tr>
      <td>Январь</td>
      <td>10.01.2014</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>10.01.2014</td>
    </tr>
  </table>
</body>
</html>

Результат

Месяц Дата
Январь 10.01.2014
Февраль 10.01.2014

Установить границы таблицы можно также при помощи CSS свойства border, которое задаёт толщину и стиль рамки.

Пример

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
    <style>
        table,th,td{border:1px solid #cccccc}
    </style>
</head>
<body>
  <table> 
    <tr>
      <th>Месяц</th>
      <th>Дата</th>
    </tr>
    <tr>
      <td>Январь</td>
      <td>10.01.2018</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>10.01.2018</td>
    </tr>
  </table>
</body>
</html>

Результат

Месяц Дата
January 10.01.2018
Февраль 10.01.2018

Группировка элементов таблицы

Содержимое таблицы можно группировать в логические блоки. Для этого в HTML предусмотрены следующие теги:

  • Тег <thead> - (сокр. от англ. “table head” - "голова" таблицы) группирует одну или несколько верхних строк в таблице, то есть создает “шапку” таблицы.
  • Тег <tbody> - (сокр. от англ. “table body” - "тело" таблицы) группирует центральные строки в таблице с основным содержанием. (В одной таблице допускается использование нескольких таких блоков).
  • Тег <tfoot> - (сокр. от англ. “table footer” - нижний колонтитул таблицы) группирует нижние строки, формируя "подвал" таблицы. (В одной таблице можно использовать только один тег <tfoot>).
В коде тег <tfoot> ставится до тега <tbody>. Делается это потому, что браузеру необходимо отобразить нижнюю часть таблицы до того, как он получит все (потенциально многочисленные) данные, которые могут содержаться в теге <tbody>.

Пример

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
    <style>
        table,th,td{border:1px solid #cccccc}
    </style>
</head>
<body>
   <table>
     <thead>
       <tr>
         <th>Месяц</th>
         <th>Дата</th>
       </tr>
      </thead>
     <tfoot>
       <tr>
        <td>Общая сумма</td>
        <td>200$</td>
       </tr>
     </tfoot>
   </table>
     <tbody>
       <tr>
        <td>Июнь</td>
        <td>150$</td>
       </tr>
        <tr>
        <td>Июль</td>
        <td>50$</td>
       </tr>
     </tbody>
     
</body>
</html>

Результат

Месяц Дата
Общая сумма 200$
Июнь 150$ Июль 50$

Объединение ячеек

Для объединения ячеек в таблице используются атрибуты colspan и rowspan. Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали, а rowspan - по вертикали.

Пример объединения ячеек по горизонтали

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
    <style>
        table,th,td{border:1px solid #cccccc}
    </style>
</head>
<body>
  <table> 
    <tr>
      <th colspan="2">Месяц и Дата</th>
    </tr>
    <tr>
      <td>Январь</td>
      <td>10.01.2018</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>10.01.2018</td>
    </tr>
  </table>
</body>
</html>

Результат

Месяц и Дата
Январь 10.01.2018
February 10.01.2018

Пример объединения ячеек по вертикали

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
    <style>
        table,th,td{border:1px solid #cccccc}
   </style>
</head>
<body>
  <table > 
    <tr>
      <th>Месяц</th>
      <th>Дата</th>
    </tr>
    <tr>
      <td>Январь</td>
      <td rowspan="2">10.01.2018</td>
    </tr>
    <tr>
      <td>Февраль</td>
    </tr>
  </table>
</body>
</html>

Результат

Месяц Дата
Январь 10.01.2018
Февраль

Практикуйте свои знания

Какие элементы используются для создания таблиц в HTML?
Считаете ли это полезным?