В этой статье вы узнаете о том, как правильно создавать таблицы — внешние и внутренние теги, а также HTML атрибуты, научитесь задавать правильное позиционирование элементам таблиц с помощью CSS.
Таблицы — важная часть любого сайта. В основном используются для:
- Компановки и размещения какой-либо статистической информации,
- Систематизации данных о характеристиках товаров или услуг,
- Более удобного указания цен.
Таблицы могут использоваться для сравнения нескольких услуг или товаров.
Каркас таблицы. HTML
Таблицы, как и любая другая часть сайта, размещается с помощью языка разметки HTML. Как правило, стилизация используется редко, так как таблицы — исключительный случай для HTML. Язык позволяет создать хорошую таблицу, которая будет хорошо сочетаться с простым дизайном сайта.
Но без CSS тоже не обойтись. Он обычно используется для стилизации всей таблицы, либо же для её отдельных элементов.
Для размещения таблицы на странице используется парный тег <table>. Он является контейнером и содержит в себе все её внутренние элементы.
Тег имеет целый ряд атрибутов:
- <align> — задает выравнивание страницы по горизонтали. Допускаются значения <center>, <left> или <right>.
- <background> и <bgcolor> — используются для создания фона страницы. Первый содержит в себе ссылку, по типу src=»img.jpg». Второй создает фон, применяя обычные цвета. Работает система HEX.
- <border> и <bordercolor> — 2 атрибута, отвечающие за создание рамки. Первый задает ширину линии, а второй её цвет.
- <Cellpadding> и <cellspacing> — задает внутренние отступы. Первый указывает внутреннее расстояние от всего содержимого. Cellspacing делает отступы между каждой отдельной ячейкой.
- <Cols> — задает количество колонок на веб-странице.
- <Width> и <height> — ширина и высота таблицы.
- <Summary> — содержит описание таблицы.
Как видите, даже стандартный HTML дает нам возможность создать таблицу с неплохой стилизацией. Кроме этого присутствуют внутренние отступы и стандартные инструменты позиционирования, но чаще всего, их оказывается недостаточно.
Создание ячеек
Для заполнения страницы используются теги <tr>, <tr> или <th>.
<tr> — контейнер, который размещает одну строку в таблице и содержит её внутренние ячейки. Атрибуты этого тега обычно не используются.
Для создания и размещения ячеек используются теги <tr> и <th>. Они практически идентичны, но с небольшими визуальными отличиями. Контент расположенный в теге th имеет жирный шрифт и располагается по центру ячейки.
Для данных тегов можно использовать такие же атрибуты, как и у <table>. Так можно создать отдельный цвет фона и рамки для каждой ячейки.
Самые используемые — атрибуты <rowspan> и <colspan>. Они позволяют объединить несколько ячеек в одну. Rowspan — объединяет ячейки по вертикали, позволяя сделать большой столбец. Colspan — объединяет ячейки по горизонтали.
Пример создания HTML таблицы:
<!doctype html>
<html>
<head>
<title>CheckBox CSS. Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table bgcolor="grey" border="1px" bordercolor="black">
<tr>
<td>Язык</td>
<td>Использование</td>
<td>Сложность изучения</td>
</tr>
<tr>
<td>HTML</td>
<td>Используется для размещения элементов на странице</td>
<td rowspan="2">Низкая</td>
</tr>
<tr>
<td>CSS</td>
<td>Используется для стилизации элементов веб-страницы</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Исползуется для создания скриптов</td>
<td>Средняя</td>
</tr>
</table>
</body>
</html>
Этот же код в браузере выглядит примерно как:
Позиционирование и стилизация. CSS
Как правило, стандартных инструментов HTML достаточно для создания хорошей страницы, но всегда бывают исключения. Обычно CSS применяет для того, чтобы задать расположение таблицы относительно веб-элемента.
Менять её расположение можно используя свойство <margin> и <padding>. Первый применяется ко всей странице, для создания отступов от внешнего блока. Свойство padding можно применять для самого блока, в котором расположена страница.
Ещё один способ использовать CSS-свойство "position: absolute". В этом случае, таблица будет находиться не относительно внешнего блока, а относительно всей страницы. Для смены местоположения используется система координат. Чтобы задавать расположение используются свойства <top>, <right>, <bottom>, <left>.
Разместим нашу таблицу по центру, в нижней части экрана:
body{
width: 80%;
margin: 0 auto;
font-family: "Tahoma", serif;
color: rgba(255, 255, 255, 0.62);
}
table{
position: absolute;
left: 25%;
top: 50%;
}
Пару слов о табличной верстке
Сейчас у веб-дизайнеров стала очень популярна верстка с использованием таблиц. Она лучше разделяет текст на отдельные блоки, располагая их в разных частях страницы. Вы наверняка встречали сайты, у которых sidebar был в правой части, рядом с рекламой. Эта часть была отделена рамкой от остального контента веб-страницы. Знакомо? Так вот, это наглядный пример использования табличной верстки.
Такие элементы можно создать пользуясь блочной версткой, но это менее удобно.
Заключение
Хочется сказать о том, что при создании таблиц намного удобнее стилизовать элемент через CSS документ. Это повысит читабельность вашего кода. Можно использовать свойства, которых нет в HTML — создание теней, смена и размер шрифта, цвет шрифта и другие.
Если у вас несколько таблиц или вы вовсе пользуетесь табличной версткой, то лучше CSS облегчит вам работу.
Для закрепления материала создайте такую же таблицу как в нашем примере. Замените все HTML свойства на CSS стили.
Теги: