САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

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 Справочник тегов.