ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

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 Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

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 Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

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