Элемент colgroup в таблицах HTML

Colgroup Таблицы HTML

Элемент <colgroup> стилизует определённые столбцы таблицы. Это контейнер для спецификаций столбцов, и каждая группа задаётся элементом <col>. У <col> атрибут span указывает, сколько столбцов стилизовать, а атрибут style задаёт стиль.

Примечание: Только очень ограниченный набор свойств CSS работает на colgroup. <colgroup> должен быть дочерним элементом <table> и стоять перед любыми строками или ячейками, но после <caption>, если он есть.

Пример

Первые два столбца календаря, стилизованные с помощью colgroup.

Таблица-календарь (заголовки от ПН до ВС, четыре недели дат), где первые две колонки оформлены светло-голубым фоном с помощью colgroup, содержащего один col со span=2.

> Результат: полная HTML-страница

Prompt

Таблица-календарь (заголовки от ПН до ВС, четыре недели дат), где первые две колонки оформлены светло-голубым фоном с помощью colgroup, содержащего один col со span=2.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Basic</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </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>

</body>
</html>

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

На colgroup разрешены лишь несколько свойств CSS: свойство width, свойство visibility, свойства фона и свойства границ. Все остальные свойства CSS не влияют на таблицу.

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

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

Пример

Две группы столбцов с разными цветами фона.

Табличный календарь, в котором первые два столбца светло-голубые, а следующие три — розовые, с использованием colgroup с двумя элементами col (span=2 и span=3) с разными цветами фона.

> Результат: полная HTML-страница

Prompt

Табличный календарь, в котором первые два столбца светло-голубые, а следующие три — розовые, с использованием colgroup с двумя элементами col (span=2 и span=3) с разными цветами фона.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Multiple</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </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>

</body>
</html>

Пустые Colgroup

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

Пример

Пустой col, используемый для пропуска первых столбцов перед стилизацией последующих.

Таблица-календарь, где столбцы в середине оформляются сначала добавлением пустого col со span=3 (без стиля), а затем col со span=2 и розовым фоном.

> Результат: полная HTML-страница

Prompt

Таблица-календарь, где столбцы в середине оформляются сначала добавлением пустого col со span=3 (без стиля), а затем col со span=2 и розовым фоном.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Empty</title>
</head>
<body>

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </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>

</body>
</html>

Скрытие Столбцов

Вы можете скрыть столбцы с помощью свойства visibility: collapse на <col>.

Пример

Последние три столбца скрыты с помощью visibility: collapse.

Таблица-календарь, где последние три колонки скрыты с помощью col со span=3 и visibility: collapse, после col со span=2.

> Результат: полная HTML-страница

Prompt

Таблица-календарь, где последние три колонки скрыты с помощью col со span=3 и visibility: collapse, после col со span=2.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Hide</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </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>

</body>
</html>