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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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> Определяет группы, содержание, подвал в таблице