Цвета в таблице 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 , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил 5 лет, 6 месяцев назад

Просмотрено 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 
  
  

Создан 28 сен.

АаронАарон

9,25533 золотых знака2020 серебряных знаков3636 бронзовых знаков

Так же можно попробовать

  #table tr {background: red;}
#table tr: nth-child (2n + 1) {background: blue;}

#Таблица {
семейство шрифтов: 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    

Создан 28 сен.

Мукул КантМукул Кант

6,73055 золотых знаков3030 серебряных знаков5151 бронзовый знак

Это легко сделать с помощью псевдоселекторов nth-child .

  #table tr: nth-child (odd) {background: red}
#table tr: nth-child (even) {background: blue}  

  <таблица>
  Компания   Контактная информация  Страна  
  1   2  3  
  1   2  3  
  1   2  3  
  

Создан 28 сен.

КодРомеосКодРомеос

2,15011 золотых знаков77 серебряных знаков2020 бронзовых знаков

1

  tr: nth-child (even) {
  фон: # ff0101;
}

 tr: nth-child (odd) {
  фон: # 0030ff;
}  

  <таблица>
  
    
       месяц

      
       '94

      
       '95

      
       '96

      
       '97

      
       '98

      
       '99

      
       '00

      
       '01

      
       '02

      
    
    
       янв

      
       14

      
       13

      
       14

      
       13

      
       14

      
       11

      
       11

      
       11

      
       11

      
    
    
       фев

      
       13

      
       15

      
       12

      
       15

      
       15

      
       12

      
       14

      
       13

      
       13

      
    
    
       март

      
       16

      
       15

      
       14

      
       17

      
       16

      
       15

      
       14

      
       15

      
       15

      
    
    
       апр

      
       17

      
       16

      
       17

      
       17

      
       17

      
       15

      
       15

      
       16

      
       16

      
    
    
       май

      
       21

      
       20

      
       20

      
       21

      
       22

      
       20

      
       21

      
       20

      
       19

      
    
    
       июн

      
       24

      
       23

      
       25

      
       24

      
       25

      
       23

      
       25

      
       23

      
       24

      
    
    
       июл

      
       29

      
       28

      
       26

      
       26

      
       27

      
       26

      
       25

      
       26

      
       25

      
    
    
       авг.

      
       29

      
       28

      
       27

      
       28

      
       28

      
       27

      
       26

      
       28

      
       26

      
    
    
       сен

      
       24

      
       23

      
       23

      
       26

      
       24

      
       24

      
       24

      
       22

      
       21

      
    
    
       октябрь

      
       20

      
       22

      
       20

      
       22

      
       20

      
       19

      
       20

      
       22

      
      

      
    
    
       ноя

      
       18

      
       17

      
       16

      
       17

      
       16

      
       15

      
       14

      
       15

      
      

      
    
    
       декабрь

      
       15

      
       13

      
       13

      
       14

      
       13

      
       10

      
       13

      
       11

      
      
      
    
  
  

Создан 28 сен.

imGauravimGaurav

97566 серебряных знаков1111 бронзовых знаков

, вы можете попробовать выбрать каждую строку с помощью CSS.В вашем случае:

  table tr: first-child {background: red} или table tr: nth-child (1) {background: red}

таблица tr: nth-child (2) {background: blue}

таблица tr: nth-child (3) {background: orange}

таблица tr: nth-child (4) {background: yellow}

таблица tr: last-child {background: purple} или таблица tr: nth-child (5)
{фон: фиолетовый}
  

jbutler483

22.2k88 золотых знаков7878 серебряных знаков133133 бронзовых знака

Создан 28 сен.

Приведенный ниже небольшой фрагмент кода должен изменить строку таблицы цветов.

  table, td, th {
    граница: сплошной красный 1px;
}

th {
    цвет фона: красный;
    черный цвет;
}
  

Источник: http://www.snoopcode.com/css/css-tables

Создан 09 окт.

Прабхакар Ундурти

5,72822 золотых знака3636 серебряных знаков4646 бронзовых знаков

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

Выделите альтернативные цвета строк таблицы HTML с помощью селектора CSS

