Таблицы в HTML

Содержание

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

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Посмотреть пример

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

Таблица определяется с помощью тега <table>. Каждая строка таблицы определяется с помощью HTML 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-элементы, текст, изображения, списки, другие таблицы и т.д.

HTML таблица — добавление рамки

Рамка задается с помощью свойства CSS border:

Пример:

table, th, td {
    border: 1px solid black;
}

Посмотреть пример

Не забудьте задать рамку и для самой таблицы, и для ячеек.

HTML-таблица — объединение рамок

Если хотите объединить рамки всех HTML table tr в одну, используйте свойство CSS border-collapse:

Пример:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Посмотреть пример

Добавление полей ячейки

Поля ячейки задают пространство между содержимым ячейки и ее рамкой. Чтобы установить поля, используйте свойство padding:

Пример:

th, td {
    padding: 15px;
}

Посмотреть пример

Выравнивание заголовка по левому краю

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

Пример:

th {
    text-align: left;
}

Посмотреть пример

Добавление интервалов между рамками

Интервалы между рамками определяют расстояние между ячейками. Чтобы установить интервал между рамками, используйте свойство border-spacing:

Пример:

table {
    border-spacing: 5px;
}

Посмотреть пример

Примечание: Если в таблице объединены рамки, border-spacing не окажет никакого влияния.

Ячейки, охватывающие несколько столбцов

Чтобы растянуть ячейку HTML table tr td на несколько столбцов, используйте атрибут 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>

Посмотреть пример

Ячейки, охватывающие несколько строк

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

Посмотреть пример

Добавление подписей

Чтобы добавить в таблицу подписи, используйте тег <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> и перед тегом tr в HTML.

Специальные стили для конкретной таблицы

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

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

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, чтобы определить рамку таблицы;
  • Используйте свойство border-collapse, чтобы объединить рамки ячеек таблицы;
  • Используйте свойство padding, чтобы добавить поля ячеек;
  • Используйте свойство text-align, чтобы выровнять текст ячейки;
  • Используйте свойство CSS border-spacing, чтобы установить интервал между ячейками;
  • Используйте атрибут colspan, чтобы растянуть ячейку на несколько столбцов;
  • Используйте атрибут rowspan, чтобы растянуть ячейку на несколько строк.

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

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

Данная публикация представляет собой перевод статьи «HTML Tables» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню