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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c 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 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

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

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

HTML Таблицы



Пример таблицы HTML

Компания Контакты Страна
Alfreds Futterkiste Мария Андерс Германия
Centro comercial Moctezuma Франсиско Чанг Мексика
Ernst Handel Роланд Мендель Австрия
Island Trading Хелен Беннетт Великобритания
Laughing Bacchus Winecellars Йоши Таннфмури Канада
Magazzini Alimentari Riuniti Иоанн Ровелли Италия
Редактор кода »

Определение HTML-таблицы

Таблица HTML определяется тегом<table>.

Каждая строка таблицы определяется тегом <tr>. Заголовок таблицы определяется тегом <th>. Заголовок таблицы по умолчанию, выделяется жирным и устанавливается по центру. Таблица данных/ячейки определяется тегом <td>.

Пример

<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 - Добавление Границы Интервала

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

Установить границы интервалов для таблицы в 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>

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

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 тегов

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