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> | Группирует содержимое нижнего колонтитула в таблице |