Как изменить цвет таблицы в html

Как поменять цвет таблицы в html

Для стилизации ячеек таблиц можно использовать как свойства background , так и border .

Исходный HTML документ:

   Заголовок 1  class="bg-2">Заголовок 2   class="bg-1">Ячейка 3 Ячейка 4

table  background: #cadetblue; /* Цвет фона таблицы */ border: 2px dashed #000; /* Рамка вокруг таблицы */ > td, th  padding: 10px; /* Поля вокруг текста */ border: 1px solid #fff; /* Рамка вокруг ячеек */ > .bg-1  background: #burlywood; > .bg-2  background: #darkgreen; >

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

Компьютерный скрипт HTML оранжевого и синего цвета с черным фоном

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

Компьютерный скрипт HTML оранжевого и синего цвета с черным фоном

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

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

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

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

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

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

table  > 
tr  > 
td  >

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

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

CSS :

td.ColColor  >

HTML :

 
  ячейка 1 ячейка 2  
  ячейка 1 cell 2

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

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

Цвет и фон в таблице

Создайте таблицу, показанную на рис. 1, задав цвета через стили. Ширина таблицы составляет 100%.

Рис. 1

    Цвета в таблице body < font-size: 1.5em; /* Размер текста */ >table < width: 100%; /* Ширина таблицы */ >td < padding: 5px; >td.col1 < background: red; color: white; >td.col2 < background: orange; color: gray; >td.col3

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

67. Работаем с цветами в HTML таблице

Меняем цвет текста, фон и цвет рамок в таблице, строке, ячейке

Именно свойство color служит для изменения цвета текста и не обязательно в таблице, а где угодно на веб странице. Цвет можно задать по названию, шестнадцатеричным числом, RGB, RGBA, HSL и HSLA. Далее пример:

Пример 1, CSS

table color: #FF0000;
>

Пример 2, CSS

tr color: green;
>

Пример 3, CSS

td color: rgb(0, 0, 200);
>

Свойство background-color или просто background служит для изменения фона блока, таблицы, ячейки и прочего. Цвет можно задать по названию, шестнадцатеричным числом, RGB, RGBA, HSL и HSLA. Далее пример:

Пример 4, CSS

td background: rgb(0, 0, 255); 
color: #FFFFFF; 
padding: 10px;
>

Свойство мы уже немного научились пользоваться универсальным свойством border (позже мы его еще вспомним), но здесь мы использовать будем узкоспециализированное свойство border-color , которое меняет только цвет рамок, в отличие от border (сразу три значения можно установить: толщина, стиль и цвет). Далее пример:

Пример 5, CSS

table width: 100%; /* Ширина 100% */ 
text-align: center; /* Выравнивание по центру */ 
/* border: 2px solid #000000 */ /* Равно трем строкам ниже */ 
border-width: 2px; /* Толщина рамки */ 
border-style: solid; /* Стиль рамки */ 
border-color: #000000; /* Цвет рамки */
>
td background: rgb(105, 0, 105); /* Фон фиолетовый */ 
color: #FFFFFF; /* Цвет текста белый */ 
padding: 10px; /* Поля 10px */
>