Стилизаци таблиц в CSS3

Стилизация таблиц

В CSS так же есть свойства, для стилизации таблиц:

border-collapse: устанавливает, как будет стилизоваться граница смежных ячеек
border-spacing: устанавливает промежутки между границами смежных ячеек
caption-side: устанавливает положение элемента caption
empty-cells: задает режим отрисовки для пустых ячеек
table-layout: определяет размеры таблицы

Отрисовка таблицы

граница таблицы задается с помощью стандартного свойства border:

table {
border: 1px solid #ccc;	 /* граница всей таблицы */
}
tr {
border: 1px solid #ccc;	 /* границы между строками */
}
td, th {
border: 1px solid #ccc;	 /* границы между столбцами */
}

Границ между столбцами с помощью свойства border-collapse:

collapse: смежные ячейки имеют общую границу
separate: смежные ячейки имеют отдельные границы, которые разделяются пространством

Для ячеек с раздельными границами с помощью свойства border-spacing можно установить пространство между ними:

<style>
table {
border: 1px solid #ccc;
border-spacing: 3px;
}

td, th{
border: solid 1px #ccc;
}
.collapsed{
border-collapse: collapse;
}
.separated{
border-collapse: separate;
}
</style>


<h3>Collapse</h3>
<table class="collapsed">
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
</table>
<h3>Separate</h3>
<table class="separated">
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
</table>

Collapse

Модель	Производитель	Цена
Lumia 950	Microsoft	29900
iPhone 6S	Apple	52900
Nexus 6P	Huawei	49000

Separate

Модель	Производитель	Цена
G 5	LG	44900
HTC 10	HTC	49900
Nexus 5X	Google/LG	25000

Пустые ячейки

Свойство empty-cells стилизует пустые ячейки:

show: пустые ячейки отображаются, значение по умолчанию
hide: пустые ячейки не отображаются

	
<style>
table {
border: 1px solid #ccc;
border-spacing: 3px;
}

td, th{
border: solid 1px #ccc;
}
.hidden-empty-cells{
empty-cells: hide;
}
</style>

<h3>Show</h3>
<table>
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
<tr><td>iPhone 6S</td><td></td><td></td></tr>
<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
</table>
<h3>Hide</h3>
<table class="hidden-empty-cells">
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
<tr><td>HTC 10</td><td></td><td></td></tr>
<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
</table>
</body>
</html>

Show

Модель	Производитель	Цена
Lumia 950	Microsoft	29900
iPhone 6S
Nexus 6P	Huawei	49000

Hide

Модель	Производитель	Цена
G 5	LG	44900
HTC 10
Nexus 5X	Google/LG	25000

Позиционирование заголовка

Свойство caption-side управляет позицией заголовка и может принимать следующие значения:

top: позиционирование заголовка вверху (значение по умолчанию)
bottom: позиционирование заголовка внизу

<style>
table {
border: 1px solid #ccc;
border-spacing: 3px;
}

caption {

font-weight: bold;
}

td, th{
border: solid 1px #ccc;
}
.captionBottom{
caption-side: bottom;
}
</style>

<h3>Top</h3>
<table>
<caption>Флагманы 2015 года</caption>
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
</table>
<h3>Bottom</h3>
<table class="captionBottom">
<caption>Новинки 2016 года/caption>
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
<tr><td>iPhone SE</td><td>Apple</td><td>37000</td></tr>
</table>

Top

Флагманы 2015 года
Модель	Производитель	Цена
Lumia 950	Microsoft	29900
iPhone 6S	Apple	52900
Nexus 6P	Huawei	49000

Bottom

Новинки 2016 года
Модель	Производитель	Цена
G 5	LG	44900
HTC 10	HTC	49900
iPhone SE	Apple	37000

Управление размером таблицы

С помощью свойства table-layout можно управлять размером таблицы. По умолчанию значение браузер устанавливает ширину столбцов исходя из ширины самой широкой ячейки в столбце.

Значение - fixed устанавливает фиксированную ширину:

table {
border: 1px solid #ccc;
border-spacing: 3px;
table-layout: fixed;
width:350px; 
}

Вертикальное выравнивание ячеек

Свойство vertical-align устанавлиает положение по вертикали:

top: выравнивание содержимого по верху ячейки
baseline: выравнивание первой строки текста по верху ячейки
middle: выравнивание по центру (значение по умолчанию)
bottom: выравнивание по низу

Свойство vertical-align применяется только к элементам <th> и <td>:

td, th{
border: solid 1px #ccc;
vertical-align: bottom;
height: 30px;
}