Цвета в таблице html: Цвет и фон в таблице

Содержание

Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child

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

С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child, который позволяет выбрать все четные или нечетные элементы, используя значения odd— нечетные или even— четные элементы, либо числовое выражение an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2. .. и так далее. Перейдем от теории к практике.

Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4 Динамо 30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30 11 10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

HTML-код таблицы с минимальным оформлением:

<style>
  table {
    border-collapse: collapse;
    margin: 0px auto;
  }
  th, td {
    border: solid 1px #000;
    padding: 5px;
  }
</style>
<table>

  <thead>
    <tr>
      <td>М</td><td>Команда</td><td>И</td><td>В</td><td>Н</td><td>П</td><td>Заб</td><td>Проп</td><td>О</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>Зенит</td><td>30</td><td>20</td><td>7</td><td>3</td><td>58</td><td>17</td><td>67</td>
    </tr>
    <tr>
      <td>2</td><td>ЦСКА</td><td>30</td><td>19</td><td>3</td><td>8</td><td>67</td><td>27</td><td>60</td>
    </tr>
    <tr>
      <td>3</td><td>Краснодар</td><td>30</td><td>17</td><td>9</td><td>4</td><td>52</td><td>27</td><td>60</td>
    </tr>
    <tr>
      <td>4</td><td>Динамо</td><td>30</td><td>14</td><td>8</td><td>8</td><td>53</td><td>36</td><td>50</td>
    </tr>
    <tr>
      <td>5</td><td>Рубин</td><td>30</td><td>13</td><td>9</td><td>8</td><td>39</td><td>33</td><td>48</td>
    </tr>
    <tr>
      <td>6</td><td>Спартак</td><td>30</td><td>12</td><td>8</td><td>10</td><td>42</td><td>42</td><td>44</td>
    </tr>
    <tr>
      <td>7</td><td>Локомотив</td><td>30</td><td>11</td><td>10</td><td>9</td><td>31</td><td>25</td><td>43</td>
    </tr>
    <tr>
      <td>8</td><td>Мордовия</td><td>30</td><td>11</td><td>5</td><td>14</td><td>22</td><td>43</td><td>38</td>
    </tr>
    <tr>
      <td>9</td><td>Терек</td><td>30</td><td>10</td><td>7</td><td>13</td><td>30</td><td>30</td><td>37</td>
    </tr>
    <tr>
      <td>10</td><td>Кубань</td><td>30</td><td>8</td><td>12</td><td>10</td><td>32</td><td>36</td><td>36</td>
    </tr>
    <tr>
      <td>11</td><td>Амкар</td><td>30</td><td>8</td><td>8</td><td>14</td><td>25</td><td>42</td><td>32</td>
    </tr>
    <tr>
      <td>12</td><td>Уфа</td><td>30</td><td>7</td><td>10</td><td>13</td><td>26</td><td>39</td><td>31</td>
    </tr>
    <tr>
      <td>13</td><td>Урал</td><td>30</td><td>9</td><td>3</td><td>18</td><td>31</td><td>44</td><td>30</td>
    </tr>
    <tr>
      <td>14</td><td>Ростов</td><td>30</td><td>7</td><td>8</td><td>15</td><td>27</td><td>51</td><td>29</td>
    </tr>
    <tr>
      <td>15</td><td>Торпедо</td><td>30</td><td>6</td><td>11</td><td>13</td><td>28</td><td>45</td><td>29</td>
    </tr>
    <tr>
      <td>16</td><td>Арсенал Тула</td><td>30</td><td>7</td><td>4</td><td>19</td><td>20</td><td>46</td><td>25</td>
    </tr>
  </tbody>
</table>

Таблица имеет много строк и столбцов и при однородном фоне ее тяжело просматривать. Для улучшения восприятия здесь как раз поможет чередование фонового цвета у четных и нечетных строк. Для этого добавляем следующий CSS-код:

<style>
  tbody tr:nth-child (odd) {
    background-color: #C9E4F6;/* фон нечетных строк */
  }
  tbody tr:nth-child (even) {
    background-color: #B4DAF2;/* фон четных строк */
  }
</style>

Результат:

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4 Динамо 30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30
11
10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

Можно сделать акцент на столбцы оформив

вертикальную зебру. Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td. А при наведении на строку выделять ее цветом с помощью псевдокласса hover:

<style>
  td:nth-child (odd) {
    background-color: #C9E4F6;/* фон нечетных столбцов */
  }
  td:nth-child (even) {
    background-color: #B4DAF2;/* фон четных столбцов */
  }
  tr:hover td{
    background: #B4FFF2;/* фон строки при наведении */
  }
</style>

Результат:

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4
Динамо
30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30 11 10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

Тоже самое можно сделать и для списков. В статье горизонтальное меню с помощью CSS мы сделали несколько вариантов горизонтального меню. Вот одно из них:

Это меню можно немного оживить с помощью чередования фонового цвета у соседних пунктов. Для этого нужно всего лишь добавить одну строчку кода:

