Таблицы в HTML

Пример HTML-таблицы

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Посмотреть пример

Определение HTML-таблицы

Таблица определяется с помощью тега <table>. Каждая строка таблицы определяется с помощью HTML tr. Заголовок таблицы определяется с помощью тега <th>. По умолчанию заголовки выделяются жирным шрифтом и выравниваются по центру. Ячейка таблица определяется с помощью тега <td>.

Пример:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Посмотреть пример

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

HTML таблица — добавление рамки

Рамка задается с помощью свойства CSS border:

Пример:

table, th, td {
    border: 1px solid black;
}

Посмотреть пример

Не забудьте задать рамку и для самой таблицы, и для ячеек.

HTML-таблица — объединение рамок

Если хотите объединить рамки всех HTML table tr в одну, используйте свойство CSS border-collapse:

Пример:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Посмотреть пример

Добавление полей ячейки

Поля ячейки задают пространство между содержимым ячейки и ее рамкой. Чтобы установить поля, используйте свойство padding:

Пример:

th, td {
    padding: 15px;
}

Посмотреть пример

Выравнивание заголовка по левому краю

По умолчанию заголовки таблицы выделены жирным шрифтом и выровнены по центру. Для выравнивания заголовка таблицы по левому краю используйте свойство CSS text-align:

Пример:

th {
    text-align: left;
}

Посмотреть пример

Добавление интервалов между рамками

Интервалы между рамками определяют расстояние между ячейками. Чтобы установить интервал между рамками, используйте свойство border-spacing:

Пример:

table {
    border-spacing: 5px;
}

Посмотреть пример

Примечание: Если в таблице объединены рамки, border-spacing не окажет никакого влияния.

Ячейки, охватывающие несколько столбцов

Чтобы растянуть ячейку HTML table tr td на несколько столбцов, используйте атрибут colspan:

Пример:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Посмотреть пример

Ячейки, охватывающие несколько строк

Чтобы растянуть ячейку на несколько строк, используйте атрибут rowspan:

Пример:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Посмотреть пример

Добавление подписей

Чтобы добавить в таблицу подписи, используйте тег <caption>:

Пример:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Посмотреть пример

Примечание: <caption> должен размещаться сразу после тега <table> и перед тегом tr в HTML.

Специальные стили для конкретной таблицы

Чтобы определить стили для конкретной таблицы, добавьте для таблицы атрибут id:

Пример:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Теперь можно определить отдельные стили для этой таблицы и ее HTML tr border:

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

Посмотреть пример

И добавить другие стили:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Посмотреть пример

Подводя итоги

  • Используйте HTML-элемент <table>, чтобы определить таблицу;
  • Используйте HTML tr, чтобы определить строку таблицы;
  • Используйте HTML-элемент <td>, чтобы определить данные таблицы;
  • Используйте HTML-элемент <th>, чтобы создать заголовок;
  • Используйте HTML-элемент <caption>, чтобы создать подпись;
  • Используйте свойство CSS border, чтобы определить рамку таблицы;
  • Используйте свойство border-collapse, чтобы объединить рамки ячеек таблицы;
  • Используйте свойство padding, чтобы добавить поля ячеек;
  • Используйте свойство text-align, чтобы выровнять текст ячейки;
  • Используйте свойство CSS border-spacing, чтобы установить интервал между ячейками;
  • Используйте атрибут colspan, чтобы растянуть ячейку на несколько столбцов;
  • Используйте атрибут rowspan, чтобы растянуть ячейку на несколько строк.

HTML-теги таблицы

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

Перевод статьи «HTML Tables» был подготовлен дружной командой проекта Сайтостроение от А до Я.