Приветствую всех подписчиков моего обучающего сайта, а также гостей блога. Очень часто на страницах неумело сверстанных веб-ресурсов можно увидеть поехавший в разные стороны контент. И это только полбеды. Весь спрятанный ужас раскрывается тогда, когда вы начинаете менять масштаб вкладки браузера.
Особенно плохи дела с таблицами. То неприятное чувство, когда находишь полезную информацию, масштабируешь зум, а текст «прячется» за колонками таблицы. Знакомо? Чтобы этого не произошло с вашими сайтами, я подробно объясню, как создать таблицу html, каким способом изменить ее внешний вид, раскрасить ячейки и многое другое. А теперь приступим к обучению!
Что нужно знать о табличных представлениях
Таблицы – это очень удобный инструмент для отображения на онлайн-ресурсах данных разных форматов (текст, изображения и т.д.)
Их используют не только как отдельный объект страницы, а еще и для табличной верстки. Так, многие сайты, созданные достаточно давно, используют таблицы для представления структурированной информации на своих страницах.
Спустя некоторое время на смену табличной верстке пришла блочная, однако начинающие разработчики учатся проектировать сервисы первым способом.
Для того чтобы сделать табличное представление некой информации, необходимо использовать предусмотренные в языке разметки html-теги.
Для удобства чтения и разбора материала, я структурировал их в таблицу, которая представлена ниже. Хочу обратить ваше внимание, что все описываемые элементы являются парными.
| Единица языка разметки | Предназначение |
| <table> | Это контейнер, который состоит из строк и ячеек, формирующих столбцы. Все последующие теги располагаются внутри данного элемента |
| <caption> | Специальный тег для задания названия таблицы. Указывается внутри <table>, однако в браузере отображается над таблицей |
| <tr> | Создает одну строку |
| <th> | Задает ячейку, которая расценивается браузером как заголовочная. Внутри нее начертание шрифта меняется на жирное, а занесенные данные выравниваются по центру. Указывается внутри тега <tr> |
| <td> | Создает одну обычную ячейку. Указывается внутри тега <tr> |
| <thead> | Содержит в себе строки и ячейки, которые располагаются непосредственно вначале таблицы. Иногда используется для шапки |
| <tfoot> | Указывается после <thead>. Отображает строки в конце таблицы |
| <tbody> | Содержит в себе основную часть табличной информации. Указывается после предыдущих элементов. |
Создаем простую таблицу
Мы разобрали с вами основные единицы языка html. А теперь попытаемся создать простой табличный объект, состоящий из двух колонок и четырех строк.
Напоминаю, что самый легкий способ посмотреть результат работы кода – скопировать его в файл стандартной программы блокнот и сохранить с расширением .html (не забудьте поменять кодировку на utf-8).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Простая таблица</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<caption>Таблица 1 – Первая простая табличка</caption>
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Конец </td>
<td>Конец </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
</body>
</html> |
Обратите внимание на атрибуты, заданные в теге <table>. Они форматируют внешний вид таблицы. Советую вам поиграться со значениями между двойными кавычками и посмотреть, как видоизменяется представление объекта.
Если вы выполнили мою предыдущую просьбу, то уже поняли принципы работы данных параметров. Для тех, у кого не было на это времени я опишу действие каждого атрибута ниже:- При задании width таблица растягивается горизонтально на всю ширину вкладки браузера независимо от того, как масштабирована страница: на весь экран или только на четверть;
- Border отвечает за границы объекта. В зависимости от указанной цифры между двойными кавычками, линия границы утолщается или уменьшается.
- Cellspacing задает расстояние между границами ячеек и внешней границей таблицы. Так, если задан параметр border, то по умолчанию расстояние равняется 2, если не задан – 0.
- И наконец cellpadding. С его помощью устанавливается отступ содержимого ячейки от границ.
Таблицы с объединенными ячейками
Иногда возникают такие ситуации, когда нужно объединить несколько строк или несколько столбцов в одно целое. Для этого разработчики html предусмотрели такие механизмы, как colspan и rowspan.
Думаю, по названию вы догадались, что colspan отвечает за соединение колонок (горизонтальное объединение), а rowspan – за строки (вертикальное объединение).
Создадим таблицу сравнения времени года:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег CAPTION</title>
</head>
<body>
<table width="100%" border="1" >
<caption>Таблица 2 - Сравнение</caption>
<thead>
<tr >
<th colspan="2">Лето</th>
</tr>
<tr>
<th width ="50%">Плюсы</th>
<th width ="50%">Минусы</th>
</tr>
</thead>
<tbody>
<tr>
<td > Фрукты</td>
<td>Слишком жарко</td>
</tr>
<tr>
<td>Мороженое</td>
<td>Тяжело работать</td>
</tr>
</tbody>
</table>
</body>
</html> |
Как видно, первые две ячейки шапки объекта слились в одну.
Нужно больше цвета!
На данном этапе публикации вы легко можете оперировать тегами и атрибутами таблиц. Поэтому пришло время изучить инструменты для форматирования ее внешнего вида.
Для задания цвета используются таблицы стилей css. Для начала изменим предыдущий пример, выделив позитивные и негативные моменты разными цветами.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Камни</title>
<style>
.tab {
width: 100%;
border: 2px solid #000;
border-collapse: separate ;
}
.tab td, .tab th {
padding: 3px;
border: 1px solid #000;
}
.tab .left {
background: #98FB98;
}
.tab .right {
background: #FF6347;
}
.tab caption {
border: 1px solid #fff;
font-size:20px;
}
</style>
</head>
<body>
<table class= "tab">
<caption>Таблица 2 - Сравнение</caption>
<thead>
<tr >
<th colspan="2">Лето</th>
</tr>
<tr>
<th width ="50%">Плюсы</th>
<th width ="50%">Минусы</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "left"> Фрукты</td>
<td class = "right">Слишком жарко</td>
</tr>
<tr>
<td class = "left">Мороженное</td>
<td class = "right">Тяжело работать</td>
</tr>
</tbody>
</table>
</body>
</html> |
Так, положительные аспекты выделены зеленым, а негативные – красным. Такой «флинт ушами» помогает акцентировать внимание на определенных информационных деталях контента, а также «оживить» сайт в целом.
А теперь суперфинал!
Мы научились с вами многому, да не всему. Напоследок я хочу рассказать о некой изюминке оформления таблиц. Это объемные таблицы! Звучит круто, а делается просто.
Объемность получается за счет задания стиля границы. Объемные рамки бывают: groove, ridge, inset и outset.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
<style type="text/css">
table {
width: 95%;
border-collapse: collapse;
border: 10px ridge #DA70D6;
}
TH {
background: #BC8F8F;
color: #fff;
}
TD {
background:#FDF5E6;
}
TD, TH {
padding: 4px;
border: 5px ridge #9932CC;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th> </th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Лето</td><td>+27</td><td>+30</td><td>+21</td>
</tr>
<tr>
<td>Зима</td><td>-11</td><td>-17</td><td>-15</td>
</tr>
</table>
</body>
</html> |
На этом примере я закончу свою публикацию. Если вам понравилась статья, то подписывайтесь на мои обновления и приглашайте друзей. Впереди еще много всего интересного! Пока-пока!
С уважением, Роман Чуешов
