Как в html сделать таблицу?

Приветствую вас. Сегодня я хочу написать, как в html сделать таблицу. Хотя сегодня этот элемент на веб-страницах встречается реже, я все же считаю, что нельзя забывать, как он создается и оформляется.

Базовая разметка

Посмотрите на этот кусок кода. код таблицы

На самом деле в нем содержаться практически все теги, которые нам нужны для создания таблицы. Итак, вся она помещается в тег table, он выступает главным контейнером. Далее идет тег tr (table row) или ряд таблицы. Уже в этот ряд вписываются отдельные ячейки td, а уже непосредственно у них любое содержимое.

В ячейку вы можете вложить что угодно, даже другую таблицу. Оформление также нужно применять к ячейкам. Ряды таблиц выступают просто в роли контейнеров, к ним никакие стили не применяются.

Итак, если мы вставим в html-файл этот простой код, то получим два ряда по три ячейки в каждой. По умолчанию у них не будет границ, самое время приняться за оформление нашей таблицы.

Начинаем оформлять

table td{
	border: 3px solid orange;
}

Добавим каждой ячейке рамку. Если вы сейчас обновите страницу, то увидите там, что между ячейками есть пустые отступы. В целом, это нам не нужно, будем убирать. Это можно сделать одним из двух способов:
1. Для элемента table записать такое свойство:

border-spacing: 0;

Отступы будут обнулены.

2. Для того же table:

Border-collapse: collapse;

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

Очевидно, что нам не хватает внутренних отступов – ячейки очень маленькие, но чтобы не задавать им фиксированные размеры, лучше просто определить им внутренние отступы.

padding: 20px;

Ну это к примеру. В зависимости от дизайна может быть больше или меньше. Дальнейшая работа с таблицей зависит от того, что ей нужно еще добавить. Очень часто можно увидеть, что первый ряд является как бы заглавным. Специально для создания ячеек с выделенным текстом создан тег th. Таким образом, если мы добавим в начало таблицы (в начало ее html-кода) такой кусок:

<tr>
	<th>Ячейка таблицы</th>
	<th>Ячейка таблицы</th>
        <th>Ячейка таблицы</th>
</tr>

То вот что получается:заглавные ячейки

Чтобы все так отобразилось, не забудьте добавить th в таблице стилей, где прописывается оформление для обычных ячеек.

Если какой-то ряд таблицы нужно покрасить в свой цвет, то задайте тегу tr новый стилевой класс:

<tr class = "green">

И в стилях обратитесь теперь к ячейкам именно этого ряда:

.green td{
	background: green
}

ряд

Другой вариант таблицы

Теперь я хотел бы вам показать вариант, при котором между ячейками есть пустые промежутки. Для начала нужно удалить правило border-collapse: collapse, потому что оно не будет давать создавать отступы между ячейками.

Соответственно, стили для новой таблицы я выбрал такие:

table{
	border-spacing: 20px;
	background: #081517;
}
table td, th{
	border: 3px solid orange;
	padding: 20px;
	border-radius: 10px/5px;
	color: #fff
}

новая таблица
Как видите, теперь у нее есть общий фон. Собственно, на этом я хотел бы остановиться с оформлением. Я думаю, вам что-то стало понятно. Если какую-то ячейку нужно оформить по-особенному, просто пропишите для нее свой класс.

Объединение ячеек

Куда больше нас должен интересовать вопрос объединения ячеек, потому что в реальных таблицах это встречается очень часто. Я сразу скажу, что напишу об этом в следующей статье, буквально через несколько дней (я уже написал) — вот ссылка на нее). Сегодня же я вам показал лишь базовые стили, которые можно применить к таблицам, в остальном это такие элементы, как и все и к ним можно добавлять такие же стили и свойства.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: