Приветствую вас. Сегодня я хочу написать, как в 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
}
Как видите, теперь у нее есть общий фон. Собственно, на этом я хотел бы остановиться с оформлением. Я думаю, вам что-то стало понятно. Если какую-то ячейку нужно оформить по-особенному, просто пропишите для нее свой класс.
Объединение ячеек
Куда больше нас должен интересовать вопрос объединения ячеек, потому что в реальных таблицах это встречается очень часто. Я сразу скажу, что напишу об этом в следующей статье, буквально через несколько дней (я уже написал) — вот ссылка на нее). Сегодня же я вам показал лишь базовые стили, которые можно применить к таблицам, в остальном это такие элементы, как и все и к ним можно добавлять такие же стили и свойства.