Стилизация таблиц с помощью CSS

Введение

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

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

Необходимый файл index.html уже создан для вас. Ваша задача — написать CSS-код в файле styles.css для стилизации таблицы. Вы можете просматривать изменения в реальном времени на вкладке "Web 8080" вашего рабочего пространства.

Установите border-collapse: collapse для таблицы

На этом шаге мы начнем стилизацию нашей таблицы. По умолчанию ячейки HTML-таблиц имеют свои собственные отдельные границы, что может привести к эффекту "двойной границы", выглядящей толстой и устаревшей. Свойство border-collapse контролирует, разделены ли границы таблицы или схлопнуты в одну границу.

Мы установим border-collapse в значение collapse для создания четких однолинейных границ.

Сначала откройте файл styles.css из файлового проводника слева. Добавьте следующее правило CSS в файл.

table {
  border-collapse: collapse;
}

После добавления кода сохраните файл. Хотя вы пока не увидите границ, это свойство необходимо для следующего шага. Вы можете переключиться на вкладку "Web 8080", чтобы увидеть предварительный просмотр в реальном времени, хотя на данном этапе визуальное изменение будет минимальным.

Примените border: 1px solid black к th и td

Теперь, когда мы установили для таблицы режим схлопнутых границ, давайте добавим фактические границы к ячейкам заголовка (th) и ячейкам данных (td). Мы можем выбрать оба элемента одновременно, используя селектор, разделенный запятыми.

На этом шаге вы добавите сплошную черную границу толщиной 1px к каждой ячейке таблицы.

Добавьте следующее правило CSS в ваш файл styles.css, ниже существующего правила table.

th,
td {
  border: 1px solid black;
}

Сохраните файл и переключитесь на вкладку "Web 8080". Теперь вы должны увидеть чистую однолинейную границу вокруг каждой ячейки таблицы.

Используйте padding: 8px для ячеек таблицы

Теперь у таблицы есть границы, но содержимое внутри ячеек касается краев, что выглядит тесно. Мы можем использовать свойство padding для добавления пространства между содержимым и границей ячейки, улучшая читаемость.

На этом шаге вы добавите 8px отступа ко всем ячейкам таблицы.

Измените существующее правило th, td в styles.css, чтобы включить свойство padding.

th,
td {
  border: 1px solid black;
  padding: 8px;
}

После сохранения файла снова проверьте вкладку "Web 8080". Вы заметите, что ячейки стали больше, а текст имеет комфортное пространство вокруг себя.

Добавьте background-color для строки заголовка таблицы

Чтобы выделить заголовок таблицы из строк данных, общепринятой практикой является присвоение ему другого цвета фона. Это визуально отделяет заголовки столбцов от содержимого.

На этом шаге вы добавите светло-серый цвет фона к ячейкам заголовка (th).

Добавьте новое правило CSS, нацеленное только на элементы th в styles.css.

th {
  background-color: #f2f2f2;
}

Сохраните файл и просмотрите результат на вкладке "Web 8080". Строка заголовка вашей таблицы теперь должна иметь отличительный цвет фона, что облегчит ее идентификацию.

Реализуйте text-align: left для ячеек данных

Выравнивание текста имеет решающее значение для читаемости таблицы. По умолчанию ячейки заголовка (th) выравниваются по центру, а ячейки данных (td) — по левому краю. Хотя выравнивание по левому краю является поведением по умолчанию для элементов td, явное его указание — хорошая практика для обеспечения согласованного отображения во всех браузерах.

На этом шаге вы явно установите выравнивание текста для ячеек данных по левому краю.

Добавьте новое правило CSS для селектора td в ваш файл styles.css.

td {
  text-align: left;
}

Сохраните файл. Поскольку это поведение по умолчанию, вы можете не увидеть визуальных изменений на вкладке "Web 8080", но ваш файл стилей теперь более надежен и явно описывает предполагаемый дизайн. Это завершает базовое оформление нашей таблицы.

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно преобразовали обычную HTML-таблицу в стильную, профессионально выглядящую таблицу, используя основные свойства CSS.

В этой лабораторной работе вы научились:

• Использовать border-collapse: collapse; для создания чистых, одинарных границ таблицы.
• Применять border к ячейкам заголовка (th) и ячейкам данных (td).
• Добавлять внутренние отступы к ячейкам с помощью свойства padding.
• Выделять заголовок таблицы, устанавливая background-color.
• Управлять горизонтальным выравниванием текста в ячейках с помощью text-align.

Эти навыки необходимы для эффективного представления табличных данных в Интернете.