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

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

HTML - таблица Colgroup

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

Элемент <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>

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

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

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

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

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

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

Добавьте несколько элементов 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> (без стилей) для столбцов перед следующим заполненым элементом.

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

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

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

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

<colgroup> 
  <col span="2"> 
  <col span="3" style="visibility: collapse">
</colgroup>

☛ Списки HTML

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