Мастерство в работе с колонками HTML-таблиц

Введение

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

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

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

В файле index.html вашего проекта добавьте следующий код, чтобы создать базовую HTML-таблицу:

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Название продукта</th>
    <th>Цена</th>
    <th>Количество</th>
  </tr>
  <tr>
    <td>Продукт 1</td>
    <td>$10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Продукт 2</td>
    <td>$20</td>
    <td>10</td>
  </tr>
</table>

Стилизация колонок с использованием тега

Теперь добавим тег <col> для стилизации колонок таблицы. Замените тег <colgroup> в вышеприведенном коде на следующий:

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

В приведенном выше коде мы добавили тег <col> с атрибутом style, чтобы применить разные цвета фона к каждой колонке таблицы.

Использование атрибута span

Вы можете использовать атрибут span тега <col> для выбора сразу нескольких колонок. Например:

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

В этом примере второй тег <col> выбирает сразу две колонки, используя атрибут span со значением 2.

Использование глобальных и событийных атрибутов

Тег <col> поддерживает глобальные атрибуты и событийные атрибуты для добавления дополнительного стилизации и функциональности к колонкам таблицы. Например, вы можете использовать атрибут class, чтобы добавить CSS-класс к колонкам:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

Теперь вы можете применить стили CSS к колонкам таблицы, используя классы .product-name и .price-quantity.

Добавление единиц измерения в столбцы таблицы

Вы можете добавить единицы измерения в колонки таблицы, такие как валютные единицы или процентные значения, с использованием псевдо-элементов ::before и ::after и CSS. Например:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

В приведенном выше коде псевдо-элемент ::before добавляет знак доллара перед значениями в первых двух колонках, в то время как псевдо-элемент ::after добавляет знак процента после значений в последней колонке.

Резюме

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

Колонка HTML-таблицы