HTML Таблицы

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

Что такое таблица?

Таблица - это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание уроков в школе и т.д.

Как добавить таблицу на веб-странице?

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

Таблица в HTML определяется тегом <table>. Каждый рядок таблицы определяется тегом <tr>. Заголовок таблицы определяется тегом <th>. По умолчанию заголовки таблиц выделены жирным шрифтом и центрированы. Ячейка с данными в таблице (data/cell) определяется тегом <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)

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

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

Пример:

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

HTML таблица - выравнивание заголовков слева (text-align)

По умолчанию заголовки таблиц выделены жирным шрифтом и центрованы. Для выравнивания заголовков таблиц используйте CSS свойство text-align:

Пример:

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

HTML таблица - добавление интервала между границами (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 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;
}
Попробуйте сами »

Резюме раздела

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

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 » Упражнение 6 »

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

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

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