Таблицы в html примеры: Оформление таблицы с помощью псевдоклассов
Содержание
Оформление таблицы с помощью псевдоклассов
С помощью стандартных способов оформления можно задать стиль для таблицы и всех её строк. Но как быть, если требуется, например, выделить отдельную ячейку? Чтобы не задавать для ячейки class, можно воспользоваться комбинацией селекторов и псевдоклассов.
В данном уроке приведены различные варианты отбора элементов таблицы с помощью структурных псевдоклассов.
<table>
<tr><th>Company</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th></tr>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.
2</td><td>33.3</td><td>36.7</td></tr>
</table>
2</td><td>33.3</td><td>36.7</td></tr>
</table>1. Первая срока таблицы
th {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
2. Последняя строка таблицы
tr:last-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
3. Третья строка таблицы
tr:nth-child(3){background:#C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
4. Таблица-зебра (каждая четная строка)
tr:nth-child(even) {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
5. Таблица-зебра (каждая нечетная строка)
tr:nth-child(odd) {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
6. Первая ячейка первой строки таблицы
th:first-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
7. Последняя ячейка первой строки таблицы
th:last-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
8. Первая ячейка последней строки таблицы
tr:last-child td:first-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
9. Последняя ячейка последней строки таблицы
tr:last-child td:last-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
10. Третья ячейка третьей строки таблицы
tr:nth-child(3) td:nth-child(3) {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
11. Первый столбец таблицы
th:first-child, td:first-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
12. Третий столбец таблицы
td:nth-child(3), th:nth-child(3) {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
13. Последний столбец таблицы
th:last-child, td:last-child {background: #C9E3FE}
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
HTML-списки
HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
- маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
- нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
- список определений — <dl> — состоит из пар термин <dt> — <dd> определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.
Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью элемента <ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
Браузеры по умолчанию добавляют следующее форматирование блоку списка:
ul {
padding-left: 40px;
margin-top: 1em;
margin-bottom: 1em;
}Каждый элемент списка создаётся с помощью элемента <li> (от англ. List Item).
Для элемента <ul> доступны глобальные атрибуты.
<ul>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ul>- Microsoft
- Apple
- IBM
Фигура. 1. Маркированный список
2. Нумерованный список
Нумерованный список создаётся с помощью элемента <ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
ol {
padding-left: 40px;
margin-top: 1em;
margin-bottom: 1em;
}Для элемента <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.
Для элемента <ol> доступны следующие атрибуты:
| Атрибут | Описание, принимаемое значение |
|---|---|
| reversed | Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). |
| start | Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">. |
| type | Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv). |
<ol>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ol>- Microsoft
- Apple
- IBM
Фигура. 2. Нумерованный список
3. Список определений
Списки определений создаются с помощью элемента <dl>. Для добавления термина применяется элемент <dt>, а для вставки определения — элемент <dd>.
Блок списка определений имеет следующие стили браузера по умолчанию:
dl {
margin-top: 1em;
margin-bottom: 1em;
}Для элементов <dl>, <dt> и <dd> доступны глобальные атрибуты.
<dl>
<dt>Режиссер:</dt>
<dd>Петр Точилин</dd>
<dt>В ролях:</dt>
<dd>Андрей Гайдулян</dd>
<dd>Алексей Гаврилов</dd>
<dd>Виталий Гогунский</dd>
<dd>Мария Кожевникова</dd>
</dl>- Режиссер:
- Петр Точилин
- В ролях:
- Андрей Гайдулян
- Алексей Гаврилов
- Виталий Гогунский
- Мария Кожевникова
Фигура. 3. Список определений
4. Как создать вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
<ul>
<li>Пункт 1.</li>
<li>Пункт 2.
<ul>
<li>Подпункт 2.1.</li>
<li>Подпункт 2.2.
<ul>
<li>Подпункт 2.2.1.</li>
<li>Подпункт 2.2.2.</li>
</ul>
</li>
<li>Подпункт 2.3.</li>
</ul>
</li>
<li>Пункт 3.</li>
</ul>- Пункт 1.
- Пункт 2.
- Подпункт 2.1.
- Подпункт 2.2.
- Подпункт 2.2.1.
- Подпункт 2.2.2.
- Подпункт 2.3.
- Пункт 3.
Фигура. 4. Вложенный список
5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
<ol>
<li>пункт</li>
<li>пункт
<ol>
<li>пункт</li>
<li>пункт</li>
<li>пункт
<ol>
<li>пункт</li>
<li>пункт</li>
<li>пункт</li>
</ol>
</li>
<li>пункт</li>
</ol>
</li>
<li>пункт</li>
<li>пункт</li>
</ol>Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
- counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
- counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
- content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
ol {
/* убираем стандартную нумерацию */
list-style: none;
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */
counter-reset: li;
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li;
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li, ".") ". ";
}- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
Фигура. 5. Многоуровневый нумерованный список
HTML Таблицы
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента <table> парный блочный тег <tr> (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов <tr> вы добавите, столько строк в таблице и будет. Открывающий тег <tr> обозначает начало новой строки таблицы. После него помещаются элементы <td> (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента <td> вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом </tr>.
Элемент <th> (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент <td>, однако его назначение — создание заголовка строки или столбца. Как правило, элемент <th> размещают в первой строке таблицы. Браузеры отображают текст в элементе <th> жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента <th> помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе
несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:
<style>
table, th, td {
border: 1px solid black;
}
</style>Пример: Применение свойства
border
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
</body>
</html>| Свойство border следует устанавливать как для самой таблицы <table> так и для её ячеек <th> и <td>. |
Одинарная рамка для таблицы
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:
<style>
table {
border-collapse: collapse;
}
</style>Пример: Применение свойства
border-collapse
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
</body>
</html>Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS.
Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу <td> или <th>.
Интервал ячеек (border-spacing) — это расстояние между ними (<td> или <th>). Сначала присвойте значение separate свойству border-collapse элемента <table>, а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента <table>, но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding и border-spacing:
Пример: Применение свойств
padding и border-spacing
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding и border-spacing</title>
<style>
table, td {
border: 1px solid black;
}
table {
border-spacing: 15px;
background-color:green;
}
td {
background-color:yellow;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>| Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает. |
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:
table {width: 100%;}
Пример: Применение свойства
width
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>width: 100%</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки <th> или ячейки <td> объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan в элементах <td> или <th> — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута
colspan
| Ячейка на два столбца | |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Атрибут colspan</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr><th colspan="2">Ячейка на два столбца</th></tr>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>Объединение строк
Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута
rowspan
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Атрибут rowspan</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr><th rowspan="2">Ячейка на две строки</th>
<td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег <caption> (от англ. caption – подпись). Элемент <caption> предназначен для организации заголовка таблицы. Располагается сразу после тега <table>, но вне описания строки или ячейки.
Пример: Применение тега
<caption>
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Элемент caption</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>Это заголовок таблицы</caption>
<tr><th rowspan="2">Ячейка на две строки</th>
<td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги <thead>, <tbody> и <tfoot>.
Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз
дания верхней шапки таблицы) используется тег <thead>. Заголовки таблицы
должны быть помещены в элемент <thead>, например:
<thead>
<tr><th>Заголовок 1</th><th>Заголовок 2< /th></tr>
</thead>Основное содержимое (тело) таблицы должно находиться внутри элемента <tbody> (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег <tfoot> (в одной таблице допускается не более одного тега <tfoot>). В исходном коде тег <tfoot> ставится до тега <tbody>.
Кроме логического группирования одной из причин использования элементов <thead> и <tfoot> является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок (<thead>) и последнюю строку (<tfoot>), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги
<thead>, <tbody> и <tfoot>
| Это шапка таблицы | |||
|---|---|---|---|
| Это подвал таблицы | |||
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Теги thead, tbody и tfoot</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th colspan="4">Это шапка таблицы</th></tr>
</thead>
<tfoot>
<tr><td colspan="4">Это подвал таблицы</td></tr>
</tfoot>
<tbody>
<tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</tbody>
</table>
</body>
</html>Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется в конце таблицы.
Это исходит из того, что <tbody> может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> в коде прописывается перед элементом <tbody>.
Задачи
Объединение столбцов
Напиште разметку для таблицы, изображенной на рис.1.
Задача HTML:
Реши сам »
Ячейка на два столбца Ячейка 1 Ячейка 2 Рис.1
Объединение строк
Напиште разметку для таблицы, изображенной на рис.1.
Задача HTML:
Реши сам »
Ячейка на три строки Ячейка 1 Ячейка 2 Ячейка 3 Рис.1
Убрать двойную рамку таблицы
По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title> <style> table, th, td {border: 1px solid black;} </style> </head>
<body> <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr> <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr> <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr> </table> </body>
</html>
Широкая таблица
Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3
<head>
<meta charset="UTF-8">
<title>Ширина таблицы</title> <style> table {border-collapse: collapse;} th, td {border: 1px solid black;} </style> </head>
<body> <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr> <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr> <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr> </table> </body>
</html>
Заголовок таблицы
Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.
Задача HTML:
Реши сам »
Основной заголовок таблицы Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Рис.1
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>Ширина таблицы</title> <style> table {border-collapse: collapse;width:100%} th, td {border: 1px solid black;} </style> </head>
<body> <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr> <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr> <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr> </table> </body>
</html>
Поле внутри ячеек
Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.
Задача HTML:
Реши сам »
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Рис.1
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>Интервал между ячейками</title> <style> table, td { border: 1px solid black; } </style> </head>
<body> <table> <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body>
</html>
Объединение строк
Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.
фурма ананасы персики бананы груши авокадо Рис.1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Объединение строк</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 5px; } </style> </head> <body> <table> <tr> <td>фурма</td> <td rowspan="3">ананасы</td> <td>персики</td> </tr> <tr> <td>бананы</td> <td rowspan="2">груши</td> </tr> <tr> <td>авокадо</td> </tr> </table> </body> </html>
Таблицы. Учебник html table
Глава 4
Помимо прочих объектов в свой сайт Вы можете вставить таблицы.. и сразу забегая вперёд скажу о том что они имеют не малую значимость при создании сайта. С помощью таблицы можно не только выложить ту или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв ёе за основу полностью построить на ней свой сайт, таблицы порой незаменимы при верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать..
Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:
<tr> — строка таблицы
<td> — столбец таблицы
Вместе эти теги пишутся так:
<table>
<tr>
<td>ячейка</td>
</tr>
</table>
Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец — ячейку
Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border «рамка», который добавит нам наглядности.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=»1″>
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>
Разобрались? Если да, идем дальше..
Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну.
На самом деле слово «объединить» здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку «объединить».. здесь всё происходит не совсем так, и правильнее было бы говорить не «объединить» а «растянуть».
Эту задачу решают атрибуты colspan и rowspan
- colspan — определяет какое количество столбцов будет занимать данная ячейка
- rowspan — количество рядов занимаемое ячейкой
Предположим что в нашем примере нам необходимо «объединить» в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=»1″>
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan=»2″>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>
Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.
Исправленный пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=»1″>
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan=»2″>строка3 ячейка2</td>
</tr>
</table>
</body>
</html>
Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=»1″>
<tr>
<td rowspan=»3″>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan=»2″>строка3 ячейка2</td>
</tr>
</table>
</body>
</html>
Всё просто.. главное быть внимательным!
Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и «ползают» себе как хотят.
Вспомните про атрибуты width — ширина и height — высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr>и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>
Пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border=»1″ width=»640″>
<tr>
<td rowspan=»3″ width=»150″>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td height=»30″>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan=»2″ >строка3 ячейка2</td>
</tr>
</table>
</center>
</body>
</html>
Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица..
Еще не всё рассказал..
Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах
Вот пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border=»1″>
<tr height=»25%»>
<td width=»15%»> строка1 ячейка1</td>
<td width=»25%»>строка1 ячейка2</td>
<td width=»60%»>строка1 ячейка3</td>
</tr>
<tr height=»50%»>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr height=»25%»>
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</center>
</body>
</html>
В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а добрую половину места второй.. Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное время.. революция..
Посмотрите на этот пример с таблицей, он Вам ничего не напоминает??
<html>
<head>
<title>Верстка страницы</title>
</head>
<body>
<center>
<table border=»1″>
<tr>
<td colspan=»5″><center>Заголовок</center></td>
</tr>
<tr>
<td><center>кнопка1</center></td>
<td><center>кнопка2</center></td>
<td><center>кнопка3</center></td>
<td><center>кнопка4</center></td>
<td><center>кнопка5</center></td>
</tr>
<tr>
<td valign=»top»>содержание:</td>
<td colspan=»4″><center>куча текста</center></td>
</tr>
</table>
</center>
</body>
</html>
Как видите, таблица это хороший и главное удобный инструмент для верстки страницы..
Любая ячейка таблицы может служить самостоятельной ёмкостью для наполнения другими тегами и текстовым содержанием, а также иметь те или иные индивидуальные свойства — атрибуты.
Давайте освежим в голове уже пройденный материал, применив эти знания к таблице. Покажу на примерах, мы это уже проходили..
Добавим красок:
<html>
<head>
<title>Таблица и краски</title>
</head>
<body>
<center>
<table>
<tr>
<td bgcolor=»#c0e4ff»>1</td>
<td bgcolor=»#c5ffa0″>2</td>
<td bgcolor=»#c0e4ff»>3</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>4</td>
<td bgcolor=»#ffa0c5″>5</td>
<td bgcolor=»#c5ffa0″>6</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff»>7</td>
<td bgcolor=»#c5ffa0″>8</td>
<td bgcolor=»#c0e4ff»>9</td>
</tr>
</table>
</center>
</body>
</html>
Выровняем текст:
Здесь появляется новый атрибут valign — Вертикальное выравнивание. До этого момента нам был знаком атрибут align — горизонтальное выравнивание.
<html>
<head>
<title>Выравнивание в таблице</title>
</head>
<body>
<center>
<table>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>1</td>
<td bgcolor=»#c5ffa0″ valign=»top»><center>2</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>3</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>4</td>
<td bgcolor=»#ffa0c5″><center>5</center></td>
<td bgcolor=»#c5ffa0″ align=»right»>6</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>7</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»><center>8</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>9</td>
</tr>
</table>
</center>
</body>
</html>
Теперь о новых атрибутах.
Cellspacing — задаёт расстояние в пикселях между ячейками таблицы. Задав значение cellspacing=»0″ можно избавиться от «зазора» между ячейками.
Пример, увеличим «зазор»:
<html>
<head>
<title>Расстояние между ячейками</title>
</head>
<body>
<center>
<table cellspacing=»15″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>1</td>
<td bgcolor=»#c5ffa0″ valign=»top»><center>2</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>3</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>4</td>
<td bgcolor=»#ffa0c5″><center>5</center></td>
<td bgcolor=»#c5ffa0″ align=»right»>6</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>7</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»><center>8</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>9</td>
</tr>
</table>
</center>
</body>
</html>
Атрибут cellpadding (не путайте с cellspacing) — в пикселях задаёт поля ячеек (отступ от границ ячеек до текста)
Пример:
<html>
<head>
<title>Поля таблицы</title>
</head>
<body>
<center>
<table cellspacing=»0″ cellpadding=»25″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>1</td>
<td bgcolor=»#c5ffa0″ valign=»top»><center>2</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>3</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>4</td>
<td bgcolor=»#ffa0c5″><center>5</center></td>
<td bgcolor=»#c5ffa0″ align=»right»>6</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>7</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»><center>8</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>9</td>
</tr>
</table>
</center>
</body>
</html>
Отдельно, пожалуй, еще следует обратить внимание на так называемые вложенные таблицы, я уже говорил про то, что каждая отдельно взятая ячейка может служить емкостью для других тегов.. и тег <table> не является исключением. По сути можно вставить одну таблицу в другую..
Смотрим пример:
<html>
<head>
<title>Вложенная таблица</title>
</head>
<body>
<center>
<table border=»1″>
<tr>
<td colspan=»2″><center>Заголовок</center></td>
</tr>
<tr>
<td valign=»top»>содержание:</td>
<td valign=»top»>
<center>
<br><br>
В одну ячейку вложена целая таблица!!
<br><br><br>
<table cellspacing=»0″ cellpadding=»15″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>1</td>
<td bgcolor=»#c5ffa0″ valign=»top»><center>2</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>3</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>4</td>
<td bgcolor=»#ffa0c5″><center>5</center></td>
<td bgcolor=»#c5ffa0″ align=»right»>6</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>7</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»><center>8</center></td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>9</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
Такой вот растянутый код получился… Сложно? Запутанно? Может быть на первый взгляд оно так и есть, но ведь не зря же я приводил столько примеров! Если что то не понятно вернитесь назад, перечитайте, идите от простого к более сложному и тогда всё станет на свои места! Практика — залог успеха. Не ленитесь, пробуйте писать код самостоятельно..
Ну и уже по традиции подвожу итог главы.. Итак, что у Вас там за страничка получилась..?
У меня она уже вот такая:
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<table cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ bgcolor=»#b2ff80″>
<center><img src=»graphics/privet.png» alt=»Привет мир!!!»></center>
</td>
</tr>
<tr>
<td bgcolor=»#ffa0cf»><center><b>Обо мне!!!</b></center></td>
<td bgcolor=»#c0e4ff»><center><b>Здесь мои фотки!!</b></center></td>
<td bgcolor=»#c0e4ff»><center><b>Напишите мне письмо..</b></center></td>
</tr>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<p align=»justify»>
<img src=»graphics/foto.jpg» align=»left» hspace=»10″ alt=»Это моя фотка!!!» title=»Это моя фотка!!»>
Разрешите представиться Карлсон! который живет на крыше.
Спокойствие! Только спокойствие! подумаешь с жильём проблемы..<br> Я — умный, красивый, в меру упитанный мужчина, в полном расцвете сил! Женщины сходят по мне сходят с ума.. эх.. какая досада.. в общем со мной не соскучишься..
</p>
<p> По телевизору показывают жуликов… Ну чем я хуже?! — так что вот решил сделать свою страничку!</p>
<p> Хочу здесь найти себе новых друзей, для того чтобы вместе гулять по крышам!</p>
<p> Я очень очень сильно люблю <font size=»+1″ color=»#ff0000″> варенье</font> !!! С нетерпеньем буду ждать Вашего приглашения на чай.. побалуемся плюшками… пошалим…</p>
<center><b>Прилечу!!</b></center>
<p> Ну зачем тебе этот щенок? Я же лучше, Малыш…</p>
</td>
</tr>
</table>
</center>
</body>
</html>
Читайте так же: И снова таблицы..
При создании больших сложных таблиц рекомендую сначала рисовать их на бумаге. Так будет удобнее представить её общую картину, подсчитать количество строк и столбцов, увидеть с какой ячейки и на какое количество следует растягивать «объединять» те или иные ячейки.
При выборе будущих размеров Вашей страницы, особенно это касается её ширины (атрибут width), ориентируйтесь на стандартные разрешения мониторов 640 на 480, 800 на 600, 1024 на 768… Но самое главное помните, что у разных пользователей в зависимости от их мониторов и зрения выставлены разные разрешения и если указанные Вами размеры будут выходить за их рамки то соответственно на экранах таких пользователей будут появляться полосы прокрутки. Вертикальная полоса это беда нестрашная, благо колёсико на мышке придумали, да и пишут у нас слева направо, а не сверху вниз.. а вот горизонтальная полоса прокрутки уже вызывает значительные неудобства при чтении страницы.. Так что не советую указывать большую ширину страницы. По-моему ширина в 1024 пикселей будет оптимальным размером… хотя… ну да ладно.. решайте сами.
HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки
Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.
| Необходимые знания: | Базовый HTML (Введение в HTML). |
|---|---|
| Цель: | Изучить более продвинутые возможности HTML таблиц и их доступность. |
Вы можете добавить заголовок для таблицы установив его в элементе <caption> и этот элемент необходимо поместить внутрь элемента <table> (en-US). Причём вам нужно поместить его сразу после открытия тега <table>.
<table>
<caption>Dinosaurs in the Jurassic period</caption>
...
</table>Как можно понять из короткого примера выше, заголовок отражает в себе описание контента таблицы. Это полезно для всех читателей просматривающих страницу и желающих получить краткое представление от том полезна ли для них таблица, что особенно важно для слепых пользователей. Вместо того чтобы читать содержимое множества ячеек чтобы понять о чем таблица, он или она могут полагаться на заголовок и принимать решение читать ли таблицу более подробно.
Заголовок помещают сразу после тега <table>.
Примечание: Атрибут summary (en-US) также может быть использован в <table> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <caption> элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
Упражнение: Добавление заголовка
Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
- Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
- Добавьте подходящий заголовок к таблице.
- Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя <thead> (en-US), <tfoot> и <tbody> (en-US), которые позволяют вам разметить header, footer и body секции таблицы.
Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.
Использование:
- Элементом
<thead>нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете<col>/<colgroup> (en-US) элемент, тогда заголовок должен находиться ниже его. - Элементом
<tfoot>нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы). - Элементом
<tbody>необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).
Примечание: <tbody> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
Упражнение: Добавление структуры таблицы
Давайте используем эти новые элементы.
- В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
- Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка «SUM» которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
- Поместите очевидную строку заголовка внутрь
<thead>элемента, строку «SUM» внутрь<tfoot>элемента и оставшийся контент внутрь<tbody>элемента. - Сохраните, перезагрузите и вы увидите, что добавление элемента
<tfoot>привело к тому, что строка «SUM» опустилась к нижней части таблицы. - Далее, добавьте атрибут
colspan, чтобы ячейка «SUM» занимала первые четыре столбца, таким образом числовое значение «Cost» появится в последнем столбце. - Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в
<head>вашего HTML документа вы увидите пустой элемент<style>. Внутри этого элемента добавьте следующие строки CSS кода:tbody { font-size: 90%; font-style: italic; } tfoot { font-weight: bold; } - Сохраните, обновите и вы увидите результат. Если
<tbody>и<tfoot>элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).
Ваша готовая таблица должна выглядеть примерно так:
В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент <table>. Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.
Разметка простой вложенной таблицы:
<table>
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>Результат которого выглядит примерно так:
| title1 | title2 | title3 |
|---|---|---|
| cell2 | cell3 | |
| cell4 | cell5 | cell6 |
Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.
| Clothes | Accessories | |||||
|---|---|---|---|---|---|---|
| Trousers | Skirts | Dresses | Bracelets | Rings | ||
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 | |
| Brussels | 51 | 27 | 38 | 69 | 28 | |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 | |
Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.
В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.
Использование заголовков столбцов и строк
Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.
Атрибут scope
Новая тема в этой статье это атрибут scope (en-US), который может быть добавлен к элементу <th> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:
<thead>
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):
<tr>
<th scope="row">Haircut</th>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.
Атрибут scope имеет ещё два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу «Items sold…» в начале этого раздела статьи, вы увидите что ячейка с «Clothes» находится над ячейками «Trousers», «Skirts» и «Dresses». Все эти ячейки должны быть помечены как заголовки (<th>), но «Clothes» заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому «Clothes» должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".
Альтернатива атрибута scope это использование атрибутов id и headers задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:
- Вы устанавливаете уникальный
idдля каждого<th>элемента. - Вы устанавливаете атрибут
headersдля каждого<td>элемента. Каждыйheadersатрибут должен содержать список всехid, разделённый пробелами, ко всем<th>элементам которые действуют как заголовок для этой ячейки.
Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.
Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:
<thead>
<tr>
<th>Purchase</th>
<th>Location</th>
<th>Date</th>
<th>Evaluation</th>
<th>Cost (€)</th>
</tr>
</thead>
<tbody>
<tr>
<th>Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
...
</tbody>Примечание: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует гораздо больше разметки и оставляет обширное пространство для ошибок. Атрибута scope обычно достаточно для большинства таблиц.
- Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
- Теперь попробуем добавить соответствующий атрибут
scope, который наиболее соответствует этой таблице. - И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты
idиheaders.
Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.
Как создать таблицу в HTML5 и указать её параметры через стили?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.
Решение
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.
Пример 1. Создание таблицы
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег table</title>
</head>
<body>
<table border="1">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>Порядок расположения ячеек и их вид показан на рис. 1.
Рис. 1. Результат создания таблицы с четырьмя ячейками
Атрибут border тега <table> допустимо добавлять только с пустым значением (<table border>) или равным 1. Все остальные значения не проходят валидацию.
Для управления полями внутри ячеек используется стилевое свойство padding, которое добавляется к селектору td. Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table, браузер IE понимает его только с версии 8.0.
Пример 2. Поля внутри ячеек
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег table</title>
<style>
table {
width: 100%; /* Ширина таблицы */
background: white; /* Цвет фона таблицы */
color: white; /* Цвет текста */
border-spacing: 1px; /* Расстояние между ячейками */
}
td, th {
background: maroon; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.
Рис. 2. Поля в ячейках таблицы
Таблицы 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>
<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>
<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>
<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>
<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>
<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> | Группирует содержимое нижнего колонтитула в таблице |
HTML-тег таблицы
Пример
Простая таблица HTML, содержащая два столбца и две строки:
<таблица>
г.
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег
| и | . Элемент | ||||
|---|---|---|---|---|---|
| определяет заголовок таблицы, а Элемент | определяет ячейку таблицы. Таблица HTML может также включать Элементы |
| Элемент | |||||
|---|---|---|---|---|---|
| <таблица> | Есть | Есть | Есть | Есть | Есть |
Глобальные атрибуты
Тег
| Месяц | Экономия |
|---|---|
| январь | 100 |
| февраль | 80 долларов |