Введение

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

CSS предоставляет селектор nth-child (), который поддерживает нечетное и четное ключевое слово. Он также поддерживает арифметические операторы

Синтаксис

1. : nth-child (число) {
2. объявления css;
3. }

Использование селектора

Мы можем использовать селектор: nth-child, как показано ниже, вместе с тегами HTML.

2. th: nth-child (odd) {
3. фон: красный;
4. }
6. p: nth-child (even) {
7. background: blue;
8. }
10. p: nth-child (4n + 0) {
11. фон: синий;
12. }

Пример

Давайте предположим, что у нас есть таблица сотрудников, и мы хотим выделить альтернативные строки

Шаг 1. Создание стиля CSS

Определите следующую таблицу стилей в раздел заголовка вашей HTML-страницы с помощью селектора nth-child для таблицы.

Шаг 2. Создание таблицы HTML

1. Сотрудник

3. Вывод приведенного выше кода будет выглядеть следующим образом:

   Сводка

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

   цвет в ячейках таблицы html и цвет фона таблицы (цвета)

   добавление цвета и графики

   легко добавлять цвета и графику в таблицы
   нужна помощь с цветами? попробуйте этот полезный инструмент (новое окно)
   

   Имя	Город	Адрес
   Vithal Wadje	Латур	Индия
   Судхир Вадже	Пуна	Индия
   Vishal	Нью-Йорк	США
   Капил	Лондон	Великобритания

   мой первый стол	мой первый стол
   мой первый стол	мой первый стол

   
   все, что нам нужно сделать, это добавить атрибут bgcolor к нашему < ТАБЛИЦА > а также < TD > теги

   мой первый стол мой первый стол

   
   код выше дает нам это
   

   мой первый стол

   мой первый стол

   
   цвет фона всей таблицы установлен на белый (#FFFFFF) в теге таблицы
   < TABLE border = 1 bgcolor = # FFFFFF >
   также просто добавить фоновое изображение с помощью атрибута background
   < TABLE border = 1 background = " дождевая капля.jpg " >
   

   мой первый стол

   мой первый стол

   так же просто добавить цвет и графику в < TD > теги
   < TD background = " raindrop.jpg " > < TD bgcolor = # 00FF00 >
   

   мой первый стол	мой первый стол
   мой первый стол	мой первый стол

   
   

   		фон капли дождя щелкните по нему правой кнопкой мыши и сохраните
   капля дождя.jpg

   Таблица CSS с чередующимися цветными рядами

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

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

   Если вам это нужно, у меня также есть информация о том, как построить таблицу с чередующимися столбцами.

   Поддержка браузером Nth Child Selector

   Все современные браузеры поддерживают n-й дочерний селектор, но он не поддерживается в Internet Explorer 8 и версиях ниже.Имея это в виду, я добавил дополнительное объявление css, чтобы в этой старой версии IE все строки таблиц имели цвет фона по умолчанию. Это на всякий случай, если ваш нынешний работодатель проклял вас за поддержку старых браузеров.

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

   Пример таблицы CSS с чередующимися строками

   Текст	Текст	Текст
   Текст	Текст	Текст
   Текст	Текст	Текст
   Текст	Текст	Текст

   Код CSS для таблицы

   Чтобы создать таблицу выше, вы должны использовать селектор tr: nth-child (odd) для определения всех нечетных строк в таблице и селектор tr: nth-child (even) для определения всех четных строк. стола.

   Полный рабочий код CSS и HTML для примера таблицы можно скопировать из поля ниже.

   
   
   <таблица>
   TextTextText 
   TextTextText 
   TextTextText 
   TextTextText 
   
    

   чередующихся строк таблицы только с CSS

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

   Современная поддержка хороша для всех браузеров, кроме IE8 и ниже, которые в настоящее время обычно составляют менее 1% рынка, поэтому вы можете легко предоставить им визуально читаемую альтернативу.

   Новейшие инструменты по категориям

   Инструменты для фиксации текста
   Инструменты кодирования HTML
   Word и языковые инструменты
   Инструменты для случайной жизни .