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

HTML учебник

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

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

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts


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

Таблица 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-элементов; текст, изображения, списки, другие таблицы, etc.



Таблица 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>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

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

Чтобы сделать ячейку, охватывающую более одной строки, используйте атрибут 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>:

Пример

<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:

Пример

<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 чтобы сделать ячейку span много столбцов
  • Используйте атрибут rowspan чтобы сделать ячейку, охватывающую много строк
  • Используйте атрибут id для однозначного определения одной таблицы

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

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