Таблицы
До того как мы перейдем к изучению разметки таблиц, давайте подведем итоги того, что мы уже изучили. Мы рассмотрели большой объем материала, начиная с того, как создать основную структуру HTML-документа и придать ему логический вид с помощью разметки текста, и заканчивая созданием различных видов списков.
Теперь обсудим тему таблиц. Прежде всего, давайте разберем, для чего они используются, а затем перейдем к рассмотрению основных элементов, которые составляют таблицы в разметке HTML.
Использование HTML-таблиц является необходимым в случаях, когда требуется представить данные на веб-странице в удобном формате с размещением информации в виде строк и столбцов. Таблицы могут быть полезны при создании различных элементов, таких как календари, расписания, статистика и даже просто организация информации. Важно отметить, что данные в таблицах могут быть разнообразными и не обязательно числовыми. Ячейки таблиц могут содержать как текстовую, так и графическую информацию, включая изображения и мультимедийные объекты.
Построение таблиц в HTML
На языке HTML таблицы строятся с помощью тегов <table> и </table>, как например чтобы создать список определений мы сначала создаем теги <dl> и </dl>. Создание таблиц и списков в HTML основано на блочном методе организации информации. Для этого используется контейнер, например, <table>, </table>, в который помещаются необходимые теги и данные для формирования таблицы. Этот подход позволяет структурировать содержимое точно и эффективно.
Вся информация в таблице размещена в строках, где каждая ячейка представляет собой заголовок или содержит контент. Давайте рассмотрим структуру таблицы на одном примере:
| строка | ячейка с заголовкомНазвание реки | ячейка с заголовкомОбщая длина, км | ячейка с заголовкомДлина в Казахстане, км |
| строка | ячейка с даннымиИртыш | ячейка с данными4248 | ячейка с данными1700 |
| строка | ячейка с даннымиЕсиль | ячейка с данными2450 | ячейка с данными1400 |
| строка | ячейка с даннымиТобол | ячейка с данными1600 | ячейка с данными800 |
Теперь вместо просто словесных обозначений каждой ячейки давайте представим это в виде элементов языка HTML.
| <tr> | <th>Название реки</th> | <th>Общая длина, км</th> | <th>Длина в Казахстане, км</th> | </tr> |
| <tr> | <td>Иртыш</td> | <td>4248</td> | <td>1700</td> | </tr> |
| <tr> | <td>Есиль</td> | <td>2450</td> | <td>1400</td> | </tr> |
| <tr> | <td>Тобол</td> | <td>1600</td> | <td>800</td> | </tr> |
На схеме показаны элементы, определяющие таблицу: строки(tr), ячейки(th) и данные таблицы(td).
tr – table row(строка таблицы)
th – table headers(заголовки таблицы)
td – table data(данные таблицы)
Содержание помещается в ячейках, окруженное дополнительными элементами, чтобы создать таблицу целостной. Вся информация сосредоточена в основном контенте, в то время как другие элементы дополняют его и делают таблицу более привлекательной.
Как вы могли заметить для создания строк в таблице необходимо использовать тег <tr>, который позволяет регулировать их количество. Однако для создания столбцов не существует отдельного тега, количество столбцов определяется числом ячеек в каждой строке. Это может вызвать некоторые сложности при построении таблицы в HTML. Например, если требуется таблица с тремя строками, достаточно вставить три элемента <tr>. Но если нужно три столбца, каждая строка должна содержать три элемента <td> или <th>. Чтобы создать таблицу выше, мы можем написать следующий код:
<table>
<tr>
<th>Название реки</th>
<th>Общая длина, км</th>
<th>Длина в Казахстане, км</th>
</tr>
<tr>
<td>Иртыш</td>
<td>4248</td>
<td>1700</td>
</tr>
<tr>
<td>Есиль</td>
<td>2450</td>
<td>1400</td>
</tr>
<tr>
<td>Тобол</td>
<td>1600</td>
<td>800</td>
</tr>
</table>
При создании таблицы тег <caption>, </caption> используется только один раз внутри таблицы для создания краткого описания или подсказки к ее содержимому. Он добавляет информацию рядом с таблицей и помогает пользователям лучше понять ее структуру и данные. Необходимо размещать тег <caption> сразу после открывающего тега <table>. Давайте рассмотрим на примере:
<table>
<caption>Реки Казахстана</caption>
<tr>
<th>Название реки</th>
<th>Общая длина, км</th>
<th>Длина в Казахстане, км</th>
</tr>
<tr>
<td>Иртыш</td>
<td>4248</td>
<td>1700</td>
</tr>
<tr>
<td>Есиль</td>
<td>2450</td>
<td>1400</td>
</tr>
</table>
В результате наша таблица будет иметь заголовок, который по умолчанию находится сверху посередине.
Реки Казахстана
| Название реки | Общая длина, км | Длина в Казахстане, км |
| Иртыш | 4248 | 1700 |
| Есиль | 2450 | 1400 |
Объединение ячеек
Одной из ключевых особенностей таблицы является возможность объединения ячеек, что позволяет расширить их размеры и охватить несколько строк или столбцов одновременно.
Создание сложных табличных структур предоставляет широкие возможности, однако они могут быть сложными для восприятия из-за непростой разметки. Для объединения заголовков или ячеек с данными используется атрибут colspan или rowspan, о чем будет рассказано далее.
Объединение столбцов
Для объединения столбцов в таблице используется атрибут colspan в элементах <td> или <th>. Этот атрибут позволяет расширить ячейку вправо, охватывая сразу несколько последующих. В нашем случае они объединяются для создания заголовка двух столбцов.
<table>
<tr>
<th colspan=»2″>Длина реки</th>
</tr>
<tr>
<td>Общая длина, км</td>
<td>Ддина в Казахстане</td>
</tr>
</table>
При использовании атрибута colspan для объединения диапазона столбцов ячейка увеличивается в ширину, охватывая указанное количество столбцов.
| Длина реки | |
| Общая длина, км | Длина в Казахстане, км |
Обратите внимание, что в первой строке таблицы есть одна объединенная ячейка <th>, в то время как во второй строке есть две ячейки <td>. При объединении ячеек <th> в одну появляется новая ячейка с атрибутом colspan. Важно, чтобы количество ячеек в каждой строке таблицы было одинаковым. Например, если у вас есть две ячейки <td> и вы используете параметр colspan со значением 2, то количество столбцов в каждой строке должно быть одинаковым.
Объединение строк
Атрибут rowspan объединяет диапазоны строк в таблице, аналогично объединению диапазонов столбцов. Однако в данном случае объединение охватывает несколько строк сверху вниз, что делает его уникальным способом организации данных в таблице.
В этом примере первая ячейка таблицы растягивается на три строки вниз.
<table>
<tr>
<th rowspan=»3″>Реки Казахстана</th>
<td>Иртыш</td>
</tr>
<tr>
<td>Есиль</td>
</tr>
<tr>
<td>Тобол</td>
</tr>
</table>
Вновь обратите внимание, что элементы <td>, обозначающие ячейки диапазона(первые ячейки оставшихся строк), исчезли из кода страницы. Атрибут rowspan = “3” подразумевает, что в следующих двух строках также есть ячейки, поэтому элементы <td> не нужны.
| Реки Казахстана | Иртыш |
| Есиль | |
| Тобол |
Атрибут rowspan увеличивает высоту ячейки в пределах одного столбца на определенное количество строк, включая текущую строку.
Атрибуты таблиц
Помимо атрибутов rowspan и colspan, которые меняют структуру таблицы в HTML есть атрибуты способные изменить стиль таблицы.
| Атрибут | По умолчанию | Использование в тегах | Значение |
| align | left | Применяется во всех тегах при создании таблицы. | Горизонтальное выравнивание в ячейке. Помимо left возможно значения:right, center и char(выравнивание по определенному символу). |
| bgcolor | Применяется во всех тегах при создании таблицы. | Задает цвет фона таблицы | |
| border | 0 | <table> | Толщина рамки таблицы в пикселях. |
| cellpadding | 0 | <td>, <th> | Определяет расстояние между границей ячейки и ее содержимым. |
| cellspacing | 0 | <td>, <th> | Задает расстояние между внешними границами ячеек. |
| rules | none | <table> | Устанавливает границы между ячейками таблицы. Возможные значения: rows, cols, all. |
| valign | center | <tr>, <th>, <td> | Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения: top, bottom. Данный атрибут применяется только в браузере Internet Explorer, а в остальных используют align. |
| width | По ширине страницы | Применяется во всех тегах при создании таблицы. | Устанавливает ширину таблицы в пикселях или процентах от ширины страницы. |
Цвета HTML
В прошлой таблице мы рассмотрели такой атрибут как bgcolor, с помощью которого можно определить цвет фона таблицы. В одной из статей мы рассмотрели какими способами могут задаваться цвета в HTML и один из способов это использовать систему RGB. Предлагаю рассмотреть большее количество цветов в этой системе.
| Цвет | RGB | Цвет | RGB |
| blue | 0000FF | purple | FF00FF |
| navy | 000080 | yellow | FFFF00 |
| silver | C0C0C0 | gray | A0A0A0 |
| green | 00FF00 | aqua | 00FFFF |
Вывод
Таблицы в HTML являются важным средством организации и представления данных на веб-страницах. Они помогают структурировать информацию таким образом, чтобы она была понятной и легко воспринимаемой. Понимание основных принципов построения таблиц и использование их элементов сделает ваши веб-страницы намного эффективнее. А прочитать предыдущие части про HTML можно здесь:
Фактчек
- Вся информация в таблице размещена и строится в строках.
- Количество столбцов определяется числом ячеек в каждой строке.
- При создании таблиц на HTML есть возможность объединения ячеек по строкам или столбцам.
Задания для самопроверки:
Задание 1
С помощью каких тегов строится таблица в HTML?
- <table> и </table>
- <tr> и </tr>
- <dl> и </dl>
- <colspan> и </colspan>
Задание 2.
Какое значение по умолчанию принимает горизонтальное выравнивание в ячейке?
- right
- center
- left
- char
Задание 3.
Какой атрибут используется для объединения ячеек таблицы по вертикали?
- colspan
- rowspan
- vertical-span
- vertical
Задание 4.
В каких элементах можно использовать атрибут colspan для объединения ячеек?
- <td> и <th>
- <td> и <tr>
- <tr> и <table>
- <table> и <td>
Ответы: 1 – 1; 2 –3; 3 – 2; 4 – 1.
Загрузка...