Стилизация таблиц и чередующиеся строки

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 21
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы сосредоточимся на структуре и стилизации HTML-таблиц. Таблицы — мощный инструмент для представления структурированных данных, таких как расписания, прайс-листы или финансовые отчеты. Правильная разметка не только делает их семантически верными, но и открывает широкие возможности для стилизации с помощью CSS. Мы попрактикуемся в создании базовой структуры, группировке контента с помощью семантических тегов и научимся создавать легко читаемые таблицы с чередующимися по цвету строками, что значительно улучшает пользовательский опыт при работе с большими объемами данных.
Список тем

Создание основной структуры таблицы

id: 37839_table-structure-1

Любая таблица начинается с основного тега-контейнера. Ваша задача — создать базовую структуру таблицы, которая будет содержать строки и ячейки. В CSS уже заданы базовые границы, чтобы вы сразу увидели результат.

CSS
table, th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

table {
  width: 100%;
  border-collapse: collapse;
}
HTML
<input1>
  <tr>
    <td>Пользователь</td>
    <td>Статус</td>
  </tr>
  <tr>
    <td>Алексей</td>
    <td>Онлайн</td>
  </tr>
</input1>
Для создания таблицы в HTML используется тег <table>. Весь контент таблицы, включая строки и ячейки, должен находиться внутри этого тега.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление строк и ячеек

id: 37839_table-structure-2

Таблицы состоят из строк, а строки — из ячеек. Добавьте в таблицу одну строку, содержащую две ячейки с данными о новом пользователе.

CSS
table, th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

table {
  width: 100%;
  border-collapse: collapse;
}
HTML
<table>
  <tr>
    <td>Алексей</td>
    <td>Онлайн</td>
  </tr>
  <input1>
    <input2>Мария</input2>
    <input2>Офлайн</input2>
  </input1>
</table>
Строка таблицы создается с помощью тега <tr> (table row). Внутри строки каждая ячейка с данными создается тегом <td> (table data).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Заголовок таблицы

id: 37839_table-header-3

Чтобы таблица была понятной, у нее должны быть заголовки столбцов. Используйте специальные теги для создания строки заголовка и ячеек-заголовков. В CSS для них уже подготовлен стиль (фон и жирное начертание).

CSS
table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

th {
  font-weight: bold;
}
HTML
<table>
  <input1>
    <tr>
      <input2>Пользователь</input2>
      <input2>Статус</input2>
    </tr>
  </input1>
  <tr>
    <td>Алексей</td>
    <td>Онлайн</td>
  </tr>
</table>
Для семантического выделения заголовка таблицы используется контейнер <thead>. Внутри него, в строке <tr>, вместо обычных ячеек <td> используются ячейки-заголовки <th> (table header).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка данных и чередующиеся строки

id: 37839_table-zebra-rows-4

Чтобы применить стиль для чередующихся строк (эффект 'зебры'), строки с данными нужно сгруппировать. CSS уже настроен на окрашивание каждой четной строки, но сработает это только при правильной разметке. Оберните строки с данными в соответствующий тег.

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
thead {
  background-color: #f2f2f2;
}

/* Стиль для четных строк в теле таблицы */
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
HTML
<table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Цена</th>
    </tr>
  </thead>
  <input1>
    <tr>
      <td>Молоко</td>
      <td>80 ₽</td>
    </tr>
    <tr>
      <td>Хлеб</td>
      <td>50 ₽</td>
    </tr>
    <tr>
      <td>Сыр</td>
      <td>250 ₽</td>
    </tr>
     <tr>
      <td>Масло</td>
      <td>150 ₽</td>
    </tr>
  </input1>
</table>
Все строки с основными данными таблицы (<tr>) следует помещать внутрь контейнера <tbody>. Это не только семантически верно, но и позволяет применять к ним специфические CSS-правила, такие как :nth-child(even).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стиль при наведении на строку

id: 37839_table-hover-rows-5

Интерактивности много не бывает! В CSS добавлено правило, которое подсвечивает строку при наведении на нее курсора. Чтобы оно сработало, таблице нужно добавить специальный класс.

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

/* Стиль для строк при наведении */
.table-hover tbody tr:hover {
  background-color: #eaf6ff;
}
HTML
<table class="input1">
  <tbody>
    <tr>
      <td>Задача 1</td>
      <td>В процессе</td>
    </tr>
    <tr>
      <td>Задача 2</td>
      <td>Выполнено</td>
    </tr>
    <tr>
      <td>Задача 3</td>
      <td>Ожидание</td>
    </tr>
  </tbody>
</table>
Проанализируйте CSS. Правило :hover применяется к строкам таблицы с классом .table-hover. Вам нужно добавить этот класс к тегу <table>, используя атрибут class.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация первого столбца

id: 37839_table-first-column-6

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

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

/* Выделяем первый столбец */
tbody tr td:first-child {
  font-weight: bold;
}
HTML
<table>
  <tbody>
    <tr>
      <input1>Рейс SU-101</input1>
      <td>Москва</td>
      <td>14:30</td>
    </tr>
    <tr>
      <input1>Рейс FV-212</input1>
      <td>Санкт-Петербург</td>
      <td>15:15</td>
    </tr>
  </tbody>
</table>
CSS-селектор tbody tr td:first-child нацелен на первую ячейку (<td>) в каждой строке (<tr>) внутри <tbody>. Убедитесь, что вы используете тег <td> для всех ячеек.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подвал таблицы и объединение ячеек

id: 37839_table-footer-colspan-7

Таблицы часто содержат итоговую строку. Для этого используется специальная секция. Создайте 'подвал' таблицы и итоговую строку в нем. Первая ячейка в этой строке должна объединять два столбца, чтобы текст красиво расположился.

Предыдущая темаСледующая тема
НайтиКурс.Ру