Встреча 3
Теги контейнеры
Давайте знакомится с элементами HTML которые позволяют рисовать сетку любого формата и придавать различным областям семантический смысл (логическую структуру сайта для браузера и поисковиков).
Для контейнеров отображение внешнего вида не задано, поэтому эти элементы можно стилизовать по своему усмотрению.
Для всех элементов доступны глобальные атрибуты.
<div> </div>
div — является базовым контейнером для элементов.
Тег <div> не имеет свойств по умолчанию для внешнего отображения, он представляет собой так называемый контейнер, поэтому к нему можно применять всевозможные CSS-стили, чтобы элементы внутри этих тегов приняли желаемый вид.
Этот тег изначально был предназначен для деления веб-страницы на логические фрагменты, такие как нижний колонтитул (подвал), боковое меню и т.п. Но с появлением новой семантической разметки веб-страниц с помощью HTML5, необходимость в таком повсеместном использовании тега отпала.
В настоящее время тег <div> используется для группирования блочных элементов. Тег также позволяет объединять любой набор таких элементов, как заголовок, насколько абзацев, список в единственном блоке, который потом можно позиционировать на веб-странице, создавая сложную схему разметки.
Тег <div> следует применять только в случае, если для выделения области не подходит никакой другой элемент страницы.
| <div> <h2>Далеко-далеко.</h2> <img src="img/picture.png" alt="Изображение"> <p>Далеко-далеко за словесными горами в стране гласных и согласных.</p> </div> |
Таблицы
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Важно!
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Создаем таблицу
Таблица создаётся при помощи парного тега <table> </table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
<table>
<tr><td>ячейка 1</td><td> ячейка 2</td></tr>
<tr><td>ячейка 3</td><td> ячейка 4</td></tr>
</table>
По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью стилевого свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */
table {border: 1px solid grey;}
/* границы ячеек тела таблицы */
td {border: 1px solid grey;}
Промежутки между ячейками таблицы убираются с помощью свойства:
table {border-collapse: collapse;}
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width.
Создаем строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега <tr>. Количество горизонтальных строк таблицы определяется количеством парных тегов <tr></tr>.
Создаем ячейку заголовка столбца таблицы
Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным.
Количество ячеек заголовка определяется количеством пар тегов <th></th>.
<table>
<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>
</table>
Создаем ячейку тела таблицы
Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы.
Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>.
<table>
<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>
<tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>
</table>
Добавляем рамку
Как вы думаете, чего не хватает в таблице из примера выше? Правильно — рамок. Рамки отсутствуют, потому что браузер использует стандартный атрибут border со значением 0. Давайте исправим это и изменим атрибут border с 0 на 1.
<table border="1">
<tr><th>ячейка 1</th><th>ячейка 2</th></tr>
<tr><td>ячейка 3</td><td>ячейка 4</td></tr>
<tr><td>ячейка 5</td><td>ячейка 6</td></tr>
</table>
Убираем отступы
Мы задали рамки таблицы с помощью атрибута, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется атрибут cellspacing равный 0. Вот так:
<table border="1" cellspacing="0">
<tr><th>ячейка 1</th><th>ячейка 2</th></tr>
<tr><td>ячейка 3</td><td>ячейка 4</td></tr>
<tr><td>ячейка 5</td><td>ячейка 6</td></tr>
</table>
Добавляем подпись к таблице
Элемент <caption> создает подпись таблицы. Добавляется он непосредственно после тега <table>, вне строки или ячейки.
<table>
<caption>Перечень продуктов</caption>
<tr>
<th>№</th><th>Наименование товара</th>
</tr>
<tr>
<td>1</td><td>Томаты свежие</td
</tr>
<tr>
<td>2</td><td>Огурцы свежие</td>
</tr>
</table>