САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

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 Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML SSE

HTML Примеры

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

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка HTML Коды Языка HTTP Сообщения HTTP Методы PX в EM Конвертер Клавишные Комбинации

HTML Таблицы



HTML таблицы позволяют веб-разработчикам упорядочивать данные в строки и столбцы


Пример

Компания Контакты Страна
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>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
 </tr>
 <tr>
    <td>Джилл</td>
    <td>Смит</td>
    <td>50</td>
 </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>
Попробуйте сами »

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



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

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

Пример

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

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


HTML Таблица - Крах ганиц

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

Пример

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

HTML Таблица - Добавить заполнение ячеек

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

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

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

Пример

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

HTML Таблица - Выравнивание заголовков по левому краю

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

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

Пример

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

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

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

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

Пример

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

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


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

Чтобы сделать ячейку охватывающей более одного столбца, используйте атрибут colspan:

Пример

<table style="width:100%">
  <tr>
    <th>Имя</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Билл Гейтс</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
Попробуйте сами »

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

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

Пример

<table style="width:100%">
  <tr>
    <th>Имя:</th>
    <td>Билл Гейтс</td>
  </tr>
  <tr>
    <th rowspan="2">Телефон:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
Попробуйте сами »

HTML Таблица - Добавить подпись

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

Пример

<table style="width:100%">
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$50</td>
  </tr>
</table>
Попробуйте сами »

Примечание: Тег <caption> должен быть вставлен сразу же после тега <table>.


Особый стиль для одного стола

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

Пример

<table id="t01">
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
  </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</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 Упражнения

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

Упражнение:

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

Два заголовка таблицы должны иметь значения "Имя" и "Возраст".

<table>
  
    
    
  
  <tr>
    <td>Щипунов Андрей</td>
    <td>50</td>
  </tr>
</table>

Начните упражнение


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

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

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