Таблицы и списки в HTML

Список — важная часть любой статьи. Он позволяет статье легче восприниматься и дает возможность кратко перечислить основные части. В этой статье мы разберем создание маркированных и нумерованных списков в HTML.

Ещё одна важная часть — HTML таблицы, которые тоже играют большую роль в создании контента, например, описание услуг, цены и т.д. Кроме того, существует вид табличной верстки, но это тема другой статьи.

Создание списков: нумерованные списки в html

Этот вид списков создается в контейнере ol. Его функцией является перечисление элементов с помощью цифр. Как правило, нумерованные списки используются для навигации по тексту статьи или перечисления каких-либо элементов внутри неё.

Для создания элементов списка служит тег li, который располагается внутри контейнера ol.

Пример кода:

<body>
	<ol>
		<li>Элемент 1</li>
		<li>Элемент 2</li>
		<li>Элемент 3</li>
	</ol>
</body>

Маркированные списки в HTML

Маркированные списки в html создаются почти так же, как и нумерованные. Вместо тега-контейнера ol используется тег ul.

Этот вид списков более универсален, может так же использоваться для навигации или перечисления элементов статьи. Очень часто его используют для создания боковой панели.

Пример создания маркированного списка:

<body>
	<ul>
		<li>Элемент 1</li>
		<li>Элемент 2</li>
		<li>Элемент 3</li>
	</ul>
</body>

Результат:

  • Элемент 1
  • Элемент 2
  • Элемент 3

В данном примере маркерами служат круги, но их можно заменить. В теге ul есть атрибут type, в нем можно указать тип маркера. Например:

     1.<ul type="disck"></ul> - маркер в виде круга;
     2.<ul type="circle"></ul> - маркер в виде окружности;
     3.<ul type="square"></ul> - маркер в виде квадрата;

Кроме того, вы можете использовать картинку для маркера. Для этого нужно воспользоваться CSS.

ul{
	list-style-image: url(images/arrow.png);
}

В данном случае, в качестве маркеров будет служить небольшая стрелочка.

Выше мы говорили о том, что маркированные списки можно использовать для создания боковой панели. Для этого обычно удаляют маркеры. Это можно сделать с помощью css.

ul{
	list-style: none;
	display: inline-block;
}

Второе свойство было написано для того, чтобы все элементы располагались вместе.

<li> - блочный тег.

Тип dl

Такие списки редко используются и служат для создания определений. Они содержатся внутри тега-контейнера dl.

Многоуровневые списки

В html можно создавать списки нескольких уровней. Можно создавать списки 3 и 4 уровней, но больше 2 в практике не используется.

Пример:

<body>
	<ol>
		<li>Элемент 1</li>
		<li>Элемент 2
			<ol>
				<li>Пункт 1</li>
				<li>Пункт 2</li>
			</ol>
		</li>	
		
	 	<li>Элемент 3
			<ol>
				<li>Пункт 3</li>
				<li>Пункт 4</li>
			</ol>
		</li>	
	</ol>
</body>

В итог мы получаем такой список:

1.Элемент 1
2.Элемент 2
	2.1.Пункт 1
            2.2.Пункт 2
3.Элемент 3
	3.1.Пункт 3
	3.2.Пункт 4

Можно создавать и маркированные многоуровневые списки(вложенные), только вместо цифр, там будут изменяться маркеры:

    1.Уровень 1 - круг
    2.Уровень 2 - окружность
    3.Уровень 3 - квадрат

Создание таблиц

Таблицы имеют более сложную конструкцию чем списки.

HTML код таблицы:

<table>
	<tr>
		<td>Блок 1</td>
		<td>Блок 2</td>
	</tr>
</table>

В этом примере создана простая однострочная таблица.

  1. table — основной тег-контейнер, в котором содержится весь html код таблицы;
  2. td — табличная строка, которая может содержать в себе несколько ячеек;
  3. tr — ячейка, в которой содержится информация;

Существуют и другие теги таблицы, но они почти не используются. Всё что вам нужно знать, так это вышеперечисленные теги и атрибуты отвечающие за размеры ячеек.

  1. rowspan — атрибут отвечающий за вертикальный размер ячейки(количество столбцов):
  2. <td rowspan = "2">Ячейка</td>
  3. colspan — отвечает за горизонтальный размер ячейки(количество колонок):
  4. <td colspan = "2">Ячейка</td>

Форматирование таблицы

Таблицу можно форматировать в css, как и другие элементы.

Ширина таблицы может изменяться и в html, но css для этого более пригоден. С его помощью можно изменять ширину любого элемента таблицы, с помощью свойства <width>.

Отступы в таблице делаются очень просто, с помощью <margin> и <padding>. Если <padding> помогает увеличить визуальный размер ячеек, то <margin> делает отступы между ними.

td{
	padding: 5px;
	margin: 5px 2px;
}

Чтобы расположить таблицу по центру родительского блока, нужно использовать свойство margin: 0 auto;

Чтобы содержимое таблицы находилось в её центре, используйте свойство text-align: center;

td{
	text-align: center;
}

Таблицы и списки — тема очень сложная для новичков, поэтому требует практики. Обязательно попробуйте описанные примеры в своих проектах, либо же поэкспериментируйте с тегами. Желаем удачи!



Теги:
1+

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *