Чат веб-разработчиков
Как изменить цвет таблицы в HTML

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

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

Код доступен только после покупки курса HTML для начинающих.

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

Читайте также
Комментарии


Mary
Mary

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

trialex3
trialex3

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

1111
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
ivashkevich

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

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

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

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

alsvis2013
alsvis2013

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

ivashkevich
ivashkevich

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

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

HTML:

<table class="color">
alsvis2013
alsvis2013

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