Как изменить цвет фона таблицы HTML

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

Более старый метод использовал атрибут BGCOLOR изменить цвет фона таблицы. Он также может быть использован для изменения цвета строки таблицы или ячейки таблицы. Но атрибут bgcolor устарел в пользу таблиц стилей, поэтому он не является оптимальным способом управления цветом фона таблицы.

Лучший способ изменить цвет фона — добавить свойство стиля. фоновый цвет к таблице, строке или тегу ячейки.

Этот пример изменяет цвет фона всей таблицы:


Чтобы изменить цвет отдельной строки, вставьте свойство background-color в поле

тег:


Вы можете изменить цвет отдельной ячейки, добавив атрибут к

тег:


Вы также можете применить цвета фона к заголовкам таблицы или тегу таким же образом:


Изменить цвет фона с помощью таблиц стилей

Однако лучше избегать использования атрибута background-color в пользу правильно отформатированной таблицы стилей. Например, вы можете установить стили в таблице стилей в заголовке вашего HTML-документа или установить их во внешней таблице стилей. Подобные изменения в HEAD или во внешней таблице стилей могут выглядеть следующим образом для таблиц, строк и ячеек:

table {background-color: # ff0000; }
tr {background-color: yellow; }
td {background-color: # 000; }

Настройка цвета фона столбца

Лучший способ установить цвет фона для столбца — создать класс стиля, а затем назначить этот класс ячейкам в этом столбце. Создание класса позволяет назначить этот класс ячейкам в определенном столбце, используя один атрибут.

CSS:

td.ColColor {background-color: blue; }

HTML:




ячейка 1клетка 2
ячейка 1клетка 2

Одним из значительных преимуществ управления фоновыми цветами с помощью таблицы стилей является то, что вы можете изменить свой выбор цвета в более позднее время. Вместо того, чтобы просматривать документ HTML и вносить изменения в каждую отдельную ячейку, вы можете внести одно изменение в выбор цвета в CSS, который будет немедленно применен к каждому экземпляру, где класс = «ColColor» синтаксис появляется.

Несмотря на то, что встраивание CSS в ваш HTML или вызов отдельного файла CSS добавляет немного административных издержек, помимо просто изменения атрибута HTML, вы обнаружите, что использование CSS уменьшает количество ошибок, ускоряет разработку и улучшает переносимость вашего документа.

Ссылка на основную публикацию