Добавляем подпись к таблице




Послание №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>



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2019-04-04 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: