ТАБЛИЦЫ
Любая таблица в HTML состоит из строк и ячеек, и может иметь свои шапку, подвал и заголовок. Для создания таблицы используются теги <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>, <col> и <colgroup>.
Поддержка браузеров
ТЕГ <TABLE>
Тег <table> используется для создания таблицы. Этот тег может содержать теги <caption>, <colgroup>, <thead>, <tbody>, <tr> и <tfoot>.
Синтаксис
<table></table>
Атрибуты
Тег <table> поддерживает глобальные атрибуты.
ТЕГ <TR>
Тег <tr> используется для создания строки таблицы. Этот тег может содержать 1 или больше тегов <td> и/или <th>.
Синтаксис
<tr></tr>
Атрибуты
Тег <tr> поддерживает глобальные атрибуты.
ТЕГ <TD>
Тег <td> используется для создания ячейки таблицы. Этот тег должен находиться внутри тега <tr>
Синтаксис
<td></td>
Атрибуты
| Атрибут | Описание |
|---|---|
| colspan | Указывает на количество ячеек, которые следует объединить по горизонтали |
| headers | Позволяет связать ячейки с заголовками. Содержит список id, которые соответствуют тегам <th> |
| rowspan | Указывает на количество ячеек, которые следует объединить по вертикали |
Тег <td> поддерживает глобальные атрибуты.
ТЕГ <TH>
Тег <th> используется для создания заголовочной ячейки таблицы. Этот тег должен находиться внутри тега <tr>
Синтаксис
<th></th>
Атрибуты
| Атрибут | Описание |
|---|---|
| abbr | Содержит сокращенную версию содержимого в ячейке заголовка |
| colspan | Указывает на количество заголовочных ячеек, которые следует объединить по горизонтали |
| headers | Позволяет связать одни заголовочные ячейки с другими. Содержит список id, которые соответствуют тегам <th> |
| rowspan | Указывает на количество ячеек, которые следует объединить по вертикали |
| scope | Указывает на то, является ли ячейка заголовка заголовком для столбца, строки или группы столбцов или строк |
| sorted | Определяет направление сортировки столбца |
Тег <th> поддерживает глобальные атрибуты.
Пример простой таблицы
<table>
<tr>
<th>Игрок\№ броска</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>Игрок 1</th>
<td>Попадание</td>
<td>Попадание</td>
<td>Промах</td>
<td>Попадание</td>
<td>Попадание</td>
</tr>
<tr>
<th>Игрок 2</th>
<td>Попадание</td>
<td>Попадание</td>
<td>Промах</td>
<td>Попадание</td>
<td>Промах</td>
</tr>
<tr>
<th>Игрок 3</th>
<td>Попадание</td>
<td>Промах</td>
<td>Промах</td>
<td>Попадание</td>
<td>Попадание</td>
</tr>
</table>
HTML
Пример оформления простой таблицы при помощи CSS
<table>
<tr>
<th>Игрок\№ броска</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>Игрок 1</th>
<td>Попадание</td>
<td>Попадание</td>
<td>Промах</td>
<td>Попадание</td>
<td>Попадание</td>
</tr>
<tr>
<th>Игрок 2</th>
<td>Попадание</td>
<td>Попадание</td>
<td>Промах</td>
<td>Попадание</td>
<td>Промах</td>
</tr>
<tr>
<th>Игрок 3</th>
<td>Попадание</td>
<td>Промах</td>
<td>Промах</td>
<td>Попадание</td>
<td>Попадание</td>
</tr>
</table>
HTML
body {
font-family: Arial;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ddd;
padding: 5px 10px;
text-align: center;
}
th {
background: #f7f7f7;
}
CSS
ТЕГ <THEAD>
Тег <thead> используется для создания шапки таблицы. Этот тег может содержать 0 или больше тегов <tr>. В таблице допускается только один <thead>.
Синтаксис
<thead></thead>
Атрибуты
Тег <thead> поддерживает глобальные атрибуты.
ТЕГ <TBODY>
Тег <tbody> используется для хранения одной или нескольких строк таблицы. Этот тег может содержать 0 или больше тегов <tr>. В таблице может быть несколько тегов <tbody>.
Синтаксис
<tbody></tbody>
Атрибуты
Тег <tbody> поддерживает глобальные атрибуты.
ТЕГ <TFOOT>
Тег <tfoot> используется для создания подвала таблицы. Этот тег может содержать 0 или больше тегов <tr>. В таблице допускается только один <tfoot>.
Синтаксис
<tfoot></tfoot>
Атрибуты
Тег <tfoot> поддерживает глобальные атрибуты.
ТЕГИ <COLGROUP> И <COL>
Тег <colgroup> используется для создания группы из одной или нескольких колонок, которые задаются тегом <col>. Использование колонок удобно для форматирования целых колонок из ячеек.
Синтаксис
<colgroup>
<col>
<col>
</colgroup>
Атрибуты
| Атрибут | Описание |
|---|---|
| span | Указывает количество колонок, которые следует объеденить под общими стилями. В случае, если атрибут применяется к тегу <colgroup>, внутри него не должно быть ни одного тега <col>. |
Теги <colgroup> и <col> поддерживают глобальные атрибуты.
ТЕГ <CAPTION>
Тег <caption> используется для создания заголовка таблицы. Этот тег должен открываться сразу после открывающего тега
<table>
Синтаксис
<caption></caption>
Атрибуты
Теги <caption> поддерживает глобальные атрибуты.
Песочница
<table>
<colgroup>
<col class="tournaments">
<col>
<col>
<col>
<col>
<col>
<col class="last-year">
</colgroup>
<thead>
<tr>
<th>Турнир
</th>
<th>13/14
</th>
<th>14/15
</th>
<th>15/16
</th>
<th>16/17
</th>
<th>17/18
</th>
<th>18/19
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Турнир 1
</td>
<td>1 КР
</td>
<td>2 КР
</td>
<td>ПФ
</td>
<td>ПФ
</td>
<td>1 КР
</td>
<td>1 КР
</td>
</tr>
<tr>
<td>Турнир 2
</td>
<td>В
</td>
<td>Ф
</td>
<td>ПФ
</td>
<td>1 кр
</td>
<td>2 КР
</td>
<td>3 КР
</td>
</tr>
<tr>
<td>Турнир 3
</td>
<td>В
</td>
<td>В
</td>
<td>ЧФ
</td>
<td>3 кр
</td>
<td>ПФ
</td>
<td>Ф
</td>
</tr>
<tr>
<td>Турнир 4
</td>
<td>2 КР
</td>
<td>ЧФ
</td>
<td>ЧФ
</td>
<td>3 кр
</td>
<td>Ф
</td>
<td>ЧФ
</td>
</tr>
<tr>
<td>Турнир 5
</td>
<td>В
</td>
<td>Ф
</td>
<td>ПФ
</td>
<td>1 кр
</td>
<td>Ф
</td>
<td>ЧФ
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7">
В - выграли, Ф - финал, ПФ - полуфинал, ЧФ - четвертьфинал, КР - круг
</td>
</tr>
</tfoot>
</table>
HTML
body {
font-family: Arial;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 5px 10px;
text-align: center;
}
th {
background: #f7f7f7;
}
.tournaments {
background: #F4E2FF;
}
.last-year {
background: #E2EBFF;
}
tfoot td {
background: #fff;
}
CSS