HTML таблицы

В этой главе:

  • Синтаксис

  • Рамка таблицы

  • Заголовок

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

  • Вложенные элементы внутри таблицы

  • Теги таблицы

Таблица - набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.

Синтаксис

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

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

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

Примечание: количество столбцов в вашей таблице будет равно количеству ячеек с данными в каждой строке.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
 
    <table border="1">
      <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
      <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
      <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
    </table>
 
  </body>
</html>

Рамка таблицы

Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы. По умолчанию браузеры не отображают рамку вокруг таблицы и ячеек, но присутствие атрибута border, указывает браузеру, что у таблицы должна быть рамка.

По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек ""). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
  <body>
 
    <h4>Таблица с нормальной рамкой:</h4>
    <table border="1">
      <tr><td>Первая</td><td>строка</td></tr>
      <tr><td>Вторая</td><td>строка</td></tr>
    </table>
    <h4>Таблица без рамки:</h4>
    <table>
      <tr><td>Первая</td><td>строка</td></tr>
      <tr><td>Вторая</td><td>строка</td></tr>
    </table>
 
  </body>
</html>

Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т.е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем свойство "border-collapse: collapse;", это придаст обычный вид рамке для таблицы.

1
2
3
4
5
6
7
8
9
10
<html>
  <body>
 
    <table border="1" style="border-collapse: collapse;">
      <tr><td>ячейка 1</td><td>ячейка 2</td></tr>
      <tr><td>ячейка 3</td><td>ячейка 4</td></tr>
    </table>
 
  </body>
</html>

Заголовок

У всех таблиц обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами строк.

Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
 
    <table border="1">
      <caption>Моя первая таблица</caption>
      <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
      <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
    </table>
 
  </body>
</html>

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

Смежные ячейки в таблице могут объединяться с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов.

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

Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
  <body>
 
    <h4>Объединим две ячейки в строке таблицы:</h4>
    <table border="1">
      <tr>
        <th>Имя</th><th colspan="2">Телефон</th>
      </tr>
      <tr>
        <td>Петя Иванов</td><td>123 45 67</td><td>234 56 78</td>
      </tr>
    </table>
      
    <h4>Объединим две ячейки в столбце таблицы:</h4>
    <table border="1">
      <tr>
        <th>Имя</th><td>Петя Иванов</td>
      </tr>
      <tr>
        <th rowspan="2">Телефон</th><td>123 45 67</td>
      </tr>
      <tr><td>234 56 78</td></tr>
    </table>
 
  </body>
</html>

Вложенные элементы внутри таблицы

Как мы уже писали раньше, ячейки таблицы могут включать в себя любые HTML-элементы, даже элемент <table>, то есть существует возможность создания вложенных таблиц.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <body>
 
    <table border="1">
      <tr>
        <td><p>Абзац.</p><p>Другой абзац.</p></td>
        <td>В этой ячейке разместим таблицу:
          <table border="1">
            <tr><td>А</td><td>Б</td></tr>
            <tr><td>В</td><td>Г</td></tr>
          </table>
        </td>
      </tr>
      <tr>
          <td><a href="httр://www.puzzleweb.ru"> Ссылка </a></td><td>ПРИВЕТ!</td>
      </tr>
    </table>
 
  </body>
</html>

Теги таблицы

Тег

Описание

<table>

Создает таблицу.

<th>

Создает заголовочную ячейку в таблице.

<tr>

Создает строку в таблице.

<td>

Создает ячейку таблицы.

<caption>

Определяет заголовок для таблицы.

<colgroup>

Определяет одну или несколько колонок в таблице для форматирования.

<col>

Используется в таблице, определяет свойства для каждой колонки внутри элемента colgroup.

<thead>

Группирует заголовочные ячейки таблицы.

<tbody>

Группирует основное содержимое в таблице.

<tfoot>

Определяет нижнюю часть таблицы.

Подробнее о табличных элементах вы можете узнать заглянув в наш справочник по HTML .