ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

HTML Таблицы

❮ Prev Next ❯

Таблицы 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 таблицы определяются с помощью тега <table>.

Каждая строка таблицы определяется с помощью тега <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 Таблица - Добавление границы - border

Если вы не укажете границу для таблицы, она будет отображаться без границ.

Граница устанавливается с помощью CSS свойства border:

Пример

table, th, td {
  border: 1px solid black;
}
Попробуйте сами »

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.

HTML Таблица - Свернутые границы - border-collapse

Если вы хотите, чтобы границы сворачивались в одну, добавьте CSS свойство border-collapse:

Пример

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
Попробуйте сами »

HTML Таблица - Добавление отступа в ячейках - padding

Отступ (padding) в ячейке определяет пространство между содержимым ячейки и ее границами.

Если вы не укажете отступ (padding), ячейки таблицы будут отображаться без отступа.

Чтобы установить отступ, используйте CSS свойство padding:

Пример

th, td {
  padding: 15px;
}
Попробуйте сами »

HTML Таблица - Заголовки по левому краю - text-align

По умолчанию заголовки таблицы выделены жирным шрифтом и выравнены по центру.

Чтобы выровнять заголовки таблицы по левому краю, используйте CSS свойство text-align:

Пример

th {
  text-align: left;
}
Попробуйте сами »

HTML Таблица - Добавление интервала границы - border-spacing

Интервал границы (border spacing) определяет пространство между ячейками.

Чтобы установить интервал границ для таблицы, используйте CSS свойство border-spacing:

Пример

table {
  border-spacing: 5px;
}
Попробуйте сами »

Примечание: Если таблица имеет свернутые границы (т.е. значение border-collapse), то border-spacing не действует.

HTML Таблица - Ячейки, которые охватывают много столбцов - colspan

Чтобы размер ячейки охватывал более, чем один столбец, используйте атрибут 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>
Попробуйте сами »

HTML Таблица - Ячейки, которые охватывают много строк - rowspan

Чтобы размер ячейки охватывал более, чем одну строку, используйте атрибут 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>
Попробуйте сами »

HTML Таблица - Добавление подписи - caption

Чтобы добавить подпись к таблице, используйте тег <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>.

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

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

Пример

<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>

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

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 для определения границы
  • Используйте CSS свойство border-collapse для свёртывания границ таблицы
  • Используйте CSS свойство padding для добавления отступов в ячейках
  • Используйте CSS свойство text-align для выравнивания текста в ячейках
  • Используйте CSS свойство border-spacing для установки интервала между ячейками
  • Используйте атрибут colspan, чтобы ячейка занимала много столбцов
  • Используйте атрибут rowspan, чтобы ячейка занимала много строк
  • Используйте атрибут id для указания одной определённой таблицы

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавить строку таблицы с двумя заголовками таблицы.

Заголовки двух таблиц должны иметь значения "Name" (имя) и "Age" (возраст).

<table>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

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

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

Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Для чего нужны HTML-таблицы?
  • Какой тег определяет HTML-таблицу?
  • Каким тегом определяется каждая строка HTML-таблицы?
  • Каким тегом определяется каждый заголовок HTML-таблицы?
  • Каким тегом определяется каждая ячейка с данными HTML-таблицы?
  • Какие элементы могут содержать ячейки с данными HTML-таблицы?
  • С помощью какого CSS-свойства можно добавить границу к HTML-таблице?
  • С помощью какого CSS-свойства можно свернуть границы HTML-таблицы в одну линию?
  • Как добавить внутренний отступ в ячейках HTML-таблицы?
  • Как выровнять заголовки HTML-таблицы по левому краю?
  • Как добавить интервал между границами HTML-таблицы?
  • Как сделать ячейку, которая охватывает более одного столбца HTML-таблицы?
  • Как сделать ячейку, которая охватывает более одной строки HTML-таблицы?
  • Как добавить подпись к HTML-таблице?
  • Где нужно вставить тег <caption> HTML-таблицы?
  • Как определить специальный стиль для одной конкретной HTML-таблицы?
❮ Prev Next ❯