Главная css Стилевые параметры Таблицы

Стилевые параметры Таблицы

CSS для Таблицы

Параметр

Значение

Описание

border-collapse
(устанавливает, как отображать границы вокруг ячеек таблицы)

collapse

Линия между ячейками отображается только одна.

separate

Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

border-spacing

(задает расстояние между границами ячеек в таблице)

значение1 [значение2]

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек.

Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Свойство border-spacing применяется в качестве замены атрибута cellspacing в селекторе TABLE.
Свойство border-spacing действует только в том случае, если для селектора TABLE задано свойство border-collapse со значением separate.

При добавлении к селектору TABLE свойства border-collapse со значением collapse, атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

                    
table {border-collapse: separate;
width: 90%;
border-spacing: 7px 12px;}

1	2	3
4	5	6

caption-side
Определяет положение заголовка таблицы, который задается с помощью тега <caption>

top (по умолчанию)

Располагает заголовок по верхнему краю таблицы.

bottom

Заголовок располагается под таблицей.

                    
<style>
caption {caption-side: bottom;}
</style> 

<table>
<caption> Заголовок таблицы </caption>
<tr> 
 <td>Текст</td> 
</tr> 
</table>

CSS стили простой таблицы

простой таблицы

<style>
.tab {
  margin: 0 auto; /* таблица расположена по центру */
  padding: 0px;
  width: 80%;
  border-spacing: 0px;
  border-collapse: collapse;
}
.tab caption {
  font-weight: 600;    
}
.tab td {
  padding: 6px;
  border: 1px solid #7e5a25;
  vertical-align: top;
  text-align: left;
  font-size: 15px;
}
</style> 
    
<table class="tab">
<caption> Заголовок таблицы </caption>
<tr> 
  <td>Ячейка 1</td><td>Ячейка 2</td> 
</tr>
<tr> 
  <td>Ячейка 3</td><td>Ячейка 4</td> 
</tr>  
</table>

Результат

Заголовок таблицы
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Чередование цвета строк Таблицы

Связь CSS и HTML

<style>
table.tab_ch {
  width: 80%;
  border-collapse: collapse;
  }
  table.tab_ch caption {
  caption-side: bottom;
  }
  .tab_ch td, .tab_ch th  {  
  border: 1px solid #7e5a25;
  padding: 3px 7px 2px 7px;
  }
  .tab_ch th  {
  text-align: left;  
  padding: 15px;
  background-color: #b56a6a; 
  color: #ffffff;
  }
/* нечетные номера */
  .tab_ch tr:nth-child(odd) {background-color: #ecd9d9;}

/* четные номера  */
  .tab_ch tr:nth-child(even){background:#e8e3d4;}       
</style>

<table class="tab_ch">
  <caption>Список №1</caption>
  <tr><th>Имя</th><th>Фамилия</th><th>Зарплата</th></tr>
  <tr><td>Иван<<td><td>Иванов<<td><td>50000 руб.</td></tr>
  <tr><td>Петр</td><td>Петров</td><td>45000 руб.</&td></tr>
  <tr><td>Мария</td><td>Иванова</td><td>10000 руб.</td></tr>
  <tr><td>Татьяна</td><td>Петрова</td><td>30000 руб.</td></tr>
</table>

Результат примера

(заголовок) **Список № 1**
Имя	Фамилия	Зарплата
Иван	Иванов	50000 руб.
Петр	Петров	45000 руб.
Мария	Иванова	10000 руб.
Татьяна	Петрова	30000 руб.

Для чередования цвета строк Таблицы в CSS используется псевдокласс :nth-child

Значение (odd) - Все нечетные номера
Значение (even) - Все четные номера элементов.