Таблица на сайте: Таблицы | htmlbook.ru
Таблицы | htmlbook.ru
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.
Пример 12.1. Создание таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TABLE</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>Порядок расположения ячеек и их вид показан на рис. 12.1.
Рис. 12.1. Результат создания таблицы с четырьмя ячейками
Создание таблиц в HTML. Все о HTML таблицах
В HTML для создания таблиц используются теги группы table. К ним относятся:
- <table> — тег обвертка таблицы;
- <tr> — тег строки (ряда) таблицы;
- <td> — тег обычной ячейки таблицы;
- <th> — тег ячейки-заголовка таблицы;
- <col> — тег колонки таблицы;
- <colgroup> — тег группы колонок таблицы;
- <thead> — тег верхнего колонтитула таблицы;
- <tbody> — тег основной части таблицы;
- <tfoot> — тег нижнего колонтитула таблицы;
- <caption> — тег подписи таблицы.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.
Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.
Далее необходимо определить строки и ячейки — структуру таблицы.
В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.
Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.
Пример простой таблицы HTML
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Исходный код простой таблицы HTML
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег <td> определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега <th>.
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Пример HTML таблицы с заголовком th
| Volkswagen AG | Daimler AG | BMW Group |
|---|---|---|
| Audi | Mercedes-Benz | BMW |
| Skoda | Mercedes-AMG | Mini |
| Lamborghini | Smart | Rolls-Royce |
Исходный код таблицы HTML с заголовками th
<table>
<tbody>
<tr>
<th>Volkswagen AG</th>
<th>Daimler AG</th>
<th>BMW Group</th>
</tr>
<tr>
<td>Audi</td>
<td>Mercedes-Benz</td>
<td>BMW</td>
</tr>
<tr>
<td>Skoda</td>
<td>Mercedes-AMG</td>
<td>Mini</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Smart</td>
<td>Rolls-Royce</td>
</tr>
</tbody>
</table>Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
<td colspan="3" rowspan="2">Текст ячейки</td>Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan=»2″.
Пример HTML таблицы с объединением ячеек
| Nissan | ||
|---|---|---|
| Модель | Комплектация | Наличие |
| Nissan Qashqai | VISIA | + |
| TEKNA | + | |
| Nissan X-Trail | ACENTA | + |
| CONNECTA | — | |
Исходный код таблицы HTML с объединенными ячейками
<table>
<tbody>
<tr>
<th colspan="3">Nissan</th>
</tr>
<tr>
<th>Модель</th>
<th>Комплектация</th>
<th>Наличие</th>
</tr>
<tr>
<td rowspan="2">Nissan Qashqai</td>
<td>VISIA</td>
<td>+</td>
</tr>
<tr>
<td>TEKNA</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2">Nissan X-Trail</td>
<td>ACENTA</td>
<td>+</td>
</tr>
<tr>
<td>CONNECTA</td>
<td>-</td>
</tr>
</tbody>
</table>Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.
Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.
Пример HTML таблицы с колонтитулами и подписью
| Характеристика | SUTA 09H 6R | SUTA 09HR6R | SUTA 15H 5R |
|---|---|---|---|
| Наличие | + | + | + |
| Мощность двигателя | 0,9 (90 л.с.) | 0,9 (90 л.с.) | 1,5 (90 л.с.) |
| Топливо | бензин | бензин | дизель |
| Норма токсичности | Евро-6 | Евро-6 | Евро-5 |
Исходный код таблицы с колонтитулами и подписью
<table>
<caption>Комплектации Renault Sandero Stepway</caption>
<thead>
<tr>
<th>Характеристика</th>
<th>SUTA 09H 6R</th>
<th>SUTA 09HR6R</th>
<th>SUTA 15H 5R</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Наличие</th>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Мощность двигателя</th>
<td>0,9 (90 л.с.)</td>
<td>0,9 (90 л.с.)</td>
<td>1,5 (90 л.с.)</td>
</tr>
<tr>
<th>Топливо</th>
<td>бензин</td>
<td>бензин</td>
<td>дизель</td>
</tr>
<tr>
<th>Норма токсичности</th>
<td>Евро-6</td>
<td>Евро-6</td>
<td>Евро-5</td>
</tr>
</tbody>
</table>Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.
Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число«, указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).
Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.
Пример HTML таблицы с разделением на колонки
| ZEN 2E2C AL A | ZEN 2E2C J5 A | INTENSE 2E3C AL A | Характеристика |
|---|---|---|---|
| 1.5 (90 л.с.) | 1.2 (115 л.с.) | 1.5 (90 л.с.) | Мощность двигателя |
| дизель | бензин | дизель | Топливо |
| АКП6 (EDC) | АКП6 (EDC) | АКП6 (EDC) | Трансмиссия |
Исходный код таблицы HTML c <col> и <colgroup>
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>ZEN 2E2C AL A</th>
<th>ZEN 2E2C J5 A</th>
<th>INTENSE 2E3C AL A</th>
<th>Характеристика</th>
</tr>
<tr>
<td>1.5 (90 л.с.)</td>
<td>1.2 (115 л.с.)</td>
<td>1.5 (90 л.с.)</td>
<th>Мощность двигателя</th>
</tr>
<tr>
<td>дизель</td>
<td>бензин</td>
<td>дизель</td>
<th>Топливо</th>
</tr>
<tr>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<th>Трансмиссия</th>
</tr>
</tbody>
</table>Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
Создание таблицы в HTML — красивые примеры
Друзья! На этой странице Вас ждёт полный практический курс по изучению таблиц. Посмотрите его, и создание таблиц больше не будет для Вас проблемой. На самом деле их создавать очень легко.
Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div
) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.
Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.
Создание таблиц в html примеры
Перед началом обучения создания таблицы в HTML, что бы мои и ваши таблицы смотрелись одинаково — сделайте 3 простые вещи:
- Создайте файл index.html
- Откройте его в браузере
- Добавьте туда следующий код:
<style>
table{
margin: 50px 0;
text-align: left;
border-collapse: separate;
border: 1px solid #ddd;
border-spacing: 10px;
border-radius: 3px;
background: #fdfdfd;
font-size: 14px;
width: auto;
}
td,th{
border: 1px solid #ddd;
padding: 5px;
border-radius: 3px;
}
th{
background: #E4E4E4;
}
caption{
font-style: italic;
text-align: right;
color: #547901;
}
</style>Создание простой HTML таблички
Прежде всего нам необходимо указать тег table. Это парный тег, который указывает браузеру, что именно в нём будет располагаться вся HTML таблица.
<table></table>Но использование одного этого тега мало, ведь таблицу ещё надо наполнить. И там тоже есть свои правила, которые надо неукоснительно соблюдать.
Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.
Создание строк и ячеек
Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>Как видите, у нас получилась простая таблица, с одной строкой и четырьмя ячейками, которые автоматически преобразуются в 4 столбца.
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!
<table>
<tr>
<td>Строка1 Ячейка1</td>
<td>Строка1 Ячейка2</td>
<td>Строка1 Ячейка3</td>
<td>Строка1 Ячейка4</td>
</tr>
<tr>
<td>Строка2 Ячейка1</td>
<td>Строка2 Ячейка2</td>
<td>Строка2 Ячейка3</td>
<td>Строка2 Ячейка4</td>
</tr>
<tr>
<td>Строка3 Ячейка1</td>
<td>Строка3 Ячейка2</td>
<td>Строка3 Ячейка3</td>
<td>Строка3 Ячейка4</td>
</tr>
<tr>
<td>Строка4 Ячейка1</td>
<td>Строка4 Ячейка2</td>
<td>Строка4 Ячейка3</td>
<td>Строка4 Ячейка4</td>
</tr>
</table>Выглядеть она у нас будет вот так:
| Строка1 Ячейка1 | Строка1 Ячейка2 | Строка1 Ячейка3 | Строка1 Ячейка4 |
| Строка2 Ячейка1 | Строка2 Ячейка2 | Строка2 Ячейка3 | Строка2 Ячейка4 |
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | Строка3 Ячейка4 |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | Строка4 Ячейка4 |
Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного
Название таблицы — тег caption
Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:
<table>
<caption>Пример таблицы с названием</caption>
<tr>
<td>Строка1 Ячейка1</td>
<td>Строка1 Ячейка2</td>
<td>Строка1 Ячейка3</td>
<td>Строка1 Ячейка4</td>
</tr>
<tr>
<td>Строка2 Ячейка1</td>
<td>Строка2 Ячейка2</td>
<td>Строка2 Ячейка3</td>
<td>Строка2 Ячейка4</td>
</tr>
<tr>
<td>Строка3 Ячейка1</td>
<td>Строка3 Ячейка2</td>
<td>Строка3 Ячейка3</td>
<td>Строка3 Ячейка4</td>
</tr>
<tr>
<td>Строка4 Ячейка1</td>
<td>Строка4 Ячейка2</td>
<td>Строка4 Ячейка3</td>
<td>Строка4 Ячейка4</td>
</tr>
</table>А вот, что у нас получится в итоге:
| Строка1 Ячейка1 | Строка1 Ячейка2 | Строка1 Ячейка3 | Строка1 Ячейка4 |
| Строка2 Ячейка1 | Строка2 Ячейка2 | Строка2 Ячейка3 | Строка2 Ячейка4 |
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | Строка3 Ячейка4 |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | Строка4 Ячейка4 |
Как видите, несмотря на то, что мы разместили тег caption
внутри таблицы. Он располагается над ней.
Для закрепления материала на практике, я рекомендую вам посмотреть создание базовой таблички в видео ниже.
Видео 1: HTML таблицы – тег table
Управление ячейками таблицы
И так друзья, теперь мы будем понемногу усложнять нашу таблицу. И повышать ваши умения и практику. HTML-таблица, которую мы сделали с вами выше очень проста. Однако, чаще всего, надо предоставить данные в более сложном формате:
- Вывести заголовочную строку
- Объединить некоторые ячейки по вертикали
- А другие объединить по горизонтали
Вот этим мы и займёмся. И начнем мы, пожалуй, с…
Ячейки-заголовки в таблице
Конечно, мы могли бы всунуть внутрь ячеек первой строки какие-нибудь заголовки, или оформить их жирными через стили. Однако это будет неправильно!
Так как специально для этих целей был создан тег th, который задается вместо обычных ячеек (тег td). И указывает на то, что это ячейки-заголовки, которые используются для названия столбцов.
Помните о том, что тег th играет не просто визуальную роль, а семантическую. Это важно для поисковых роботов.
Давайте в таблице из прошлого примера в первой строке заменим теги td
на th
. А также чуточку изменим их содержимое:
<table>
<caption>Таблица с тегом th</caption>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
<tr>
<td>Строка2 Ячейка1</td>
<td>Строка2 Ячейка2</td>
<td>Строка2 Ячейка3</td>
<td>Строка2 Ячейка4</td>
</tr>
<tr>
<td>Строка3 Ячейка1</td>
<td>Строка3 Ячейка2</td>
<td>Строка3 Ячейка3</td>
<td>Строка3 Ячейка4</td>
</tr>
<tr>
<td>Строка4 Ячейка1</td>
<td>Строка4 Ячейка2</td>
<td>Строка4 Ячейка3</td>
<td>Строка4 Ячейка4</td>
</tr>
</table>А вот и результат кода выше, выполненный в браузере:
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Строка2 Ячейка1 | Строка2 Ячейка2 | Строка2 Ячейка3 | Строка2 Ячейка4 |
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | Строка3 Ячейка4 |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | Строка4 Ячейка4 |
Как видите, текст в этих ячейках автоматически делается жирным.
Объединение ячеек по горизонтали и вертикали
Ребята, прежде, чем начать объяснять, хочу оговориться – если информация по объединению ячеек будет для Вас слегка запутанной. А с непривычки это именно так, уж поверьте мне. Ниже есть видео, где я показываю и объясняю всё в живом режиме и на практике.
Довольно часто ячейки в HTML таблицах приходится объединять по горизонтали и вертикали. Для удобства, я называю это объединение по столбцам и по строкам. Так новичкам понятнее, что они делают.
Для этого мы будем использовать 2 атрибута, которые задаются непосредственно самим ячейкам:
- Атрибут
colspan
– указывает сколько надо объединить ячеек по столбцам (горизонталь), начиная с текущей - Атрибут
rowspan
– указывает сколько надо объединить ячеек по стокам (вертикаль) начиная с текущей
Эти атрибуты должны иметь целое число, начиная с 1 и более.
Помните! Если Вы объединяете ячейку с другими ячейками таблицы, она их замещает собой и растягивается. А это значит, что ячейки, которые замещены – надо удалить из HTML кода.
Это правило очень важно, так как если вы не удалите ячейки, которое были объединены, таблица будет отображаться в браузере некорректно.
Давайте попробуем в нашей таблице объединить 2 ячейки:
- Ячейку 1 в строке 2 объединим по столбцам (горизонталь) с ячейками 2 и 3 в той же строке. Для этого мы зададим ей атрибут
rowspan=“3” - Ячейку 4 в строке 2 объединим по строкам (вертикаль) с ячейками 4 в строках 3 и 4. Для этого мы зададим ей атрибут
colspan=“3”
И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.
В итоге у нас получится вот такой код:
<table>
<caption>Объединение ячеек таблицы</caption>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td>Строка3 Ячейка1</td>
<td>Строка3 Ячейка2</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка1</td>
<td>Строка4 Ячейка2</td>
<td>Строка4 Ячейка3</td>
</tr>
</table>А на деле, наша таблица будет выглядеть следующим образом:
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Строка2 Ячейка1 (соединена с ячейками 2 и 3) | Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4) | ||
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | |
Как видите, всё отображается ровно и красиво, как и было задумано. Для закрепления материала, советую посмотреть практическое видео ниже.
Видео 2: HTML таблицы — ячейки и управление ими
Объединение ячеек сразу по 2-ум направлениям
Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.
Давайте объединим ячейку 1 строки 3:
- С ячейкой 2 строки 3
- С ячейкой 1 строки 4
- С ячейкой 2 строки 4
Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:
colspan=“2”rowspan=“2”
Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:
<table>
<caption>Объединение ячеек по 2-ум направлениям</caption>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</table>А вот так, будет выглядеть наша таблица сейчас:
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Строка2 Ячейка1 (соединена с ячейками 2 и 3) | Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4) | ||
| Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) | Строка3 Ячейка3 | ||
| Строка4 Ячейка3 | |||
Шапка, тело и подвал HTML таблицы.
Как и сам сайт, наша табличка может иметь свои шапку, тело и подвал. И если вы хотите, чтобы ваш код выглядел семантически правильно для поисковых систем. Советую применять эти знания на практике.
Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.
Тег thead — шапка HTML таблицы
Этот тег рекомендуется размещать первым в контенте таблицы. То есть мы заводим этот тег и уже внутри него размещаем заголовочную строку с ячейками.
Фишки тега thead:
- Он должен встречаться только один раз на одну таблицу!
- Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.
Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:
<table>
<caption>Тег thead в таблице</caption>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</table>Визуально он никак не влияет на отображение таблицы, поэтому я не буду выводить результат исполнения кода.
Тег tfoot – подвал HTML таблицы
Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега thead
.
Фишки тега tfoot:
- Он должен встречаться только один раз на одну таблицу!
- Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.
Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot
:
<table>
<caption>Тег tfoot в таблице</caption>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</table>А вот и наша табличка:
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Подвал столбец 1 | Подвал столбец 2 | Подвал столбец 3 | Подвал столбец 4 |
| Строка2 Ячейка1 (соединена с ячейками 2 и 3) | Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4) | ||
| Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) | Строка3 Ячейка3 | ||
| Строка4 Ячейка3 | |||
Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot
в середине таблицы, его содержимое выводится в её конце!
Тег tbody – тело таблицы.
В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.
Вот такой код получится в итоге:
<table>
<caption>Тег tbody в таблице</caption>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</tbody>
</table>Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.
И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.
Видео 3. HTML таблицы – шапка, тело и подвал
Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.
Управление колонками в HTML таблицах
Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?
Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.
Тег col
Этот тег позволяет задать определённые стили и атрибуты для определённой колонки. Задаётся он сразу после тега caption
. И количество этих тегов может быть столько, сколько и колонок в таблице. То есть каждый последующий тег col отвечает за следующую колонку.
Что бы понять, как это всё работает, давайте первым двум колонкам — зададим ширину в 100 пикселей, третьей 150, а четвертой 200 пикселей. Для этого мы заведём 4 тега col
, и каждому из них пропишем свой атрибут style
с определённым значением ширины:
<table>
<caption>Тег col в таблице</caption>
<col>
<col>
<col>
<col>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</tbody>
</table>В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Подвал столбец 1 | Подвал столбец 2 | Подвал столбец 3 | Подвал столбец 4 |
| Строка2 Ячейка1 (соединена с ячейками 2 и 3) | Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4) | ||
| Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) | Строка3 Ячейка3 | ||
| Строка4 Ячейка3 | |||
Тег col
можно сократить, если у него одинаковые параметры при помощи атрибута span
. В нашем случае, у нас заданы одинаковые параметры для первой и второй колонки. Давайте сократим эти теги и допишем атрибут, вот такой код выйдет:
<table>
<caption>Тег col в таблице</caption>
<col span="2">
<col>
<col>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</tbody>
</table>Таблицу приводить в пример не буду, так как она совершенно не поменялась.
Тег colgroup
Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.
Вот какой код ввёл я:
<table>
<caption>Тег colgroup в таблице</caption>
<colgroup>
<col span="2">
<col>
</colgroup>
<col>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</tbody>
</table>В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Подвал столбец 1 | Подвал столбец 2 | Подвал столбец 3 | Подвал столбец 4 |
| Строка2 Ячейка1 (соединена с ячейками 2 и 3) | Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4) | ||
| Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) | Строка3 Ячейка3 | ||
| Строка4 Ячейка3 | |||
Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.
Видео 4. HTML таблицы – управление колонками
Как видите, ничего сложного в том, чтобы создать сложную функциональную таблицу нет. Главное знать теги и применять их в правильном назначении. Всё остальное – дело техники
На этом всё, мои дорогие друзья. Если будут вопросы касательно создания HTML таблиц – задавайте их в комментариях.
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>
Как сделать или вставить таблицу на сайте. 5 способов
Эта статья будет посвящена разбору возможностей создания и вставки таблиц, в том числе таблиц excel на сайт.
Сначала рассмотрим, как сделать и вставить таблицу на сайте с помощью дополнений. Потом обратим внимание на отдельные онлайн сервисы для создания таблиц. Следующим шагом рассмотрим сервис, позволяющий делать таблицы более красивыми.
Далее посмотрим, как вставить на сайт таблицу из уже готового файла Excel. И в завершении создадим адаптивные таблицы для сайта с помощью сервисов Гугл и Onedrive, чтобы вставлять на сайт таблицы excel любого размера.
Итак, начнем…
Прежде всего, хочется заметить, что не может быть одного единственного универсального решения для создания и вставки таблиц на сайте, который бы подходил для любых сайтов. Разные движки (Вордпресс, Джумла и т.п.), разные темы или шаблоны со своим дизайном, а также разные задачи, под которые создаются таблицы и разные размеры таблиц вынуждают каждого вебмастера подыскивать свой вариант создания таблиц.
И цель данной статьи состоит в том, чтобы помочь разобраться в разных возможностях, увидеть преимущества и недостатки каждого вида создания и добавления таблиц на сайте. И уже потом решать, какой вариант использовать в своем конкретном случае.
Плагины для создания и вставки таблиц на сайт
Для разных движков, будь то это WordPress, Joomla или любой другой, существуют дополнения или плагины, расширяющие возможности оформления страниц сайта. В зависимости от того, какой движок у вашего сайта, вы можете просто в поисковике набрать что-то типа: таблица в Водпресс или как создать таблицу в Joomla и получить кучу сайтов, которые делают подробный разбор разных плагинов.
Для движка Вордпресс, например, один из самых популярных плагинов для создания таблиц, это плагин TablePress.
У каждого плагина есть свои собственные преимущества. Одни могут позволять быстро создавать простые таблицы на сайте, в других же придется повозиться, чтобы сделать красивые таблицы для сайта.
Но, также необходимо понимать, что у плагинов есть и свои недостатки.
Так, чем больше разных плагинов установлено на сайте, тем более нагруженным и уязвимым становится сайт.
Кроме того, не все плагины будут корректно работать с разными темами (шаблонами). Вот, к примеру, даже такой популярный плагин, как расширенный текстовый редактор CKEditor, тоже работает не безупречно.
В нем, конечно, есть много ценных возможностей, таких как изменение шрифта и его размера, а также выделение текста разным цветом. И, что касается нашей темы, то в этом плагине есть возможность создания и вставки таблиц:
Удобно, — ставим курсов в том месте текста, где нужно создать и вставить таблицу, нажимаем на значок таблицы, как показано на снимке выше и с помощью всплывающего окна настраиваем нужную нам таблицу:
Здесь все интуитивно понятно. И просто поэкспериментировав, можно быстро понять, как создавать таблицы на сайте с помощью этого плагина. Единственное что хочется дополнить, — если у вас тема сайта адаптивная, т.е. размер корректно изменяется под экраны мобильных устройств, и если вам нужно сделать таблицу во всю ширину страницы, то в поле Ширина можно указывать в процентах, например 100%.
Удобный плагин-редактор, что и говорить! Но, как я уже говорил, есть и недостаток у него с некоторыми темами. Например, при сохранении страниц в некоторых темах добавляются лишние переносы строк и убираются они только в режиме HTML. Конечно, можно приспособиться, но, если не хватает внимательности, то можно это пропустить и в оформлении страниц будут лишние переносы строк.
Также данный плагин не «дружит» с некоторыми другими плагинами, которые добавляют свои кнопки в стандартную панель редактора для быстрого и удобного вывода функций.
Вот, к примеру, есть плагин WP-Опросы для удобного создания и ведения опросов на сайте. При установке он автоматически встраивает кнопку Вставить опрос:
При нажатии по кнопке появляется дополнительное окно, в котором можно просто поставить ID опроса и нажать ОК:
Опрос вставится в то место страницы, где стоял курсор.
А узнать ID опроса можно в разделе, где находятся все созданные опросы:
Достаточно удобно! Но, при добавлении расширенного редактора CKEditor данная кнопка не работает, т.е. не выводит всплывающее окно (по крайней мере, в некоторых темах).
Конечно, здесь тоже можно приспособиться, просто вставляя вручную код , где цифра 2, это ID опроса.
Этот пример лишь подчеркивает, что не все может быть гладко с разными плагинами. И если в них действительно есть необходимость, то нужно выбирать, какой подойдет и можно ли приспособиться к некорректной работе, если она появится.
И, что касается создания и вставки таблиц, так уж ли необходимо использовать плагины или можно воспользоваться другими способами?! Рассмотрим другие способы.
Сайты для создания таблиц. Генераторы таблиц
Чтобы не тратить время на поиск, установку и вникание в функционал того или иного плагина для создания таблиц можно воспользоваться онлайн сервисами, которые формируют необходимую таблицу и предоставляют код таблицы для сайта.
Вот один из таких бесплатных сайтов для создания таблиц: Онлайн генератор html таблиц для сайта:
Функционал здесь минимален, но зато можно сразу же заполнить необходимые ячейки, а также объединить нужные ячейки в таблице.
И еще обратим внимание на один русскоязычный онлайн генератор таблиц:
Как видно на снимке выше, в этом генераторе даже можно задавать цвет и доп. эффекты!
Если захочется поэкспериментировать с созданием таблиц и этих сервисов будет недостаточно то, вот еще один сервис для создания таблиц: HTML Table Generator. Этот генератор таблиц англоязычный, но разобраться в нем просто, а если еще пользоваться браузером с автопереводчиком, то вообще никаких проблем.
Как вставить таблицу Excel на сайт
Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer.
Суть работы сервиса простая. Нужно выделить и скопировать необходимую готовую таблицу или ее часть:
Далее, нужно зайти в вышеупомянутый сервис, вставить скопированную таблицу и сгенерировать html код таблицы:
Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:
И вставляем к себе на сайт.
Если таблица небольшая, то проблем не должно быть. Но если таблица широкая, в таком случае мы сталкиваемся с серьезным недостатком размещения таблиц на сайте, а именно с тем, что широкие таблицы могут не помещаться на странице.
Вот как это может выглядеть:
Как видно на снимке, таблица выходит на границы сайта.
Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.
Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?
Один из способов, это просто загружать готовые файлы на сайт и приводить ссылки для скачивания этих файлов с таблицами.
Но, есть более интересный способ, который рассмотрим далее.
Адаптивные таблицы для сайта через Гугл Диск
Загружаем в Гугл Диск нужный нам файл с таблицей (Создать -> Загрузить файл) и открываем доступ:
Включаем доступ по ссылке и копируем ее:
Теперь можно разместить на сайте, например, так:
Расписание Саратовского автовокзала (нажмите для просмотра)
Таким образом, и для пользователей удобно, — всегда на любом устройстве корректно будет отображаться таблица и скачать файл можно на компьютер (кстати, было бы уместно также в файле вставить адрес своего сайта для вирусного продвижения, если предполагается много скачиваний).
И для самого владельца сайта использование Гугл Диска делает удобным добавление таблиц на сайт, ведь проще создать сложную таблицу в Excelе, чем «мучится» с их созданием на сайте с помощью разных кодов html.
Более того Гугл дает возможность использовать не просто ссылки на скачивание файлов, но также можно таблицы вставлять прямо на страницы сайта.
Для этого нужно зайти в файл, закачанный в Гугл, и в верхней части экрана выбрать функцию Открыть в приложении «Google»:
Заходим в Меню -> Публикация в Интернете:
Копируем предоставленный код во вкладке Встроить:
И размещаем на своем сайте в нужно месте.
Примечание: Единственное, что еще можно добавить, это размеры width=»100%» height=»480″, как на снимке ниже, чтобы корректно отображалась таблица на сайте.
Итак, размещаем код таблицы для сайта на странице и вот что получается (воспользуйтесь вкладками и областями прокруток):
Вот это уже очень даже красивая таблица получается! И пользоваться удобно, и в случае необходимости ее можно открыть в отдельном окне и вообще даже скачать к себе на компьютер.
Улучшаем использование таблиц
Если на одной странице необходимо вставить много таблиц, то для более удобного их использования посетителями можно воспользоваться плагином Shortcodes Ultimate и заключить таблицы в аккордион:
Пример таблицы во всю ширину и высоту 480 рх
Пример таблицы с шириной 90% и высотой 480 рх
Пример таблицы с шириной 80% и высотой 200 рх
Адаптивные таблицы для сайта через Onedrive
По аналогии сервиса Гугл Диск, встроить таблицу на сайт можно с помощью сервиса от Майкрософт Onedrive.
Загружаем таблицу, правой кнопкой мыши на файл, — выбираем Внедрение и берем для сайта код таблицы (1):
Можно также воспользоваться дополнительными настройками внешнего вида таблицы (2):
Вот как выглядит встроенная таблица на сайте с помощью сервиса Onedrive:
Конечно, встраивание таблиц с помощью сервиса Onedrive уступает Гуглу из-за нестабильности и некорректного отображения некоторых элементов таблиц, но, возможно, в будущем Майкрософт улучшится в этом отношении.
Подводя итоги, можно отметить, что вариантов для создания и вставки таблиц на сайте существует достаточное кол-во, так что для конкретного случая вполне можно подобрать свой вариант. Если же вы знаете или пользуетесь каким-то другим эффективным способом размещения таблиц на сайте, — делитесь опытом в комментариях!
Если у вас не получается самостоятельно добавить таблицу на свой сайт, можете обратиться к нам. За небольшое вознаграждение с вашей стороны мы добавим на ваш сайт наиболее подходящий вариант таблицы.
Создание таблицы в HTML | HTML/xHTML
В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.
Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.
Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.
Итак, как сделать таблицу в HTML?
Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:
<body> <table> <tr> <td>Столбец 1</td> <td>Столбец 2</td> <td>Столбец 3</td> </tr> </table> </body>
В окне браузера только что созданная таблица выглядит следующим образом:
Таблица начинается с тега <table> и заканчивается парным ему </table>. Всё содержимое таблицы описывается сверху вниз по строкам, каждая из которых начинается с тега <tr> и заканчивается </tr>.
Ячейки строки описываются слева направо с помощью тегов <td> и </td>. В ячейку вы можете поместить как текст, так и графические файлы и даже другие таблицы.
По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега <table>. Однако, иногда браузеры такую границу отображают по-разному, поэтому лучше данный процесс возложить на работу со стилями:
<body> <table border="1"> <tr> <td>Столбец 1</td> <td>Столбец 2</td> <td>Столбец 3</td> </tr> </table> </body>
Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:
- background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
- bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.
Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.
Например:
<table border="1" bgcolor="green">
<tr bgcolor="blue">
<td><font color="white">Ячейка 1</font></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>В HTML отступы в таблице задаются с помощью тега <table>:
- cellspacing — расстояние между границами соседних ячеек;
- cellpading — расстояние между содержимым и границей ячейки.
Например:
<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr bgcolor="blue">
<td><font color="white">Ячейка 1</font></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td>
background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>Визуальное отображение данного кода в браузере таково:
Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.
Параметр align может иметь следующие значения:
- left — выравнивание по левой границе;
- right — выравнивание по правой границе;
- center — выравнивание по центру.
Параметр valign может иметь такие значения:
- bottom — выравнивание по нижней границе;
- top — выравнивание по верхней границы;
- middle — выравнивание посередине.
Пример:
<table border= "1"> <td>Текст 1</td> <td align="right" valign="top">Текст 2</td> </table>
Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.
Например:
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table cellpadding="60" cellspacing="4" border="1">
<tr>
<td>
Текст таблицы
</td>
</tr>
</table>
</td>
</tr>
</table>У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега <td>.
Например:
<table border= "1">
<tr align="left">
<td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td>
<td> Содержимое 2 ячейки </td> </tr>
<tr align="right">
<td> Содержимое 3 ячейки </td>
<td> Содержимое 4 ячейки </td> </tr>
</table>Дополнительными атрибутами в данном случае являются:
- width — ширина;
- height — высота;
- alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
- title — подпись к картинке;
- align — горизонтальное выравнивание;
- valign — вертикальное выравнивание.
Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.
Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.
Объединение столбцов одной строчки выглядит так:
<table border="1"> <tr> <td colspan="3">Текст 2</td> </tr> <tr> <td>Текст 2</td> <td>Текст 3</td> <td>Текст 4</td> </tr> </table>
У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:
<table border="1"> <tr> <td rowspan="3">Текст 1</td> <td>Текст 2</td> </tr> <tr> <td>Текст 3</td> </tr> <tr> <td>Текст 4</td> </tr> </table>
Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.
Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.
Одним из наиболее распространенных генераторов таблиц является сервис http://www.2createawebsite.com/build/table_generator.html. ОН является зарубежным, настроек для генерации таблицы здесь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.
Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:
Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.
Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:
Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.
Если вы решили воспользоваться услугами генератора таблиц, стоит внимательно подойти к выбору подходящего вам сервиса, опробовав самые популярные из них и выбрав наилучший.
Желаем успехов!
телеграм канал. Подпишись, будет полезно!
Табличная HTML верстка сайта: пример и применение
При таком типе вёрстки элементы сайта располагаются по ячейкам. Создаётся файл-шаблон с разметкой и используется как основа для всех остальных страниц. Фактически от файла к файлу меняется только основной контент. Шапка сайта, его низ и меню берутся из уже готового шаблона и обычно остаются неизменными.
Табличная вёрстка проста и во всех браузерах выглядит одинаково. Но состоящие из таблиц страницы много весят, медленно загружаются и содержат избыточный код. К тому же структура таблиц позволяет создать только строгий дизайн.
Вёрстка этого типа делается просто: в теле документа создаётся таблица (и ничего, кроме неё), в ячейки которой добавляется весь контент. Вёрстка потому и называется табличной, что вся страница состоит из таблиц, а вся выводимая информация находится внутри их ячеек. Даже область с основным содержимым страницы (например, со статьёй) — это всего лишь ячейка, текст из которой отображается на экране.
HTML-документ не обязательно должен состоять из одной таблицы — их можно вкладывать друг в друга, получая более интересное оформление.
Теги для создания таблиц были рассмотрены в соответствующей статье. Ниже приведён пример их использования.
Итак, пример табличной вёрстки:
<!DOCTYPE html>
<html>
<head>
<title>Табличная вёрстка</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
</tr>
<tr>
<th>навигация</th>
<th>заголовок</th>
</tr>
<tr>
<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li>
</ul>
</td>
<td>контент</td>
</tr>
<tr>
<td colspan=2>Низ сайта (баннеры, счетчики, информация)</td>
</tr>
</table>
</body>
</html>Если поместить этот код в тело HTML-документа и открыть получившийся файл в браузере, то страница будет выглядеть так:
Вот и вся разметка. Для создания страниц вам остаётся только сделать копию файла и вместо отображаемых слов вставить свой контент. Так, копируя файлы и редактируя содержащийся в ячейках текст, вы можете создать сколь угодно большой веб-сайт с табличной вёрсткой.
Но взглянем на код с пояснениями.
<table border="1" cellpadding="0" cellspacing="0">
- Тег <table> открывает таблицу.
- Атрибут border задаёт толщину табличных рамок.
- Cellspacing устанавливает расстояние между ячейками. В данном случае оно сделано нулевым, чтобы таблица не расползалась.
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
- <th> — открывающий тег ячейки заголовка таблицы. В отличие от других, текст в этой ячейке будет выровнен по центру и выделен полужирным.
- Colspan — атрибут, значение которого определяет, сколько ячеек по горизонтали относительно других строк текущий элемент будет занимать.
- </th> закрывает ячейку.
- Текст между тегами <th> и </th> — это и есть содержимое ячейки, ради него всё и делалось.
</tr> — конец строки.
<th>навигация</th> <th>заголовок</th>
Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% — под основной контент.
<td> <ul> <li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li> <li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li> <li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li> </ul>
Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов <ul> </ul> расположен список ссылок. На его основе можно сделать меню сайта.
<tr><td colspan=2>Низ сайта (баннеры, счетчики, информация)</td></tr>
В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка — эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.
Таким образом, для создания табличной вёрстки сайта, содержащего все основные элементы (шапку, низ, меню, контент страницы) понадобилась таблица, состоящая из четырёх строк и шести ячеек (строки головы и ног сайта содержат по одному элементу).
На современных сайтах практикуется блочная верстка, а таблицы уже вчерашний день.
Полезные ссылки:
HTML-таблиц
HTML-таблицы позволяют веб-разработчикам размещать данные в строках и
столбцы.
Пример
| Компания | Контакт | Страна |
|---|---|---|
| Альфредс Футтеркисте | Мария Андерс | Германия |
| Торговый центр Moctezuma | Франциско Чанг | Мексика |
| Эрнст Гендель | Роланд Мендель | Австрия |
| Island Trading | Хелен Беннет | Великобритания |
| Винные погреба Смеющегося Вакха | Йоши Таннамури | Канада |
| Magazzini Alimentari Riuniti | Джованни Ровелли | Италия |
Попробуй сам »
Определить таблицу HTML
Тег
| . Каждые данные / ячейка таблицы определяются с помощью а |
|---|
Попробуй сам »
Примечание: Элементы
Они могут содержать
всевозможные элементы HTML; текст, изображения, списки, другие таблицы и т. д.
Таблица HTML — Добавить границу
Чтобы добавить границу к таблице, используйте свойство CSS border :
Не забудьте определить границы как для таблицы, так и для ячеек таблицы.
Таблица HTML — свернутые границы
Чтобы границы сжимались в одну границу, добавьте CSS border-collapse
недвижимость:
Пример
table, th, td {
border: 1px сплошной черный;
граница-коллапс: коллапс;
}
Попробуй сам »
Таблица HTML — Добавить заполнение ячеек
Заполнение ячеек указывает расстояние между содержимым ячейки и ее границами.
Если вы не укажете заполнение, ячейки таблицы будут отображаться без заполнения.
Чтобы установить отступ, используйте свойство заполнения CSS :
Таблица HTML - заголовки с выравниванием по левому краю
По умолчанию заголовки таблиц выделяются жирным шрифтом и выравниваются по центру.
Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :
Таблица HTML - Добавить интервал между границами
Расстояние между границами определяет расстояние между ячейками.
Чтобы установить интервал границ для таблицы, используйте свойство CSS border-spacing :
Примечание: Если таблица имеет свернутые границы, border-spacing не действует.
Таблица HTML - ячейка, охватывающая множество столбцов
Чтобы ячейка занимала более одного столбца, используйте атрибут colspan :
Пример
<таблица>
Попробуй сам "
Таблица HTML - ячейка, занимающая множество строк
Чтобы сделать ячейку более одной строки, используйте атрибут rowspan :
Пример
| Имя: | Билл Гейтс |
|---|---|
| Телефон: | 55577854 |
| 55577855 |
Попробуй сам "
Таблица HTML - Добавить подпись
Чтобы добавить заголовок к таблице, используйте тег
Пример
| Месяц | Экономия |
|---|---|
| Январь < / td> | 100 долларов США |
| февраль | 50 долларов США |
Попробуй сам "
Примечание: Тег
.
Особый стиль для одного стола
Чтобы определить специальный стиль для одной конкретной таблицы, добавьте id
атрибут к таблице:
Пример
<таблица>
Имя Фамилия Возраст Ева Джексон 94
Теперь вы можете определить специальный стиль для этой таблицы:
# t01 {
ширина: 100%;
цвет фона: # f1f1c1;
}
Попробуй сам "
И добавьте еще стилей:
# t01 tr: nth-child (четный) {
цвет фона: #eee;
}
# t01 tr: nth-child (нечетный) {
цвет фона: #fff;
}
# t01 th {
цвет: белый;
цвет фона: черный;
}
Попробуй сам "
Краткое содержание главы
- Используйте элемент HTML
для определения таблицы- Используйте элемент HTML
, чтобы определить строку таблицы- Используйте элемент HTML
для определения данных таблицы- Используйте элемент HTML
для определения заголовка таблицы- Используйте элемент HTML
- Используйте свойство CSS
border , чтобы определить границу - Используйте свойство CSS
border-collapse , чтобы свернуть границы ячеек - Используйте свойство CSS
padding , чтобы добавить отступ к ячейкам - Используйте свойство CSS
text-align для выравнивания текста ячейки - Используйте свойство CSS
border-spacing , чтобы установить интервал между ячейками - Используйте атрибут
colspan , чтобы ячейка охватывала несколько столбцов - Используйте атрибут
rowspan , чтобы ячейка занимала много строк - Используйте атрибут
id , чтобы однозначно определить одну таблицу
Упражнения HTML
Теги таблицы HTML
Тег Описание <таблица> Определяет таблицу Определяет ячейку заголовка в таблице Определяет строку в таблице Определяет ячейку в таблице <заголовок> Определяет заголовок таблицы Задает группу из одного или нескольких столбцов в таблице для форматирования. Задает свойства столбца для каждого столбца в элементе <заголовок> Группирует содержимое заголовка в таблицу Группирует содержимое тела в таблицу <фут> Группирует содержимое нижнего колонтитула в таблице
.
таблиц стилей CSS
Внешний вид таблицы HTML можно значительно улучшить с помощью CSS:
Компания Контакт Страна Альфредс Футтеркисте Мария Андерс Германия Berglunds snabbköp Кристина Берглунд Швеция Торговый центр Moctezuma Франциско Чанг Мексика Эрнст Гендель Роланд Мендель Австрия Island Trading Хелен Беннет Великобритания Кениглих Эссен Филип Крамер Германия Винные погреба Смеющегося Вакха Йоши Таннамури Канада Magazzini Alimentari Riuniti Джованни Ровелли Италия
Попробуйте сами »
Границы стола
Чтобы указать границы таблицы в CSS, используйте свойство border .
В приведенном ниже примере указана черная рамка для элементов
, и : Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это
потому что и таблица, и элементы
и имеют отдельные границы.
Свернуть границы таблицы
Свойство border-collapse устанавливает, будут ли границы таблицы
должен быть свернут в одну рамку:
Пример
Таблица
{
граница-коллапс: коллапс;
}
стол, тыс, тд
{
граница: сплошной черный 1px;
}
Попробуй сам "
Если вам нужна только рамка вокруг стола, укажите только свойство border для
<таблица>:
Ширина и высота стола
Ширина и высота таблицы определяются свойствами ширина и высота .
В приведенном ниже примере ширина таблицы устанавливается равной 100%, а высота
элементов до 50 пикселей:
Горизонтальное выравнивание
Свойство text-align устанавливает горизонтальное выравнивание (например, по левому, правому или центру).
содержимого в
или . По умолчанию содержимое элементов
выравнивается по центру, а
содержимое элементов выравнивается по левому краю. В следующем примере текст в элементах
выравнивается по левому краю:
Вертикальное выравнивание
Свойство vertical-align устанавливает вертикальное выравнивание (например, по верхнему, нижнему или среднему)
содержимого в
или . По умолчанию вертикальное выравнивание содержимого в таблице среднее (для обоих
и элементы). В следующем примере устанавливается вертикальное выравнивание текста по низу для элементов
:
Прокладка стола
Чтобы контролировать расстояние между границей и содержимым таблицы, используйте
обивка свойство на
Элементы
и :
Разделители горизонтальные
Имя Фамилия Экономия Петр Грифон $ 100 Лоис Грифон $ 150 Джо Swanson $ 300
Добавьте свойство border-bottom в
и для горизонтальных разделителей:
Подъемный стол
Используйте селектор : hover на
, чтобы выделить строки таблицы с помощью мыши
больше: Имя Фамилия Экономия Петр Грифон $ 100 Лоис Грифон $ 150 Джо Swanson $ 300
Столы полосатые
Имя Фамилия Экономия Петр Грифон $ 100 Лоис Грифон $ 150 Джо Swanson $ 300
Для таблиц с полосками зебры используйте селектор nth-child () и добавьте цвет фона ко всем четным (или нечетным) строкам таблицы:
Цвет стола
В примере ниже указан цвет фона.
и цвет текста
элементы: Имя Фамилия Экономия Петр Грифон $ 100 Лоис Грифон $ 150 Джо Swanson $ 300
Адаптивный стол
В отзывчивой таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком
маленький для отображения полного содержания:
Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Джилл Смит 50 50 50 50 50 50 50 50 50 50 50 50 Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94 Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67
Добавьте элемент контейнера (например,
) с overflow-x: auto вокруг элемента, чтобы сделать его отзывчивым: Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если задано «overflow: scroll»).
Другие примеры
Сделать красивый стол
Этот пример демонстрирует, как создать красивую таблицу.
Установить позицию заголовка таблицы
В этом примере показано, как разместить заголовок таблицы.
Проверьте себя упражнениями!
Свойства таблицы CSS
Имущество Описание граница Устанавливает все свойства границы в одном объявлении граница-развал Указывает, следует ли сворачивать границы таблицы расстояние между границами Определяет расстояние между границами соседних ячеек со стороны подписи Задает размещение заголовка таблицы пустые ячейки Указывает, следует ли отображать границы и фон в пустых ячейках таблицы стол-макет Задает алгоритм макета, который будет использоваться для таблицы
.
Основы работы с таблицами HTML - Изучите веб-разработку
Эта статья знакомит вас с HTML-таблицами, охватывающими самые основы, такие как строки и ячейки, заголовки, создание ячеек, охватывающих несколько столбцов и строк, а также то, как сгруппировать все ячейки в столбце для целей стилизации.
Предварительные требования: Основы HTML (см. Введение в HTML). Цель: Для базового знакомства с таблицами HTML.
Что такое стол?
Таблица - это структурированный набор данных, состоящий из строк и столбцов ( табличных данных ). Таблица позволяет вам быстро и легко найти значения, которые указывают на какую-то связь между различными типами данных, например, человеком и его возрастом, или днем недели, или расписанием местного плавательного бассейна.
Таблицы
очень широко используются в человеческом обществе и использовались в течение долгого времени, о чем свидетельствует этот документ переписи населения США от 1800:
Поэтому неудивительно, что создатели HTML предоставили средства для структурирования и представления табличных данных в сети.
Как работает стол?
Особенность стола в том, что он жесткий. Информация легко интерпретируется путем создания визуальных ассоциаций между заголовками строк и столбцов. Посмотрите, например, на приведенную ниже таблицу и найдите газового гиганта Юпитера с 62 лунами. Вы можете найти ответ, связав соответствующие заголовки строк и столбцов.
Данные о планетах нашей солнечной системы (Факты о планетах взяты из Таблицы данных о планетах НАСА - Метрика. Имя Масса (10 24 кг) Диаметр (км) Плотность (кг / м 3 ) Плотность (м / с 2 ) Продолжительность светового дня (часы) Расстояние от Солнца (10 6 км) Средняя температура (° C) Количество лун Банкноты Планеты Земли Меркурий 0.330 4 879 5427 3,7 4222,6 57,9 167 0 Ближайший к Солнцу Венера 4,87 12 104 5243 8,9 2802,0 108,2 464 0 Земля 5,97 12 756 5514 9.8 24,0 149,6 15 1 Наш мир Марс 0,642 6,792 3933 3,7 24,7 227,9 -65 2 Красная планета планет Юпитера Газовые гиганты Юпитер 1898 142 984 1326 23.1 9,9 778,6 -110 67 Самая большая планета Сатурн 568 120 536 687 9,0 10,7 1433,5 -140 62 Ледяные гиганты Уран 86,8 51,118 1271 8,7 17.2 2872,5 -195 27 Нептун 102 49 528 1638 11,0 16,1 4495,1 -200 14 Карликовые планеты Плутон 0,0146 2,370 2095 0,7 153,3 5906.4 -225 5 Рассекречен как планета в 2006 году, но это остается спорным вопросом.
Если все сделано правильно, даже слепые люди могут интерпретировать табличные данные в таблице HTML - успешная таблица HTML должна улучшить впечатление как зрячих, так и слабовидящих пользователей.
Стилизация стола
Вы также можете посмотреть живой пример на GitHub! Вы заметите, что таблица там выглядит немного более читабельной - это потому, что таблица, которую вы видите выше на этой странице, имеет минимальный стиль, тогда как в версии GitHub применен более значительный CSS.
Не обольщайтесь; Чтобы таблицы были эффективны в Интернете, вам необходимо предоставить некоторую информацию о стилях с помощью CSS, а также хорошую прочную структуру с помощью HTML. В этом модуле мы сосредоточены на части HTML; чтобы узнать о части CSS, вы должны посетить нашу статью о таблицах стилей после того, как вы закончите здесь.
В этом модуле мы не будем сосредотачиваться на CSS, но мы предоставили вам минимальную таблицу стилей CSS, которая сделает ваши таблицы более читабельными, чем стандартные, которые вы получаете без стилей.Вы можете найти здесь таблицу стилей, а также можете найти HTML-шаблон, который применяет эту таблицу стилей - вместе они станут хорошей отправной точкой для экспериментов с HTML-таблицами.
Когда НЕ следует использовать HTML-таблицы?
Для табличных данных следует использовать
HTML-таблицы - для этого они и предназначены. К сожалению, многие люди использовали таблицы HTML для компоновки веб-страниц, например одна строка для заголовка, одна строка для столбцов содержимого, одна строка для нижнего колонтитула и т. д.Вы можете найти более подробную информацию и пример в разделе «Макеты страниц» нашего учебного модуля по специальным возможностям. Это часто использовалось, потому что поддержка CSS в браузерах была ужасной; макеты таблиц в наши дни встречаются гораздо реже, но вы все равно можете встретить их в некоторых уголках сети.
Короче говоря, использование таблиц для разметки, а не методов разметки CSS - плохая идея. Основные причины следующие:
- Макетные таблицы снижают доступность для пользователей с ослабленным зрением. : Программы чтения с экрана, используемые слепыми, интерпретируют теги, существующие на HTML-странице, и зачитывают содержимое для пользователя.Поскольку таблицы не являются подходящим инструментом для разметки, а разметка более сложна, чем при использовании методов разметки CSS, вывод программ для чтения с экрана будет сбивать с толку их пользователей.
- Таблицы создают суп тегов : Как упоминалось выше, макеты таблиц обычно включают более сложные структуры разметки, чем надлежащие методы макета. Это может привести к тому, что код будет сложнее писать, поддерживать и отлаживать.
- Таблицы не реагируют автоматически : при использовании правильных контейнеров макета (например,
) их ширина по умолчанию равна 100%. их родительского элемента.Таблицы, с другой стороны, по умолчанию имеют размер в соответствии с их содержимым, поэтому необходимы дополнительные меры, чтобы стиль макета таблицы эффективно работал на различных устройствах. Активное обучение: создание вашей первой таблицы
Мы достаточно поговорили о теории таблиц, поэтому давайте погрузимся в практический пример и создадим простую таблицу.
- Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новом каталоге на вашем локальном компьютере.
- Содержимое каждой таблицы заключено в эти два тега:
- Самым маленьким контейнером внутри таблицы является ячейка таблицы, которая создается элементом
(«td» означает «данные таблицы»). Добавьте в теги таблицы следующее: Привет, я твоя первая сотовая.
- Если нам нужна строка из четырех ячеек, нам нужно скопировать эти теги трижды.Обновите содержимое вашей таблицы, чтобы оно выглядело так:
Привет, я твоя первая ячейка.
Я твоя вторая камера.
Я твоя третья камера.
Я твоя четвертая камера.
Как вы увидите, ячейки не размещаются друг под другом, а автоматически выравниваются друг с другом в одной строке. Каждый элемент
создает одну ячейку, и вместе они составляют первую строку.Каждая добавляемая ячейка увеличивает длину строки. Чтобы остановить рост этой строки и начать размещение последующих ячеек во второй строке, нам нужно использовать элемент
(«tr» означает «строка таблицы»). Давайте сейчас исследуем это.- Поместите четыре ячейки, которые вы уже создали, в теги
, например:
Привет, я твоя первая ячейка.
Я твоя вторая камера.
Я твоя третья камера.
Я твоя четвертая камера.
- Теперь вы создали одну строку, попробуйте сделать еще одну или две - каждая строка должна быть заключена в дополнительный элемент
, при этом каждая ячейка содержится в . В результате должна получиться таблица, которая выглядит примерно так:
Привет, я твой первый сотовый. Я твоя вторая камера. Я твоя третья камера. Я твоя четвертая камера. Вторая строка, первая ячейка. Ячейка 2. Ячейка 3. Ячейка 4.
Теперь давайте обратим наше внимание на заголовки таблиц - специальные ячейки, которые идут в начале строки или столбца и определяют тип данных, которые содержит строка или столбец (в качестве примера см. Ячейки «Человек» и «Возраст» в первый пример, показанный в этой статье). Чтобы проиллюстрировать, почему они полезны, взгляните на следующий пример таблицы.Сначала исходный код:
<таблица>
& nbsp;
Клоки
Флор
Элла
Хуан
Порода
Джек Рассел
Пудель
Уличная собака
Кокер-спаниель
Возраст
16
9
10
5
Владелец
Свекровь
Я
Я
Невестка
Привычки в еде
Ест все, что осталось
Кусочки еды
Сытный любитель
Будет есть, пока не взорвется
Фактическая визуализированная таблица:
Клоки Флор Элла Хуан Порода Джек Рассел Пудель Уличная собака Кокер-спаниель Возраст 16 9 10 5 Владелец Свекровь Я Я Невестка Привычки в еде Съедает все, что осталось Клев в еде Сытный поесть Будет есть, пока не взорвется
Проблема здесь в том, что, хотя вы можете понять, что происходит, не так просто сделать перекрестные ссылки на данные, как могло бы быть.Если бы заголовки столбцов и строк чем-то выделялись, было бы намного лучше.
Попробуем улучшить эту таблицу.
- Сначала создайте локальную копию наших файлов dog-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример Dogs, который вы видели выше.
- Чтобы распознать заголовки таблицы как заголовки, как визуально, так и семантически, вы можете использовать элемент
(th означает «заголовок таблицы»).Это работает точно так же, как , за исключением того, что обозначает заголовок, а не обычную ячейку. Войдите в свой HTML и измените все элементы , окружающие заголовки таблицы, на элементы .- Сохраните HTML-код и загрузите его в браузер, и вы должны увидеть, что заголовки теперь выглядят как заголовки.
Мы уже частично ответили на этот вопрос - легче найти данные, которые вы ищете, когда заголовки четко выделяются, а дизайн в целом выглядит лучше.
Примечание : Заголовки таблиц имеют некоторый стиль по умолчанию - они выделены жирным шрифтом и центрированы, даже если вы не добавляете свой собственный стиль к таблице, чтобы помочь им выделиться.
Заголовки таблиц
также имеют дополнительное преимущество - наряду с атрибутом области видимости (о котором мы узнаем в следующей статье), они позволяют сделать таблицы более доступными, связывая каждый заголовок со всеми данными в одной строке или столбец. Затем программы чтения с экрана могут считывать сразу всю строку или столбец данных, что очень полезно.
Разрешение ячейкам занимать несколько строк и столбцов
Иногда нам нужно, чтобы ячейки занимали несколько строк или столбцов. Возьмем следующий простой пример, в котором показаны названия обычных животных. В некоторых случаях мы хотим показать имена самцов и самок рядом с именем животного. Иногда мы этого не делаем, и в таких случаях мы просто хотим, чтобы имя животного охватывало всю таблицу.
Начальная разметка выглядит так:
<таблица>
Животные
Бегемот
Лошадь
Кобыла
Жеребец
Крокодил
Курица
Курица
Петух
Но результат не дает нам того, что мы хотим:
Животные Бегемот Лошадь Mare Жеребец Крокодил Цыпленок Курица Петух
Нам нужен способ, чтобы «Животные», «Бегемот» и «Крокодил» занимали два столбца, а «Лошадь» и «Курица» — занимали две строки вниз.К счастью, заголовки и ячейки таблицы имеют атрибуты colspan и rowspan , которые позволяют нам делать именно эти вещи. Оба принимают безразмерное числовое значение, равное количеству строк или столбцов, которые вы хотите охватить. Например, colspan = "2" превращает ячейку в два столбца.
Давайте использовать colspan и rowspan , чтобы улучшить эту таблицу.
- Сначала создайте локальную копию наших animals-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример животных, который вы видели выше.
- Затем используйте
colspan , чтобы разделить «Животные», «Бегемот» и «Крокодил» на два столбца. - Наконец, используйте
rowspan , чтобы сделать «Horse» и «Chicken» на двух строках. - Сохраните и откройте свой код в браузере, чтобы увидеть улучшения.
Общий стиль колонн
Есть еще одна особенность, о которой мы расскажем вам в этой статье, прежде чем мы продолжим.В HTML есть метод определения информации о стилях для всего столбца данных в одном месте — элементы
или в столбце или использовать сложный селектор например : nth-child () . Возьмем следующий простой пример:
<таблица>
Данные 1
Данные 2
Калькутта
Оранжевый
Роботы
Джаз
Что дает нам следующий результат:
Данные 1 Данные 2 Калькутта Оранжевый Роботы Джаз
Это не идеально, так как мы должны повторить информацию о стилях для всех трех ячеек в столбце (мы, вероятно, установили бы класс для всех трех в реальном проекте и укажем стиль в отдельном таблица стилей).Вместо этого мы можем указать информацию один раз в элементе
. Мы могли бы создать тот же эффект, что и выше, указав нашу таблицу следующим образом: <таблица>
Данные 1
Данные 2
Калькутта
Оранжевый
Роботы
Джаз
Фактически мы определяем два «столбца стиля», один из которых определяет информацию о стиле для каждого столбца.Мы не стилизуем первый столбец, но мы все равно должны включить пустой элемент
Если бы мы хотели применить информацию о стилях к обоим столбцам, мы могли бы просто включить один элемент
<группа>
Так же, как colspan и rowspan , span принимает безразмерное числовое значение, указывающее количество столбцов, к которым вы хотите применить стиль.
Активное обучение: colgroup и col
А теперь пора попробовать самому.
Ниже вы можете увидеть расписание учителя иностранных языков. В пятницу у нее новый класс, в котором весь день преподается голландский, но она также преподает немецкий несколько уроков по вторникам и четвергам. Она хочет выделить столбцы, содержащие дни, в которые она преподает.
Создайте таблицу заново, выполнив следующие действия.
- Сначала сделайте копию нашего расписания на местном уровне.html в новом каталоге на вашем локальном компьютере. HTML-код содержит ту же таблицу, которую вы видели выше, без информации о стиле столбца.
- Добавьте элемент
, в который вы можете добавить элементы
- Первые два столбца необходимо оставить без стиля.
- Добавьте цвет фона к третьему столбцу. Значение атрибута стиля
-background-color: # 97DB9A;- Установите отдельную ширину для четвертого столбца.Значение атрибута стиля
равноwidth: 42px;- Добавьте цвет фона к пятому столбцу. Значение атрибута стиля
-background-color: # 97DB9A;- Добавьте другой цвет фона и рамку к шестому столбцу, чтобы обозначить, что это особенный день и что она ведет новый класс. Значения атрибута стиля
:background-color: # DCC48E; граница: сплошная 4px # C1437A;- Последние два дня - свободные, поэтому просто установите для них не цвет фона, а заданную ширину; значение атрибута стиля
равноwidth: 42px;Посмотрите, как у вас получается на примере.Если вы застряли или хотите проверить свою работу, вы можете найти нашу версию на GitHub как timetable-fixed.html (также посмотрите ее вживую).
Сводка
Это почти завершает основы HTML-таблиц. В следующей статье мы рассмотрим несколько более продвинутых функций таблиц и начнем думать, насколько они доступны для людей с ослабленным зрением.
.
: Элемент Table - веб-технологии для разработчиков
Элемент HTML
представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Категории содержимого Расход Разрешенное содержание В этом порядке:
- необязательный элемент
- ноль или более
- необязательный элемент
,- либо одно из следующих:
- ноль или более
элементов- один или несколько элементов
- необязательный элемент
Отсутствие тега Нет, и начальный, и конечный тег являются обязательными. Допущенные родители Любой элемент, который принимает содержимое потока Неявная роль ARIA столРазрешенные роли ARIA Любая Интерфейс DOM HTMLTableElement - один или несколько элементов
- либо одно из следующих:
Атрибуты
Этот элемент включает глобальные атрибуты.
Устаревшие атрибуты
-
выровнять Этот перечислимый атрибут указывает, как таблица должна быть выровнена внутри содержащего документа.Может иметь следующие значения:
-
слева: таблица отображается в левой части документа; -
центр: таблица отображается в центре документа; -
справа: таблица отображается в правой части документа.
Установите
margin-leftиmargin-righttoautoormarginto0 auto, чтобы добиться эффекта, аналогичного атрибуту align.-
-
bgcolor Цвет фона таблицы. Это шестизначный шестнадцатеричный код RGB с префиксом
#. Также можно использовать одно из предопределенных цветовых словечек.Для достижения аналогичного эффекта используйте свойство CSS
background-color.-
граница Этот целочисленный атрибут определяет в пикселях размер рамки, окружающей таблицу.Если установлено значение 0, атрибут кадра
устанавливается на недействительный.Для достижения аналогичного эффекта используйте сокращенное свойство CSS
border.-
подкладка Этот атрибут определяет расстояние между содержимым ячейки и ее границей, отображается или нет. Если длина cellpadding определена в пикселях, это пространство размером в пиксель будет применено ко всем четырем сторонам содержимого ячейки. Если длина определяется с использованием процентного значения, содержимое будет центрировано, а общее вертикальное пространство (вверху и внизу) будет представлять это значение.То же верно и для всего горизонтального пространства (слева и справа).
Для достижения аналогичного эффекта примените свойство
border-collapseк элементусо значением collapse, а свойство
padding- к элементам. расстояние между ячейкамиЭтот атрибут определяет размер пространства между двумя ячейками в процентах или пикселях.Атрибут применяется как по горизонтали, так и по вертикали к пространству между верхом таблицы и ячейками первой строки, слева от таблицы и первого столбца, справа от таблицы и последнего столбца и нижней части таблицы. таблица и последняя строка.
Для достижения аналогичного эффекта примените свойство
border-spacingк элементу.
border-spacingне имеет никакого эффекта, если дляborder-collapseустановлено значение collapse.рамаЭтот перечислимый атрибут определяет, какая сторона кадра, окружающего таблицу, должна отображаться.
Для достижения аналогичного эффекта используйте свойства
border-styleиborder-width.правилаЭтот перечислимый атрибут определяет, где правила, то есть строки, должны отображаться в таблице.Может иметь следующие значения:
-
нет, что означает, что правила отображаться не будут; это значение по умолчанию; -
групп, что приведет к отображению правил между группами строк (определенными элементами,и) и между группами столбцов (определеннымистроки, что приведет к отображению правил между строками;columns, что приведет к отображению правил между столбцами;все, что приведет к отображению правил между строками и столбцами.Для достижения аналогичного эффекта примените свойство
,borderк соответствующим элементам,,сводка- Этот атрибут определяет альтернативный текст, который резюмирует содержимое таблицы. Вместо этого используйте элемент
ширинаЭтот атрибут определяет ширину таблицы.Вместо этого используйте свойство CSS
width.Примеры
Простой стол
<таблица>
Джон Самка Джейн Самка
Другие примеры
Простая таблица с заголовком
<таблица>Имя Фамилия Джон Самка Джейн Самка Таблица с thead, tfoot и tbody
<таблица>Содержание заголовка 1 Заголовок 2 Основной текст 1 Основной текст 2 Содержание нижнего колонтитула 1 Содержание нижнего колонтитула 2
Таблица с colgroup
<таблица>Страны Столицы Население Язык США Вашингтон, Д.С. 309 миллионов английский Швеция Стокгольм 9 миллионов шведский Таблица с colgroup и col
<таблица>Лайм Лимон Оранжевый Зеленый желтый Оранжевый Простая таблица с подписью
<таблица>Замечательная подпись Отличные данные стол { граница-коллапс: коллапс; интервал границы: 0 пикселей; } таблица, th, td { отступ: 5 пикселей; граница: сплошной черный 1px; }Проблемы доступности
Подписи
Предоставляя элемент
Это помогает людям ориентироваться с помощью вспомогательных технологий, таких как программы чтения с экрана, людям с нарушениями зрения и людям с когнитивными проблемами.
Объем строк и столбцов
Атрибут области действия в элементах заголовка является избыточным в простых контекстах, поскольку область видимости определена. Однако некоторые вспомогательные технологии могут не давать правильных выводов, поэтому указание области заголовка может улучшить взаимодействие с пользователем. В сложных таблицах область действия может быть указана так, чтобы предоставить необходимую информацию о ячейках, связанных с заголовком.
Пример
<таблица>
Названия и значения цветов Имя HEX HSLa RGBa Бирюзовый #51F6F6hsla (180, 90%, 64%, 1)rgba (81, 246, 246, 1)Золотарник #F6BC57hsla (38, 90%, 65%, 1)rgba (246, 188, 87, 1)Предоставление объявления
scope = "col"в элементепоможет описать, что ячейка находится наверху столбца.Предоставление объявления scope = "row"в элементепоможет описать, что ячейка является первой в строке. Сложные столы
Вспомогательные технологии, такие как программы чтения с экрана, могут испытывать трудности при синтаксическом анализе таблиц, которые настолько сложны, что ячейки заголовков невозможно связать строго горизонтально или вертикально. Обычно на это указывает наличие атрибутов
colspanиrowspan.В идеале рассмотрите альтернативные способы представления содержимого таблицы, включая разбиение ее на набор более мелких связанных таблиц, которые не должны полагаться на использование атрибутов
colspanиrowspan.Помимо помощи людям, использующим вспомогательные технологии, в понимании содержимого таблицы, это также может принести пользу людям с когнитивными проблемами, которые могут испытывать трудности с пониманием ассоциаций, описываемых макетом таблицы.Если таблица не может быть разбита на части, используйте комбинацию атрибутов
idизаголовков, чтобы программно связать каждую ячейку таблицы с заголовком (ами), с которым связана ячейка.Технические характеристики
Совместимость с браузером
Обновление данных о совместимости на GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Chrome для Android Firefox Opera для Android Safari на iOS Samsung Internet таблицаChrome
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0выровнятьХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0bgcolorХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0бордюрХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0обивка ячейкиХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0расстояние между ячейкамиХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0рамаХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0правилаХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0сводкаХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0ширинаХром
Полная поддержка
1Кромка
Полная поддержка
12Firefox
Полная поддержка
1IE
Полная поддержка
ДаOpera
Полная поддержка
ДаSafari
Полная поддержка
ДаWebView Android
Полная поддержка
1Chrome Android
Полная поддержка
18Firefox Android
Полная поддержка
4Опера Android
Полная поддержка
ДаSafari iOS
Полная поддержка
ДаSamsung Интернет Android
Полная поддержка
1.0Обозначение
-
Полная поддержка - Полная поддержка
- Устарело. Не для использования на новых сайтах.
- Устарело. Не для использования на новых сайтах.
См. Также
- Свойства CSS, которые могут быть особенно полезны для стилизации элемента
:
.