Чат Telegram
Группа ВКонтакте
Как изменить цвет таблицы в HTML

Учимся изменять цвет таблицы в HTML

Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.

  1. Указание цвета фона ячеек. Осуществляется с помощью свойства background-color.
  2. Указание цвета текста в ячейках. Осуществляется с помощью свойства color.
  3. Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color.

Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так:

border: 1px solid lightgray

И за цвет здесь отвечала последняя часть – lightrgay.

Существуют различные способы, позволяющие задать значение цветов в CSS. Мы же покажем вам, как происходит описание цвета с использованием атрибутов.

Как изменить цвет ячейки

Давайте посмотрим, как выглядит код в CSS, в котором задан цвет для ячейки.

td {
  background-color: цвет-фона;
}

Разумеется, изменять цвета можно и у table, и у td, и у th. Давайте попробуем придать нашей таблице умножения более солидный вид.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Таблица умножения</title>
    <style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
        }

        td, th {
            border: solid 1px blue;
            padding: 10px;
        }

        th {
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<table>
    <caption>Таблица умножения</caption>
    <tr>
        <th>*</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>2</th>
        <td style="background-color: greenyellow">4</td>
        <td>6</td>
    </tr>
    <tr>
        <th>3</th>
        <td>6</td>
        <td style="background-color: greenyellow">9</td>
    </tr>
</table>
</body>
</html>

Результат в браузере:
Раскрашенная таблица умножения

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

Как вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:

  1. тип линии, в нашем случае solid (сплошная)
  2. толщина линии, в нашем случае 1px
  3. цвет линии, в нашем случае синий

Напомним ещё раз, как выглядит задание цвета рамки для ячейки:

td {
    border: 1px solid blue;
}

Как изменить цвет строки в таблице

Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td, то должны понимать, что применимы стили будут и к остальным тегам.

Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так:

.rowGreen {
    background-color:green;
}

А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Таблица с чередованием цвета в строках</title>
    <style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
        }

        td, th {
            border: solid 1px blue;
            padding: 10px;
        }

        .rowGreen {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<table>
    <caption>Таблица с чередованием цвета в строках</caption>
    <tr class="rowGreen">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr class="rowGreen">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
</table>
</body>
</html>

И результат в браузере:
Таблица с чередованием цвета в строках

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

Для того, чтобы изменить цвет текста в таблице используется свойство color. Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:

table {
    color: green;
    ...
}

Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • добавьте цвета в ячейки с заголовками - задайте цвет фона и текста
Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Комментарии (11)
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований