HTML Таблицы

❮ Prev Next ❯

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

По умолчанию текст в элементах <th> выделен жирным шрифтом и центрирован.

По умолчанию текст в элементах <td> есть обычным и выровнен по левому краю.

Пример

Простая HTML таблица:

<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

Внутренний отступ ячейки определяет пространство между содержимым ячеек и её границами.

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

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

Пример

th, td {
padding: 15px;
}

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

HTML Таблица. Как выравнять заголовки по левому краю - text-align

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

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

Пример

th {
text-align: left;
}

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

HTML Таблица. Как добавить интервал между границами - spacing

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

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

Пример

table {
border-spacing: 5px;
}

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

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

HTML Таблица - Ячейка, которая охватывает несколько столбцов

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

Пример

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

Пример

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

Пример

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

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

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

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

И добавить больше стилей:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#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>	Группирует содержимое нижнего колонтитула в таблице

Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.