<style>
  ul#menu li:nth-child (odd) {
    background-color: #01638D;/* фон нечетных пунктов меню */
  }
</style>

Результат:

Полный код меню:

<style>
  #menu, #menu li {
    margin: 0;
    padding: 0;
  }
  #menu {
    text-align: center;
    background: #03658e;
  }
  #menu li{
    display:inline-block;
    text-align: center;
    width: 20%;
  }
  #menu a {
    display: block;
    padding: 5px 15px;
    color: #fff;
    font-size:150%;
    text-decoration: none;
  }
  #menu a:hover {
    background: #8AB8CC;
  }
  #menu li:nth-child (odd) {
    background: #278CB7;/* фон нечетных пунктов меню */
  }
</style>
<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О сайте</a></li>
</ul>

Псевдокласса nth-child позволяет применять различные свойства не только к четным или нечетным элементам, но и к конкретным элементам. Так, например, если необходимо изменить цвет шрифта только в первом пункте списка, то поможет следующее CSS правило:

li:nth-child (1){
  color:orange;
}

Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:

tr:nth-child (n + 3){
  background-color: silver;
}

Можно выделить какой-то диапазон, например с четвертого по седьмой:

tr:nth-child (n+4):nth-child (-n+7){
  font-size: 20px;
}

Так с помощью простых манипуляций с CSS стилями и псевдокласса nth-child можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.

Страница со всеми примерами из статьи.

Пробуйте и предлагайте свои варианты. На этом все, до новых встреч!

Стандартные 140 цветов, применяемых в веб-дизайне. Таблица стилей 140 colors


Original: "140 стандартных (безопасных) веб-цветов",
by WebSunSey on 04 Nov 2019


При стилизации html-страниц часто необходимо использовать различные цвета. Согласно спецификации HTML5 вся стилизация страниц производится в каскадных таблицах стилей - CSS. Обычно на сайтах применяют подключение к html-страницам внешних файлов css, в которых и прописываются все нужные стили. При этом часто возникает необходимость в таблице стилей для каждого элемента прописывать определённый цвет (текста, фона, тени).

Для того, чтобы облегчить работу по стилизации html-страниц, я написал таблицу стилей для стандартных 140 веб-цветов, применяемых в веб-дизайне и распознаваемых всеми браузерами.

С помощью этой таблицы стилей 140 стандартных веб-цветов отпадает необходимость прописывать цвет для каждого html-элемента в каскадной таблице стилей. Достаточно просто подключить к html-странице таблицу стилей 140 стандартных веб-цветов 140colors.css и уже в html-коде применять для элементов необходимый цвет, просто указав его название в качестве класса.

Например, нам необходимо задать синий цвет фона для заголовка h3. Для этого достаточно указать для него:

Пример

<h3>Заголовок на синем фоне</h3>

Результат:

Заголовок на синем фоне

Или задать цвет фона параграфа золотым - gold:

Пример

<p>Параграф из золотым фоном.</p>

Результат:

Параграф из золотым фоном.

Т.е. цвет фона в данном случае указывается в качестве класса. При этом по умолчанию текст на светлых фонах отображается чёрным цветом, а на тёмных фонах - белым цветом.

Также для большей контрастности и эффектности отображения белому тексту на тёмном фоне добавляется тень (как правило чёрного цвета). При этом вы можете открыть код самой таблице стилей 140 цветов и отредактировать, при необходимости поменяв и подкорректировав как цвет текста, так и цвет и толщину тени.

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

Пример

<p>Параграф из золотым фоном.</p>

Результат:

Параграф из золотым фоном.


Полный список всех 140 стандартных названий веб-цветов вы можете увидеть на странице 140 стандартных (безопасных) веб-цветов.

Скачать каскадную таблицу стилей из названиями (классами) 140 стандартных веб-цветов вы можете здесь: 140colors.css


HTML цвета — БЛОКНОТ ПАРТНЕРА

HTML цвета

HTML цвета используются для оформления страниц сайта, дизайнерских работ по графике.

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

У языка разметки гипертекста(HTML) есть возможность задать цвет для нужных элементов и эту возможность предоставляют HTML-атрибуты.

Цветовое оформление страниц сайта делается с помощью таблицы цветов HTML.

Таблицу «безопасных» цветов можно посмотреть, нажав здесь.

Таблица цветов содержит в себе формат кодов HTML:

Каждый код HTML состоит из символа «#» и 6 букв или цифр. Используется шестнадцатеричная система счисления. Например, «FF» в шестнадцатеричной системе соответствует 255 в десятеричной.

Значение символов:

Первыми двумя символами в коде цвета HTML обозначается насыщенность красного цвета. 00 — наименее насыщенный и FF — наиболее насыщенный.

Третий и четвертый символы означают насыщенность зеленого, а пятый и шестой — синего. Таким образом, комбинируя разные по насыщенности оттенки красного, зеленого и синего, мы можем получить фактически любой угодный нам цвет;)

