Як змінити колір таблиці в html

Чи не здається вам, що чорно-біла таблиця виглядає нуднувато? Ось і ми так думаємо! Тому в цьому уроці ми поговоримо про те, як змінити колір таблиці в HTML. Існує три можливості додавання кольору, для кожної з яких присутній свою властивість.

1. Вказівка ​​кольору фону осередків. Здійснюється за допомогою властивості background-color.
2. Вказівка ​​кольору тексту в осередках. Здійснюється за допомогою властивості color.
3. Вказівка ​​кольору рамок осередків. Здійснюється за допомогою властивості border-color.

Раніше, щоб змінити колір, застосовувалася більш стисла форма опису рамки. Виглядала вона ось так:

І за колір тут відповідала остання частина - lightrgay.

Існують різні способи, що дозволяють задати значення кольорів в CSS. Ми ж покажемо вам, як відбувається опис кольору з використанням атрибутів.

Як змінити колір осередки

Давайте подивимося, як виглядає код в CSS. в якому поставлено колір для осередку.

Зрозуміло, змінювати кольори можна і у table. і у td. і у th. Давайте спробуємо надати нашій таблиці множення більш солідний вигляд.

Додамо стилі для осередків-заголовків з тегом th. а також для осередків по діагоналі, в яких розташовані квадрати чисел:

Результат в браузері:

Як змінити колір рамки в таблиці

Як ви вже помітили в прикладі вище, в таблиці ми змінили колір рамки. Для цього ми використовували властивість border. У ньому задаються параметри в порядку, перерахованому нижче:

1. тип лінії, в нашому випадку solid (суцільна)
2. товщина лінії, в нашому випадку 1px
3. колір лінії, в нашому випадку синій

Нагадаємо ще раз, як виглядає завдання кольору рамки для осередку:

Як змінити колір рядка в таблиці

Отже, ми з вами навчилися змінювати кольори осередків, а також осередків-заголовків, використовуючи можливості CSS. Якщо ми вказуємо стилі для таких тегів, як th або td. то повинні розуміти, що застосовні стилі будуть і до решти тегами.

Однак, бувають ситуації, коли треба змінити колір конкретної комірки або ж кілька осередків, або ж весь рядок цілком. Що робити в цьому випадку? Тут слід використовувати класи, а також здійснювати застосування їх стилів. На практиці це виглядає ось так:

А щоб змінити колір за допомогою цього класу певні рядки потрібно зробити наступне:

І результат в браузері:

Як змінити колір тексту в таблиці

Для того, щоб змінити колір тексту в таблиці використовується властивість color. Застосовувати його можна до самих різних елементів: до table, tr, th, td. Залежно від цього колір в обраному елементі буде змінений. Наприклад, для всієї таблиці задамо зелений колір шрифту:

Аналогічно можна змінювати колір для окремих осередків. А на цьому даний урок закінчується, не забудьте зробити домашнє завдання. Бувайте усі!