Группа столбцов таблиц HTML, элемент colgroup для стилизации
Меню
Руководство по HTML
Рубрики
Руководство по HTML
Справочник
Справочник по HTML

Группа столбцов таблиц HTML

html table colgroup

Элемент <colgroup> используется для стилизации определенных столбцов таблицы.

HTML - таблица Colgroup

Если вы хотите стилизовать два первых столбца таблицы, используйте элементы <colgroup> и <col>.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Элемент <colgroup> следует использовать в качестве контейнера для спецификаций столбцов.

Каждая группа указывается с помощью элемента <col>.

Атрибут span указывает, сколько столбцов получает стиль.

Атрибут style указывает стиль, который будет задан для столбцов.

Добавьте группу colgroup с элементом col, который охватывает три столбца, чтобы определить стиль для трех столбцов:

<table>
 <colgroup> 
   <col span="3" style="background-color: rgba(137,171,204)"> 
 </colgroup>
 <tr>
    <th>Пн</th>
    <th>Вт</th>
    <th>Ср</th>
    <th>Чт</th>
    <th>Пт</th>
    <th>Сб</th>
    <th>Вс</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
</table>
★ Примечание: тег <colgroup> должен быть дочерним элементом элемента <table> и должен располагаться перед любыми другими элементами таблицы, такими как <thead>, <tr>,и т. д., но после элемента <caption>, если имеется.

Допустимые свойства CSS

Существует лишь очень ограниченный набор свойств CSS, которые разрешено использовать в colgroup:

  • свойство width;
  • свойство visibility;
  • свойства background;
  • свойства border.

Все остальные свойства CSS не смогут повлиять на ваши таблицы.

Несколько элементов Col

Если вы хотите оформить больше столбцов с разными стилями, запишите больше элементов <col> внутри <colgroup>.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Добавьте несколько элементов col в colgroup:

<colgroup>
  <col span="3" style="background-color: rgba(137,171,204,1)">
  <col span="4" style="background-color: rgba(35,51,64,1)">
</colgroup>

Пустые группы

Если вы хотите стилизовать столбцы в середине таблицы, вставьте «пустой» элемент <col> (без стилей) для столбцов перед следующим заполненым элементом.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Добавьте «пустые» элементы col, представляющие столбцы, перед теми столбцами, которые вы хотите стилизовать:

<colgroup> 
  <col span="2"> 
  <col span="3" style="background-color: rgba(137,171,204,1)"> 
</colgroup>

Скрыть столбцы

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Чтобы скрыть столбцы используйте свойство visible:, как в примере ниже:

<colgroup> 
  <col span="2"> 
  <col span="3" style="visibility: collapse">
</colgroup>
★ Примечание: столбцы таблицы не сворачиваются должным образом в браузерах Safari.

Вопрос по группам столбцов HTML таблиц

Проверьте себя, насколько хорошо вы запомнили материал.

☛ Списки HTML

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

Поделиться ссылкой