12.03.2017   2649
Как изменить цвет таблицы в 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;
    ...
}

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

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Комментарии

 Mary 2017-05-26 14:32:29
+1

Яркие таблицы, безусловно, более привлекательны. Черно-белую таблицу несильно хочется изучать, она кажется скучной, а коли со вкусом раскрасить ее, другое дело будет.

Ответить
 trialex3 2017-08-05 22:10:53
0

Но можно не добавлять в стайл .rowGreen {background-color:green;}. Можно просто вписать это в <tr>
что бы получалось <tr style="background-color: yellow" ...... </tr>

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности