Главная 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;} 

123
456
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> 
</table> 
    

Результат

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

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

Связь CSS и HTML
1
<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-of-type(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

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

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

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