Послание №4
Список определений или описаний
Давайте дополним наши знания о списках, и узнаем, что такое список определений и для чего они нужны.
Список описаний или список определений, как он ещё называется, состоит из двух частей — термина и его определения.
Список задаётся с помощью элемента <dl> (от англ. Description List — список описаний), термин — <dt> (от англ. Definition Term — термин), а его определение — с помощью элемента <dd> (от англ. Description — описание).
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>
Список описаний хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т. д.
Таблицы
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>