Очевидно, что прежде чем применить различные свойства CSS к html-таблице необходимо ее создать. О том как это сделать можно прочитать здесь.
В моем случае законченный вариант таблицы будет выглядеть вот так:
Это довольно простая таблица, состоящая из четырех столбцов и пяти строк. Ее html-код выглядит вот так:
Обратите особое внимание на атрибут rowspan, т.к. именно с его помощью мы можем объединить четыре ячейки в первом столбце в одну.
Теперь переходим непосредственно к CSS.
Начать можно с ширины таблицы. Ее можно задать в css-файле с помощью свойства width (значения выставляются в пикселах).
Затем можно перейти к границам таблицы. Для этого можно использовать сразу несколько свойств: border (задает толщину, стиль и цвет границы) и border-collapse:
Для повышения уровня удобочитаемости текста можно использовать свойство padding:
Теперь давайте обратим свое внимание на заголовки этой таблицы.
Первое что бросается в глаза это цвет ячеек. В данном случае он синий (но Вы можете поставить любой другой). Что еще мы видим? Все слова написаны прописными буквами, окрашены в белый цвет, выравнены по центру и имеют свой межбуквенный интервал. Все вышеперечисленные операции представлены на картинке:
А теперь внимание!
При наведении курсора на любую из оставшихся четырех строк таблицы она будет иметь зеленый цвет и все находящиеся в ячейках значения сместятся вправо. Такого эффекта можно добиться используя следующие свойства:
В заключение хочу привести общую схему взаимодействия css-файла с html-страницей:
В html-странице прописываем ссылку на css-файл → в css-файле прописываем какое-то свойство и его значение → все это сохраняем → обновляем html-страницу и убеждаемся что прописанное свойство вступило в силу → сохраняем html-страницу.
Спасибо за внимание!
Надеюсь все получилось и теперь Вы сделаете свой сайт гораздо более красочным и интересным.
Предлагаю подписаться на канал и следить за выходом новых интересных статей.