/ Курсы CSS / Стилизация таблиц

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


Свойство border-collapse

Свойство border-collapse устанавливает границы вокруг ячеек таблицы. Значения к border-collapse:

collapse - устанавливает только одну линию между ячейками.
separate - устанавливает собственную рамку вокруг каждой ячейки.
inherit - наследует значение родителя.


    <style>
   table { 
    width: 15%; 
    border: 4px double black; 
    border-collapse: collapse;
  </style>  
  <table>
   <tr> 
    <th>Имя курса</th>
    <th>Уроков</th><th>Заданий</th>
   </tr>
   <tr> 
    <td>CSS</td><td>29</td>
    <td>34</td>
   </tr>
   <tr> 
    <td>JS</td><td>38</td>
    <td>57</td>
   </tr>
  </table>

Имя курса УроковЗаданий
CSS29 34
JS38 57

Свойство caption-side

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

top - распологает заголовок таблицы над таблицей.
bottom/span> - распологает заголовок таблицы под таблицей.
initial - устанавливает значение свойства в значение по умолчанию.
inherit - наследует значение родителя.


    <style>
   table { 
    width: 15%; 
    border: 4px double black; 
    border-collapse: collapse;
    }
    caption { 
     caption-side: top; 
    }
  </style>  
  <table>
    <caption>Курсы на сайте</caption>
   <tr> 
    <th>Имя курса</th>
    <th>Уроков</th><th>Заданий</th>
   </tr>
   <tr> 
    <td>CSS</td><td>29</td>
    <td>34</td>
   </tr>
   <tr> 
    <td>JS</td><td>38</td>
    <td>57</td>
   </tr>
  </table> 


Курсы на сайте
Имя курса УроковЗаданий
CSS29 34
JS38 57

Свойство border-collapse

Свойство border-collapse устанавливает, как отображать границы вокруг ячеек таблицы. Значения border-collapse:

separate - рамки ячеек располагаются раздельно.
collapse - рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial - устанавливает значение свойства в значение по умолчанию.
inherit - наследует значение родителя.

Свойство table-layout

Свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы. Значения table-layout:

auto - автоматически подсчитывает ширину столбца или ячейки.
fixed - определяет фиксированную ширину.
initial - устанавливает значение свойства в значение по умолчанию.
inherit - наследует значение родителя.