Мастерство в группировке колонок HTML-таблицы

Введение

HTML-тег <colgroup> используется для применения различных стилей к одной или более колонкам в HTML-таблице. Тег <colgroup> устраняет необходимость определения стилей в каждой ячейке таблицы. С использованием атрибута span этого тега вы можете применить стили к колонкам, к которым вы хотите их применить.

В этом практическом занятии вы научитесь создавать таблицу с цветными колонками с использованием HTML-тега <colgroup>.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/fig_cap -.-> lab-70728{{"Группировка колонок в HTML-таблице"}} html/tables -.-> lab-70728{{"Группировка колонок в HTML-таблице"}} html/complex_tbl -.-> lab-70728{{"Группировка колонок в HTML-таблице"}} html/tbl_access -.-> lab-70728{{"Группировка колонок в HTML-таблице"}} end

Создание HTML-таблицы

Сначала создайте HTML-таблицу, к которой вы хотите применить стили с использованием тега <colgroup>. Добавьте следующий код в ваш HTML-файл:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Вышеприведенный код создает таблицу с границей толщиной 1 и подписью "Colored Table". Тег <colgroup> содержит три тега <col>, которые применяют разные цвета к трем колонкам соответственно. Тег <thead> содержит три тега <th>, которые содержат заголовки трех колонок. А тег <tbody> содержит две строки по три колонки в каждой.

Запись CSS для более красивого стилизации

В этом шаге мы будем использовать CSS для применения стилей к таблице, созданной выше.

Добавьте следующий код CSS в ваш HTML-файл:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Проверьте завершенный код в вашем файле index.html. Вы должны увидеть таблицу с тремя колонками, каждая из которых имеет свой цвет.

Резюме

HTML-тег <colgroup> используется для применения различных стилей к одной или более колонкам таблицы в HTML, устраняя необходимость определения стилей в каждой ячейке таблицы. В этом практическом занятии вы узнали, как создавать таблицу с цветными колонками с использованием тега <colgroup> и применять стили к ней с использованием CSS.