Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

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

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

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

Пример (css)
table {
    color: #FF0000;
} 

Далее пример в формате зарезервированного слова:

Пример (css)
tr {
    color: green;
} 

Далее пример в формате RGB:

Пример (css)
td {
    color: rgb(0, 0, 200);
} 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

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

Пример (css)
td {
    background: rgb(0, 0, 255);
    color: #FFFFFF;
    padding: 10px;
} 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

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

Пример (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 */
} 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

В этом уроке познакомились со свойствами color, background и border-color. В курсе по CSS мы еще вернемся к ним, а сейчас выполняйте практику и переходите к следующему уроку.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Селекторы атрибутов: простой выборСелекторы в CSS
Общая информация и форматирование таблицВерстка таблиц
Отступы между ячейками в HTML-таблицахТаблицы в HTML
Первое знакомство с PythonЗнакомство с Python
Итоги раздела «Вводные уроки по Python»Знакомство с Python
Модули в PythonЗнакомство с Python
Свойства форматирования all, clear и clipФорматирование
Итоги раздела «Структуры данных в Python»Знакомство с Python
Цветные строки в HTML-таблицеТаблицы в HTML
Раздел «Таблицы в HTML»
45. УРОК: 1. Что такое таблица в HTML
46. УРОК: 2. Тег TR в HTML таблицах
47. УРОК: 3. Тег TD в HTML таблицах
48. ПРАКТИКА: 4. Практика по атрибутам colspan и rowspan
49. ПРАКТИКА: 5. Вторая практика по атрибутам colspan и rowspan
50. УРОК: 6. Рамки для таблиц, строк и ячеек в HTML
51. УРОК: 7. Cтруктурирование HTML-таблиц
52. УРОК: 8. Заголовок (тег CAPTION) HTML-таблиц
53. УРОК: 9. Отступы между ячейками в HTML-таблицах
УРОК 54. 10. Работаем с цветами в HTML-таблице
Вы здесь
55. УРОК: 11. Цветные строки в HTML-таблице
56. ПРАКТИКА: 12. Практика поиска ошибок в HTML-таблицах
57. ТЕСТ: 13. Тест по разделу «Таблицы в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

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

Удачи в обучении!

Закрыть окно