Примеры:

#FF0000 — Этим кодом HTML мы сообщаем браузеру команду отображать максимально возможный красный цвет и вообще не отображать зеленый и синий. В результате, естественно, мы получаем чистый красный цвет:

#00FF00 — Этот код HTML отображает только зеленый, без красного и синего.

#0000FF — Этот код HTML отображает только синий, без красного и зеленого.

#FFFF00 — Сочетание красного и зеленого цветов дает нам желтый.

#CCEEFF -Взять немного красного, чуть больше зеленого и по максимуму синего для получения небесно-голубого.

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

Этот вариант исключать нельзя, даже несмотря на то, что она довольно широко используется и относится к открытой и доступной информации.

Есть способ задать цвет – написать его название на английском. В основном браузеры читают и адекватно воспринимают названия основных цветов, а также их оттенков, помеченных значениями dark (темно), light (светло). К примеру, черный цвет задается как Black, а темно-красный – DarkRed.

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

Также для ускорения и упрощения процесса определения html-кода цветов рекомендуется использовать программу Color Cop. Программа бесплатная и ее можно скачать с официального сайта Colorcop.net

Утилита Color Cop помогает быстро идентифицировать цвет и сохранить его код.

Программа содержит несколько инструментов:

  • пипетку, при помощи которой можно указать цвет,
  • «увеличительное стекло», помогающее приблизить выбранную область экрана,
  • палитру дополнительных цветов для текущего цвета.

Программа способна автоматически копировать код цвета в буфер обмена, сохранять последние семь выбранных цветов на палитре истории.

При помощи Color Cop можно сохранять код цвета в разных форматах: шестнадцатеричный HTML, шестнадцатеричный Delphi, Powerbuilder, Visual Basic, Clarion, Visual C++, RGB.

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

Окно программы выглядит так:

Интерфейс программы Color Cop
  1. Пипетка для определения цвета
  2. «Увеличительное стекло»
  3. Указатель цвета в RGB формате
  4. Окно вывода цвета для html кода
  5. Окно для показа определенного цвета
  6. Окно для показа точки определения в увеличенном масштабе
  7. Кнопка для вывода палитры дополнительных цветов для текущего цвета

Палитра дополнительных цветов для текущего цвета выглядит так:

Палитра дополнительных цветов для текущего цвета

Скачиваем и запускаем. Запускаем программу. Как это работает?

Нажимаем левой клавишей мыши по изображению пипетки и, удерживая клавишу, перетаскиваем курсор к точке на изображении, цвет которых хотим узнать (для удобства – нижний экран показывает в увеличении место где мы проводим курсором, а верхний).

В верхнем окне мы видим цвет, а слева его номер в RGB формате.

Посмотрите видео о программе Color Cop, которая упрощает работу веб-дизайнера.

 

Примеры задания HTML цветов при помощи кодов RGB цветов в HTML-документах и таблице стилей CSS, изменение цвета при помощи атрибута color

Давайте на примерах посмотрим, как задать цвет для страницы сайта и HTML-документа. Рассмотрим как задать цвет путем написания при помощи комбинаций RGB так и просто обычными словами.

Немного теории. И так Вы наверное уже в курсе, что все внешнее оформление HTML-страниц осуществляется при помощи каскадных таблиц стилей(CSS) и указание кода цвета непосредственно в HTML-документах, при помощи HTML-атрибутов встречается крайне редко, а так же очень вредит Вашим проектам. К тому, же бывают ситуации, когда нельзя по тем или иным причинам использовать для стилевого оформления таблицы стилей CSS, к примеру, если Вы хотите создать почтовую рассылку subscribe.

Когда еще не было каскадных таблиц стилей, фон HTML-документа, цвет ссылок в документе, а так же цвет самого текста задавался при помощи HTML-атрибутов непосредственно внутри HTML-документа, цвет фона страницы задавался в тэге <body> путем написания атрибута bgcolor, то есть задавался цвет элементу BODY, который был фоном HTML-страницы, а цвет текста на всей странице с помощью атрибута «text».

И выглядело это все примерно так:

<html>
<head>
</head>
<body bgcolor=»#cfa8de» text=»red»><p>Текст, который мы сделали красным цветом</p>
</body>
</html>

Если Вы скопируете данный пример, в Ваш текстовый редактор(в моем случаем это Notepad++), сохраните документ с расширением .html и откроете его в браузере, то увидите:

Цвет текста на всей странице с помощью атрибута «text»

А видим мы, что цвет текста на HTML-странице, который мы написали внутри тега <body> при помощи атрибута «text» изменился на красный, то есть параметр red атрибута text сработал, браузер понял что нам нужен красный текст и способ задания цвета при помощи названия этого цвета действительно работает. Так же браузер прекрасно понял RGB комбинацию, которую мы задали через атрибут bgcolor все того же тэга <body>.

Давайте изменим предыдущий пример:

<html>
<head>
</head>
<body bgcolor=»#cfa8de» text=»red»><p>Текст, который мы сделали красным цветом<br>
<font color=»green»>а вот этот участок будет другого цвета</font><br>
<font color=»#c0cd0e»>а здесь для задания цвета текста я использовал модель RGB</font></p>
</body>
</html>

В примере использованы тэги <br>(перенос строк), только для того чтобы было удобней было сделать скриншот участка полученной HTML-страницы.

Текст, но разбитый на участки с разным цветом

И так мы видим, что те участки текста, которые мы заключили в парные тэги <font>…</font> и задали соответствующие параметры атрибуту color открывающего тэга <font> изменили свой цвет, первая строка стала зеленой(ну естественно параметр «green», атрибута color), вторая строка золотистой, что обусловлено комбинацией RGB цвета переданной в качестве параметра атрибуту color тэга <font>.

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

Иногда для сокращения записи кода цветов используют не шесть знаков, а только три, в том случае, если они совпадают для каждого канала — #666 вместо #666666.

Но браузер Вас не поймет, если Вы попытаетесь написать сокращенную комбинацию внутри HTML-документа, то есть если Вы передадите в качестве параметра атрибуту color сокращенную запись #666, ничего не произойдет.

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

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings. REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}  

{{l10n_strings.DRAG_TEXT_HELP}}

{{l10n_strings. LANGUAGE}} {{$select.selected.display}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}  

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

Цвета элементов

Цвета элементов

Цвета элементов

Фоновый цвет и цвет текста для всей страницы назначаются параметрами тега BODY:
<body bgcolor="цвет" text="цвет">. ..тело страницы...</body>
Цвет шрифта для отдельных участков текста (тег также может управлять размерами шрифта):
<font color="цвет">...участок текста...</font>
Цвет фона таблицы: (аналогично и для отдельных ячеек, только table меняется на tr,td или th)
<table bgcolor="цвет">...тело таблицы(ячейки)...</table>
Цвет базового шрифта для всей страницы также можно определять тегом:
<basefont color="цвет"> -расположенным в голове страницы (чаще применяется для установки размеров шрифта)

Современные браузеры (от IE 4.0.) распознают 140 предопределенных цветов. Таблицу с названиями этих цветов Вы можете посмотреть здесь.
Задание цвета возможно как в именном так и в цифровом выражении, то есть в виде: <BODY BGCOLOR=tomato> или <font color=FF34C6>
В цифровом выражении цветность шифруется интенсивностью трех основных цветов: красного, зеленого и синего(RGB) в шестнадцатеричной системе. 00- нулевая интенсивность, FF- максимальная насыщенность. Соответственно: 000000- черный цвет, FF0000- красный, 00FF00 - зеленый, 0000FF - синий, FFFFFF- белый максимальной интенсивности. Исходя из этого правила, цвета с одинаковыми значениями всех трех параметров (Red=Green=Blue) будут серым, но разной интенсивности.

Могу порекомендовать очень маленькую бесплатную программку "Pixie" возвращающую цвет пиксела, на котором находится курсор мыши. Удобно при подборе фона под фотографии, например. Последнюю версию в интернете вы можете найти здесь.
Для наглядности, я насобирал для вас небольшую коллекцию цветов (Верхняя часть из них, колонками по три, была выставлена в качестве примера правильного подбора цветов, в RU/ководстве Артемия Лебедева.)

d9d9d9 a3bf00 ffc200 003562 0069a3 9eb03
a6a6a6 008992 ff0000 006d93 000000 c4a100
9b8f9b d3c2ad 000000 e8aa00 ffffff fad69f
Примеры цветов в RGB
f39e77 a8d59d 9595c6 9999ff 009933 990066
f6b580 99cc99 968187 cc0033 007299 009999
fad295 99cccc ae88b8 960018 e96b9e ff6633
fff99d 99ccff c699bd 999966 a9834f 0099ff
c7e19e 99add5 ff99cc 33cc66 6699cc 660066

В заключении рассмотрим иерархию цветовых тегов:

<html><head><basefont color=yellow></head>
<body bgcolor=white text=red>
<font color=blue>
Текст под действием тега font
<table border><tr><td>
Текст в таблице<br>
<font color=green>Текст в таблице под действием тега font</font>
</table>
</font>
</body></html>

Текст под действием тега font
Текст в таблице
Текст в таблице под действием тега font
Желтый цвет заданный тегом basefont переназначается параметром text тега body на красный*. Любой текст введенный сейчас без дополнительных цветовых тегов будет отображен красным. Но в предложенном примере такой тег имеется:- <font color=blue>. Он окрашивает верхнюю строку примера в голубой цвет. В границы тега попадает и таблица, но на текст находящийся внутри таблицы действие этого тега не распространяется! Таким образом текст таблицы будет выведен цветом указанным в параметре text (красным). Если же мы применим для текста внутри таблицы свой собственный тег<font color=green> то он будет исправно работать.
ЗАКЛЮЧЕНИЕ! Текст внутри таблицы следует снабжать собственными тегами <FONT>.(это касается и размеров)

*Тег <basefont> тем не менее остается актуальным из-за возможности управлять размером шрифта по умолчанию, что невозможно для тега BODY.


Таблица базовых цветов html, В одежде, в радуге, названия цветов

В HTML существуют несколько основных способов представления цветов:
  1. В виде #112233.
    Представление в виде трёх пар шестнадцатеричных цифр (Hex triplet), где каждая пара отвечает за свой цвет:
    две первые цифры — красный (00 - FF)
    две в середине — зелёный (00 - FF)
    две последние цифры — синий (00 - FF)

    Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.

    Символ # обозначает шестнадцатеричное число (от 000000 до FFFFFF).

  2. Представление ключевыми словами, например green, black.
    Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
  3. В виде rgb( *, *, *),
    где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета
    (красный - Red, зелёный - Green , синий - Blue).
  4. В виде rgba( *, *, *, *),
    где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255,
    а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.
Вариант 1.
<html>
<body color=#800000>
1) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>
Вариант 2. (тотже цвет бордовый)
<html>
<body color=Maroon>
2) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>
Вариант 3. (тотже цвет бордовый)
<html>
<body color=rgb(128,0,0)>
3) Данный текст, как и весь остальной текст на всей странице, будет отображаться бордовым цветом.
</body>
<html>
Вариант 4. (тотже цвет бордовый, но полупрозрачный)
<html>
<body color=rgba(128,0,0,0.6)>
4) Данный текст, как и весь остальной текст на всей странице, будет отображаться полупрозрачным бордовым цветом.
</body>
<html>

 

RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая модель, которая построена на методе смешение цветов.
Цветовая модель RGB является зависимой от устройства (модели монитора).


Аддитивное смешение цветов:
  • добавление красного до зеленого дает желтый;
  • добавление красного до синего дает пурпурный;
  • добавление зеленого до синего дает голубой;
  • добавление всех трех основных цветов дает белый

В HTML определены следующие 16 ключевых цветов.
(В названии цвета можно использовать как заглавные, так и строчные буквы)

Название цвета

Шестнадцатеричный код

white (белый) #ffffff
silver (серебряный) #c0c0c0
gray (серый) #808080
black (чёрный) #000000
red (красный) #ff0000
maroon (тёмно-бордовый) #800000
yellow (жёлтый) #ffff00
olive (оливковый) #808000
lime (лайм) #00ff00
green (зелёный) #008000
aqua (морская волна) #00ffff
teal (сине-зелёный) #008080
blue (синий) #0000ff
navy (тёмно-синий) #000080
fuchsia (фуксия) #ff00ff
purple (пурпурный) #800080


Цвета в радуге

Видимый солнечный спектр

7 основных спектральных цветов видны в радуге.

Цвета в радуге расположены в последовательности, соответствующей спектру видимого света.

Фразы для запоминания последовательности цветов в радуге:
  • Каждый охотник желает знать, где сидит фазан.
  • Как однажды Жак-звонарь головой сломал фонарь.

 

В одежде


10 идеальных цветовых сочетаний

Таблица цветов html | Nejalko.ru

Здравствуйте, друзья!

Представляю Вашему вниманию необходимую каждому веб-мастеру таблицу html - цветов, ещё ее называют таблицей безопасных цветов с HEX и RGB обозначениями цветов.

Как я уже упоминал в первых уроках, посвященных HTML, важное значение имеет кроссбраузерность сайта, именно поэтому в сайтостроении и дизайне следует придерживаться цветов, представленных в таблице ниже.

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

Читать RGB - код следует именно в порядке букв: R - первое число до точки, G - второе число до точки и B - третье число кода.

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

Используйте цвета HTML от Nejalko.ru для текстов, графики, фона, и они всегда будут выглядеть так, как должны!

Верхнее цифровое значение -  это безопасные HTML - цвета или HEX - код, спокойно распознаваемый веб-приложениями.

Нижнее значение - это RGB - код для графических редакторов.

Для Вашего удобства, HTML-цвета представлены сразу со знаком "#", то есть их сразу можно копировать и вставлять в HTML - код:

#000000
0. 0.0
#000033
0.0.51
#000066
0.0.102
#000099
0.0.153
#0000CC
0.0.204
#0000FF
0.0.255
#003300
0.51.0
#003333
0.51.51
#003366
0.51.102
#003399
0.51.153
#0033CC
0.51.204
#0033FF
0.51.255
#006600
0.102.0
#006633
0.102.51
#006666
0.102.102
#006699
0.102.153
#0066CC
0.102. 204
#0066FF
0.102.255
#009900
0.153.0
#009933
0.153.51
#009966
0.153.102
#009999
0.153.153
#0099CC
0.153.204
#0099FF
0.153.255
#00CC00
0.204.0
#00CC33
0.204.51
#00CC66
0.204.102
#00CC99
0.204.153
#00CCCC
0.204.204
#00CCFF
0.204.255
#00FF00
0.255.0
#00FF33
0.255.51
#00FF66
0. 255.102
#00FF99
0.255.153
#00FFCC
0.255.204
#00FFFF
0.255.255
#330000
51.0.0
#330033
51.0.51
#330066
51.0.102
#330099
51.0.153
#3300CC
51.0.204
#3300FF
51.0.255
#333300
51.51.0
#333333
51.51.51
#333366
51.51.102
#333399
51.51.153
#3333CC
51.51.204
#3333FF
51.51.255
#336600
51. 102.0
#336633
51.102.51
#336666
51.102.102
#336699
51.102.153
#3366CC
51.102.204
#3366FF
51.102.255
#339900
51.153.0
#339933
51.153.51
#339966
51.153.102
#339999
51.153.153
#3399CC
51.153.204
#3399FF
51.153.255
#33CC00
51.204.0
#33CC33
51.204.51
#33CC66
51.204.102
#33CC99
51.204.153
#33CCCC
51. 204.204
#33CCFF
51.204.255
#33FF00
51.255.0
#33FF33
51.255.51
#33FF66
51.255.102
#33FF99
51.255.153
#33FFCC
51.255.204
#33FFFF
51.255.255
#660000
102.0.0
#660033
102.0.51
#660066
102.0.102
#660099
102.0.153
#6600CC
102.0.204
#6600FF
102.0.255
#663300
102.51.0
#663333
102.51.51
#663366
102. 51.102
#663399
102.51.153
#6633CC
102.51.204
#6633FF
102.51.255
#666600
102.102.0
#666633
102.102.51
#666666
102.102.102
#666699
102.102.153
#6666CC
102.102.204
#6666FF
102.102.255
#669900
102.153.0
#669933
102.153.51
#669966
102.153.102
#669999
102.153.153
#6699CC
102.153.204
#6699FF
102.153.255
#66CC00
102. 204.0
#66CC33
102.204.51
#66CC66
102.204.102
#66CC99
102.204.153
#66CCCC
102.204.204
#66CCFF
102.204.255
#66FF00
102.255.0
#66FF33
102.255.51
#66FF66
102.255.102
#66FF99
102.255.153
#66FFCC
102.255.204
#66FFFF
102.255.255
#990000
153.0.0
#990033
153.0.51
#990066
153.0.102
#990099
153.0.153
#9900CC
153. 0.204
#9900FF
153.0.255
#993300
153.51.0
#993333
153.51.51
#993366
153.51.102
#993399
153.51.153
#9933CC
153.51.204
#9933FF
153.51.255
#996600
153.102.0
#996633
153.102.51
#996666
153.102.102
#996699
153.102.153
#9966CC
153.102.204
#9966FF
153.102.255
#999900
153.153.0
#999933
153.153.102
#999966
153. 153.51
#999999
153.153.153
#9999CC
153.153.204
#9999FF
153.153.255
#99CC00
153.204.0
#99CC33
153.204.51
#99CC66
153.204.102
#99CC99
153.204.153
#99CCCC
153.204.204
#99CCFF
153.204.255
#99FF00
153.255.0
#99FF33
153.255.51
#99FF66
153.255.102
#99FF99
153.255.153
#99FFCC
153.255.204
#99FFFF
153.255.255
#CC0000
204. 0.0
#CC0033
204.0.51
#CC0066
204.0.102
#CC0099
204.0.153
#CC00CC
204.0.204
#CC00FF
204.0.255
#CC3300
204.51.0
#CC3333
204.51.51
#CC3366
204.51.102
#CC3399
204.51.153
#CC33CC
204.51.204
#CC33FF
204.51.255
#CC6600
204.102.0
#CC6633
204.102.51
#CC6666
204.102.102
#CC6699
204.102.153
#CC66CC
204. 102.204
#CC66FF
204.102.255
#CC9900
204.153.0
#CC9933
204.153.51
#CC9966
204.153.102
#CC9999
204.153.153
#CC99CC
204.153.204
#CC99FF
204.153.255
#CCCC00
204.204.0
#CCCC33
204.204.51
#CCCC66
204.204.102
#CCCC99
204.204.153
#CCCCCC
204.204.204
#CCCCFF
204.204.255
#CCFF00
204.255.0
#CCFF33
204.255.51
#CCFF66
204.255.102
#CCFF99
204.255.153
#CCFFCC
204.255.204
#CCFFFF
204.255.255
#FF0000
255.0.0
#FF0033
255.0.51
#FF0066
255.0.102
#FF0099
255.0.153
#FF00CC
255.0.204
#FF00FF
255.0.255
#FF3300
255.51.0
#FF3333
255.51.51
#FF3366
255.51.102
#FF3399
255.51.153
#FF33CC
255.51.204
#FF33FF
255.51.255
#FF6600
255.102.0
#FF6633
255.102.51
#FF6666
255.102.102
#FF6699
255.102.153
#FF66CC
255.102.204
#FF66FF
255.102.255
#FF9900
255.153.0
#FF9933
255.153.51
#FF9966
255.153.102
#FF9999
255.153.153
#FF99CC
255.153.204
#FF99FF
255.153.255
#FFCC00
255.204.0
#FFCC33
255.204.51
#FFCC66
255.204.102
#FFCC99
255.204.153
#FFCCCC
255.204.204
#FFCCFF
255.204.255
#FFFF00
255.255.0
#FFFF33
255.255.51
#FFFF66
255.255.102
#FFFF99
255.255.153
#FFFFCC
255.255.204
#FFFFFF
255.255.255

Поделиться, если понравилось

Раскраска таблиц HTML с помощью стилей CSS

Как раскрасить таблицу с помощью CSS

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

Цвет фона таблицы CSS

Свойство CSS background-color позволяет окрашивать фон таблицы, строки и ячеек.

tr { цвет фона: зеленый; цвет белый; }

Приведенный выше код окрашивает фон каждой строки в зеленый цвет, а цвет переднего плана - в белый.


Исходный код
Рулон No Имя Команда
1001 Иоанна Красный
1002 Питер Синий
1003 Генри зеленый

Как раскрасить определенную строку в таблице CSS

Вы можете использовать tr: nth-child (rownumber) , чтобы раскрасить определенную строку в таблице с помощью CSS.

tr: nth-ребенок (3) { цвет фона: зеленый; цвет белый; }

Над кодом выберите 3 строки сверху (включая строку заголовка таблицы) и цвет фона как зеленый, а передний план как белый.


Код CSS

Применял этот код CSS к таблице HTML примера 1

Как раскрасить определенный столбец в таблице CSS

Вы можете задать цвет фона для определенного столбца, подав иск на td: nth-child (columnnumber) .

td: nth-ребенок (1) { цвет фона: оранжевый; }

Выше кода цвет фона первого столбца оранжевый.


Код CSS

Применял этот код CSS к таблице HTML примера 1

Как раскрасить только ячейку таблицы CSS

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

Рулон No Имя Команда
1001 Иоанна Красный
1002 Питер Синий
1003 Генри зеленый

Таблица CSS Альтернативная окраска строк

Вы можете использовать tr: nth-child (rowOrder), чтобы задать чередующийся цвет строк в таблице с помощью CSS.RowOrder должен быть «нечетным» или «четным».

tbody tr: nth-child (даже) { фон: оранжевый; }

Указанный выше код окрашивает каждую четную строку в оранжевый цвет фона.


Код CSS

Применял этот код CSS к таблице HTML примера 1

Для альтернативной раскраски столбцов таблицы CSS вы можете использовать следующий код CSS.

tbody td: nth-child (даже) { фон: оранжевый; }

Цвет вышеуказанного кода заменяет столбец оранжевого фона.

Таблица CSS Цвет первого столбца и первой строки

Используя простую технику, вы можете раскрасить первую строку и первый столбец таблицы CSS.


Полный исходный код
ст. № Рулон № Имя Команда
1 1001 Иоанна Красный
2 1002 Питер Синий
3 1003 Генри зеленый

Что делает атрибут HTML Bordercolor для ваших таблиц? [Подсказка: Цвет!] »

Атрибут« Цвет границы таблицы »устарел.
Для его исторического значения предоставляется следующая информация.Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо bordercolor используйте CSS для стилизации таблиц.

Атрибут

BORDERCOLOR

В этом разделе мы рассмотрим настройку цветов границ таблицы. Сначала мы рассмотрим настройку границ одного цвета. Далее мы рассмотрим настройку светлых и темных оттенков границы.

Цвет границ таблицы в целом устанавливается с помощью атрибута BORDERCOLOR тега

.Например, этот код устанавливает границу красного цвета:

  
морковь чеснок
сельдерей лук

Вот как это выглядит:

морковь чеснок
сельдерей лук

У Netscape и MSIE очень разные способы рендеринга BORDERCOLOR .Netscape сохраняет трехмерный вид. MSIE отображает все границы одинакового цвета, делая границу плоской. MSIE также устанавливает цвет внутренних границ.

Браузер Как это выглядит
Internet Explorer
Netscape

Границы таблицы: светлые и темные

В предыдущем примере мы установили один цвет для всех границ стола. На этой странице мы рассмотрим настройку «светлых» и «темных» границ по отдельности.Обратите внимание, что в настоящее время только MSIE распознает разметку, необходимую для отдельной установки светлых и темных границ.

Визуальные веб-браузеры, такие как Netscape и MSIE, визуализируют границы таблиц в трехмерном виде. Они делают это, делая верхнюю и левую границы светлее, чем нижняя правая граница. Это заставляет таблицу выглядеть так, как будто она частично находится под источником света, а частично в тени. Если вы визуализируете источник света сверху и слева от таблицы, легче запомнить, какие границы светлые, а какие темные.

Светлые и темные границы устанавливаем с помощью BORDERCOLORLIGHT и BORDERCOLORDARK . Так, например, этот код устанавливает светлые границы на желтый, а темные на синий:

  <ТАБЛИЦА ГРАНИЦА = 10 BORDERCOLORLIGHT = ЖЕЛТАЯ БОРДЕРКОЛОРДАРК = СИНИЙ>
  
     бла-бла-бла 
     да да да 
  
  
     что угодно 
     Хорошо! 
  

  

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

бла-бла-бла да да да
все равно что угодно отлично!

Одновременное использование всех трех атрибутов

BORDERCOLOR

Netscape и MSIE распознают BORDERCOLOR , но в настоящее время только MSIE распознает BORDERCOLORLIGHT и BORDERCOLORDARK . Однако вы можете использовать все три сразу, потому что MSIE игнорирует BORDERCOLOR , если находит BORDERCOLORLIGHT и BORDERCOLORDARK .Вы можете использовать эту функцию, чтобы получить немного больше контроля над цветами границ, чем если бы вы использовали только один или два из этих атрибутов.

Например, этот код говорит, что общий цвет границы синий, но также указывает, что светлая часть является светло-синей, а темная часть - обычным синим:

  
бла-бла-бла да да да
что угодно Хорошо!

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

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

HTML | Атрибут bgcolor

HTML | Атрибут bgcolor

Атрибут HTML bgcolor используется для указания цвета фона ячейки таблицы . Он не поддерживается HTML 5.

Синтаксис:

  

Значения атрибутов:

  • color_name: Устанавливает цвет текста с помощью название цвета.Например «красный» .
  • hex_number: Устанавливает цвет текста с помощью шестнадцатеричного кода цвета. Например, «# 0000ff» .
  • rgb_number: Устанавливает цвет текста с помощью кода RGB. Например: «RGB (0, 153, 0)» .

Пример:

< html >

< title > HTML bgcolor align Attribute title >

head >

< < h2 > GeeksforGeeks h2 >

< h3 HTML

< стол ширина = "5 00 " граница = " 1 " >

< tr >

< th 9018AME 9018 >

< th > AGE th >

< th > BRANCH > BRANCH tr >

< tr >

< td 9018 зеленый BITTU td >

< td bgcolor = "красный" > 22 td >

< td bgcolor = "желтый" > "желтый" > >

tr >

< tr >

84 «желтый» > RAKESH td >

< td bgcolor = «зеленый» > 25

< td bgcolor = «красный» > EC td >

tr >

таблица >

корпус 9 9 html >

Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые атрибутом HTML bgcolor , перечислены ниже:

  • Google Chrome
  • Google Chrome
  • Firefox
  • Safari
  • Opera


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

изменить цвет строк в таблице в HTML и CSS - qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 14к раз

Пытаюсь изучить HTML и CSS, и у меня есть простой вопрос.

Как я могу присвоить каждой строке разный цвет в таблице? Например, строка 1 красная, строка 2 синяя и т. Д.

Это мой HTML-код:

  #table {
  семейство шрифтов: Arial, Helvetica, sans-serif;
  ширина: 600 пикселей;
  граница-коллапс;
  крах;
}
#table td,
#table th {
  размер шрифта: 12x;
  граница: 1px solid # 4D365B;
  отступ: 3px 7px 2px 7px;
}
#table th {
  размер шрифта: 14 пикселей;
  выравнивание текста: слева;
  padding-top: px;
  padding-bottom: 4px;
  цвет фона: # 4D365B;
  цвет: # 918CB5;
}
#table td {
  цвет: # 000000;
  цвет фона: # 979BCA;
}  
  <таблица>
  
     Компания 
     Связаться
       Страна 
  
  
     1 
     2
       3 
  
  
     1 
     2
       3 
  
  
     1 
     2
       3 
  
  
полузебра

6,32044 золотых знака2929 серебряных знаков4545 бронзовых знаков

Создан 28 сен.

ХоданХодан

5711 золотой знак11 серебряный знак55 бронзовых знаков

1

Если я правильно понял ваш вопрос, и вы хотите, чтобы каждая строка отличалась цветом? У вас есть несколько вариантов...

  • Добавьте класс в каждую строку и стилизуйте их.
  • Используйте прямой родственный селектор tr + tr
  • Используйте : nth-of-type
  table tr {background: red;}
таблица tr: nth-of-type (2) {background: blue;}
таблица tr: nth-of-type (3) {background: green;}
таблица tr: nth-of-type (4) {background: yellow;}
таблица tr: nth-of-type (5) {background: gray;}  
  <таблица>
  
     Компания 
     Связаться
       Страна 
  
  
     1 
     2
       3 
  
  
     1 
     2
       3 
  
  
     1 
     2
       3 
  
  
     1 
     2
       3 
  
  

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *