Чат PHP-разработчиков
Как изменить цвет таблицы в 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
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (7)


Mary

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

trialex3

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

1111

Артем, не пойму, почему не работает rowGreen(спать пора)). И, откуда ты берешь эти названия: rowGreen, specialTd??

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table6-test</title>
</head>
<body>
<table >
    <style>
        table {
            border: solid 1px green;
            border-collapse: collapse;
            border-spacing: 10px;
            caption-side: top;
        }
        td {
            border: solid 1px green;
            border-left: solid 1px green;
            border-right: solid 1px green;
            border-bottom: solid 1px green;
            border-top: solid 1px green;
            text-align: center;
            padding: 30px;
            padding-bottom: 20px;
            padding-top: 20px;
            padding-right: 20px;
            text-align: center;
            vertical-align: top;
            height:70px;
            width:70;
            background-color: lightgreen;
                              }
        th {
            border: solid 5px green;
            background-color: red;
        }
        .specialTd {
            vertical-align: bottom;
            text-align: right;
               }
        .rowGreen {
            background-color: lawngreen;
        }
    </style>
    <tr>
        <td class="specialTd" rowspan="2"colspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr class="rowGreen">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
   </table>
</body>
</html>

<tr class="rowGreen">

ivashkevich

Привет. Дело в том, что стили для td перезатирают стили для .rowGreen, так как они по правилам CSS считаются более приоритетными. Можно указать класс .rowGreen для каждой td отдельно, либо сделать так:

.rowGreen td {тут ваши стили}

И тогда это будут стили для всех td, расположенных внутри элемента с классом .rowGreen. Это правило будет уже более приоритетным, чем просто td.

Ну а имена просто придумываются :)

alsvis2013

Подскажите пожалуйста, как изменить цвет текста для отдельно взятой таблицы, а не для всех сразу?

ivashkevich

Задать этой таблице какой-то класс и прописать стили для этого класса. Типа такого:
CSS:

.color {
// тут стили
}

HTML:

<table class="color">
alsvis2013

Спасибо, всё получилось!

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований