» » Что такое таблица цветов HTML и для чего она нужна

Что такое таблица цветов HTML и для чего она нужна

Таблица HTML :: Kate-land - блог верстальщика и для верстальщика


Таблицу на HTML странице можно сделать при помощи тега <table>. Для добавления контента внутрь таблицы, ей нужно добавить строки и ячейки при помощи тегов <tr> и <td> соответственно. Причем вначале создается строка <tr>, а в ней создаются ячейки <td>.


Элементы <table>(далее table), <tr>(tr) и <td>(td) должны иметь открывающие и закрывающие теги. Причем нельзя путать их порядок -- открывается <table>, потом <tr>, а за ним <td>. И наоборот -- закрывается </td>, потом </tr>, а за ним </table>.


Простой пример таблицы HTML, содержащей одну строку и две ячейки:


<table>


      <tr>


             <td>Ячейка 1</td><td>Ячейка 2</td>


      </tr>


</table>

Внутри тега table могут также присутствовать такие элементы:

<th> -- задает заголовки колонок таблицы, стандартное оформление текста в данном теге - жирный текст и выравнивание по центру; данный элемент должен находиться внутри tr, как и td

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

<col> -- задает характеристики одной или нескольких колонок таблицы - выравнивание горизонтальное и вертикальное, ширина; количество соответствующих колонок задается в атрибуте span

<colgroup> -- аналогично <col>, позволяет задавать одной или нескольких колонок таблицы; позволяет уменьшить количество кода за счет выноса общих характеристик элементов таблицы в свои атрибуты

<tbody> -- позволяет объединить строки таблицы для создания единого оформления; допускается использование нескольких элементов <tbody> внутри таблицы

<tfoot> -- аналогично <tbody> объединяет строки таблицы, располагается в конце таблицы и может быть только в единственном числе

<thead> -- аналогично <tfoot>, только находится в начале таблицы


Атрибуты таблицы


Как и к другим элементам HTML, к table применимы все глобальные атрибуты, вроде class, id, и т.д. Кроме них, в HTML5 поддерживается только один атрибут border со значениями "1" или "". Но в HTML4 и XHTML определены и другие атрибуты таблицы HTML.

align -- определяет выравнивание таблицы относительно окружающих элементов - left, center, right

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

В модели RGB используются только три цвета (понятно, что это красный, зеленый и синий), каждый из которых может быть представлен с разным уровнем яркости свечения. Для каждого из каналов (красный, зеленый и синий) можно будет выбрать одну из 256 возможных градаций яркости. Число 256 взято по той причине, что столько значений оттенков можно закодировать в одном байте информации.

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

Давайте теперь попробуем разобраться, как задать яркость в каждом канале и сколько у нас есть для этого возможностей?

На самом деле, есть два основных способа:

Код таблички 3 будет выглядеть следующим образом:



<table bgcolor=#e5e5e7 width="100%" border="1">
<tr>
<td rowspan="3" WIDTH=200px>
<p class="tabl">Строка 1, ячейка1. Ширина ячейки - 200px, ячейка растягивается на три строки при помощи атрибута "rowspan", которому дано значение - rowspan="3" </p>
</td>
<td><p class="tabl">Строка 1, ячейка 2 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl">Строка 2, ячейка 3 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl">Строка 3, ячейка 4 </p>
</td>
</tr>
</table>

Примечание: <p class="tabl">Текст </p>- я задала форматирование для текста, чтобы он был лучше виден. У вас на этом месте в табличке, если вы будете её использовать, будет стоять что-то своё (картинки, текст и пр.).

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

Красной чертой я продолжила строки, заданные слева, как бы они проходили, если бы мы их прописали в нашей таблице. Они как бы упускаются и в ячейке мы их не видим, но при построении таблицы мы должны их учитывать. Это важно, потому что, как я уже говорила в одном из уроков, браузер читает наш html-код таблицы, начиная с левого верхнего угла этой таблицы, слева направо. От открывающего строку в таблице тега <tr>браузер считывает все наши теги, сколько их есть в строке и преобразовывает в графическое изображение. Всё, что он считывает, становится в одну строку. И только после того, как браузер дочитал до знака конца строки - закрывающего тега </tr> он "понимает", что строка закончилась - и нужно графически переходить на строку ниже, которая так же начнётся слева и будет идти направо. И снова браузер читает всё слева направо, от открывающего строку тега <tr>до следующего закрывающего строку тега </tr>, преобразовывая наши теги в графическое изображение следующей строки.

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

В данном примере с таблицей 3 мы открыли первую (верхнюю) строку таблицы, при этом первая ячейка таблицы у нас растянута на все три строки таблицы. На это браузеру указывает атрибут rowspan="3". Закрывается строка там, где ей и положено. Вот этот фрагмент кода. Как из него видно, строка 1 закрывается после ячейки 2,

<table width="100%" border="1">
<td WIDTH=200px>Ссылки <br>200 px</td>
<td&gtТекст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.</td>
<td WIDTH=200px&gtБаннеры<br&gtи реклама</td>
</table>
<br>

<table width="100%" border="1">
<td&gtТекст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.<br&gtМесто для рекламных баннеров.</td>
</table>

одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные. не заменятВнимание! Учтите один важный момент: одинарные (') и двойные (") кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки

Я намеренно расставила части таблицы на небольшом расстоянии друг от друга при помощи тега <br>(который означает переход на новую строку), чтобы было видно, что мы имеем три отдельные таблицы. Теперь я объясню, почему с моей точки зрения, составлять таблицу для сайта из отдельных таблиц лучше, чем из одной целой.
Раньше мы так и писали одну большую и очень сложную табличку на всю страницу. Но создавая и развивая сайт постоянно сталкиваешься с том, что страницу необходимо изменить. Например, добавить или убавить баннеры и потому сделать колонку с ними больше или меньше или вместо одной центральной колонки с информацией сделать, например две.
Или вдруг я решила сделать другой, лучший, но более сложный логотип и потому мне нужно, чтобы в верхней строке было теперь уже не две, а четыре колонки.
Приходится переписывать заново всю эту гигантскую таблицу, а представьте если эта таблица битком набита различными баннерами, ссылками, картинками, фоновыми изображениями, рекламой. Запутались, пропустили какой-нибудь тэг - и всю главную страницу перекосило. Лезь обратно в код, выискивай в этом ворохе ошибку.
Гораздо проще поставить на страницу сайта несколько независимых друг от друга таблиц. В случае необходимости, можно изъять одну нужную таблицу не трогая остальных, изменить её, как необходимо и поставить обратно.

Подбор оттенков с помощью поисковой системы

aliceblue
(#F0F8FF)
(240, 248, 255)
antiquewhite
(#FAEBD7)
(250, 235, 215)
aqua
(#00FFFF)
(0, 255, 255)
aquamarine
(#7FFFD4)
(127, 255, 212)
azure
(#F0FFFF)
(240, 255, 255)
beige
(#F5F5DC)
(245, 245, 220)
bisque
(#FFE4C4)
(255, 228, 196)
black
(#000000)
(0, 0, 0)
blanchedalmond
(#FFEBCD)
(255, 235, 205)
blue
(#0000FF)
(0, 0, 255)
blueviolet
(#8A2BE2)
(138, 43, 226)
brown
(#A52A2A)
(165, 42, 42)
burlywood
(#DEB887)
(222, 184, 135)
cadetblue
(#5F9EA0)
(95, 158, 160)
chartreuse
(#7FFF00)
(127, 255, 0)
chocolate
(#D2691E)
(210, 105, 30)
coral
(#FF7F50)
(255, 127, 80)
cornflowerblue
(#6495ED)
(100, 149, 237)
cornsilk
(#FFF8DC)
(255, 248, 220)
crimson
(#DC143C)
(220, 20, 60)
cyan
(#00FFFF)
(0, 255, 255)
darkblue
(#00008B)
(0, 0, 139)
darkcyan
(#008B8B)
(0, 139, 139)
darkgoldenrod
(#B8860B)
(184, 134, 11)
darkgray
(#A9A9A9)
(169, 169, 169)
darkgreen
(#006400)
(0, 100, 0)
darkkhaki
(#BDB76B)
(189, 183, 107)
darkmagenta
(#8B008B)
(139, 0, 139)
darkolivegreen
(#556B2F)
(85, 107, 47)
darkorange
(#FF8C00)
(255, 140, 0)
darkorchid
(#9932CC)
(153, 50, 204)
darkred
(#8B0000)
(139, 0, 0)
darksalmon
(#E9967A)
(233, 150, 122)
darkseagreen
(#8FBC8B)
(143, 188, 143)
darkslateblue
(#483D8B)
(72, 61, 139)
darkslategray
(#2F4F4F)
(47, 79, 79)
darkturquoise
(#00CED1)
(0, 206, 209)
darkviolet
(#9400D3)
(148, 0, 211)
deeppink
(#FF1493)
(255, 20, 147)
deepskyblue
(#00BFFF)
(0, 191, 255)
dimgray
(#696969)
(105, 105, 105)
dodgerblue
(#1E90FF)
(30, 144, 255)
firebrick
(#B22222)
(178, 34, 34)
floralwhite
(#FFFAF0)
(255, 250, 240)
forestgreen
(#228B22)
(34, 139, 34)
fuchsia
(#FF00FF)

(255, 0, 255)

gainsboro
(#DCDCDC)
(220, 220, 220)
ghostwhite
(#F8F8FF)
(248, 248, 255)
gold
(#FFD700)
(255, 215, 0)
goldenrod
(#DAA520)
(218, 165, 32)
gray
(#808080)
(128, 128, 128)
green
(#008000)
(0, 128, 0)
greenyellow
(#ADFF2F)
(173, 255, 47)
honeydew
(#F0FFF0)
(240, 255, 240)
hotpink
(#FF69B4)
(255, 105, 180)
indianred
(#CD5C5C)
(205, 92, 92)
indigo
(#4B0082)
(75, 0, 130)
ivory
(#FFFFF0)
(255, 255, 240)
khaki
(#F0E68C)
(240, 230, 140)
lavender
(#E6E6FA)
(230, 230, 250)
lavenderblush
(#FFF0F5)
(255, 240, 245)
lawngreen
(#7CFC00)
(124, 252, 0)
lemonchiffon
(#FFFACD)
(255, 250, 205)
lightblue
(#ADD8E6)
(173, 216, 230)
lightcoral
(#F08080)
(240, 128, 128)
lightcyan
(#E0FFFF)
(224, 255, 255)
lightgoldenrodyellow
(#FAFAD2)
(250, 250, 210)
lightgreen
(#90EE90)

(144, 238, 144)

lightgray
(#D3D3D3)
(211, 211, 211)
lightpink
(#FFB6C1)
(255, 182, 193)
lightsalmon
(#FFA07A)
(255, 160, 122)
lightseagreen
(#20B2AA)
(32, 178, 170)
lightskyblue
(#87CEFA)
(135, 206, 250)
lightslategray
(#778899)
(119, 136, 153)
lightsteelblue
(#B0C4DE)
(176, 196, 222)
lightyellow
(#FFFFE0)
(255, 255, 224)
lime
(#00FF00)
(0, 255, 0)
limegreen
(#32CD32)
(50, 205, 50)
linen
(#FAF0E6)
(250, 240, 230)
magenta
(#FF00FF)
(255, 0, 255)
maroon
(#800000)
(128, 0, 0)
mediumaquamarine
(#66CDAA)
(102, 205, 170)
mediumblue
(#0000CD)
(0, 0, 205)
mediumorchid
(#BA55D3)
(186, 85, 211)
mediumpurple
(#9370DB)
(147, 112, 219)
mediumseagreen
(#3CB371)
(60, 179, 113)
mediumslateblue
(#7B68EE)
(123, 104, 238)
mediumspringgreen
(#00FA9A)
(0, 250, 154)
mediumturquoise
(#48D1CC)
(72, 209, 204)
mediumvioletred
(#C71585)
(199, 21, 133)
midnightblue
(#191970)
(25, 25, 112)
mintcream
(#F5FFFA)
(245, 255, 250)
mistyrose
(#FFE4E1)
(255, 228, 255)
moccasin
(#FFE4B5)
(255, 228, 181)
navajowhite
(#FFDEAD)
(255, 222, 183)
navy
(#000080)
(0, 0, 128)
oldlace
(#FDF5E6)
(253, 245, 230)
olive
(#808000)
(128, 128, 0)
olivedrab
(#6B8E23)
(107, 142, 35)
orange
(#FFA500)
(255, 165, 0)
orangered
(#FF4500)
(255, 69, 0)
orchid
(#DA70D6)
(218, 112, 214)
palegoldenrod
(#EEE8AA)
(238, 232, 170)
palegreen
(#98FB98)
(152, 251, 152)
paleturquoise
(#AFEEEE)
(175, 238, 238)
palevioletred
(#DB7093)
(219, 112, 147)
papayawhip
(#FFEFD5)
(255, 239, 213)
peachpuff
(#FFDAB9)
(255, 218, 185)
peru
(#CD853F)
(205, 133, 63)
pink
(#FFC0CB)
(255, 192, 203)
plum
(#DDA0DD)
(221, 160, 221)
powderblue
(#B0E0E6)
(176, 224, 230)
purple
(#800080)
(128, 0, 128)
red
(#FF0000)
(255, 0, 0)
rosybrown
(#BC8F8F)
(188, 143, 143)
royalblue
(#4169E1)
(65, 105, 225)
saddlebrown
(#8B4513)
(139, 69, 19)
salmon
(#FA8072)
(250, 128, 114)
sandybrown
(#F4A460)
(244, 164, 96)
seagreen
(#2E8B57)
(46, 139, 87)
seashell
(#FFF5EE)
(255, 245, 238)
sienna
(#A0522D)
(160, 82, 45)
silver
(#C0C0C0)
(192, 192, 192)
skyblue
(#87CEEB)
(135, 206, 235)
slateblue
(#6A5ACD)
(106, 90, 205)
slategray
(#708090)
(112, 128, 144)
snow
(#FFFAFA)
(255, 250, 250)
springgreen
(#00FF7F)
(0, 255, 127)
steelblue
(#4682B4)
(70, 130, 180)
tan
(#D2B48C)
(210, 180, 140)
teal
(#008080)
(0, 128, 128)
thistle
(#D8BFD8)
(216, 191, 216)
tomato
(#FF6347)
(255, 99, 71)
turquoise
(#40E0D0)
(64, 224, 208)
violet
(#EE82EE)
(238, 130, 238)
wheat
(#F5DEB3)
(245, 222, 179)
white
(#FFFFFF)
(255, 255, 255)
whitesmoke
(#F5F5F5)
(245, 245, 245)
yellow
(#FFFF00)
(255, 255, 0)
yellowgreen
(#9ACD32)
(154, 205, 50)
ff0000ff0020ff0040ff0060ff0080ff00a0ff00c0ff00ff
ff2000ff2020ff2040ff2060ff2080ff20a0ff20c0ff20ff
ff4000ff4020ff4040ff4060ff4080ff40a0ff40c0ff40ff
ff6000ff6020ff6040ff6060ff6080ff60a0ff60c0ff60ff
ff8000ff8020ff8040ff8060ff8080ff80a0ff80c0ff80ff
ffa000ffa020ffa040ffa060ffa080ffa0a0ffa0c0ffa0ff
ffc000ffc020ffc040ffc060ffc080ffc0a0ffc0c0ffc0ff
ffff00ffff20ffff40ffff60ffff80ffffa0ffffc0ffffff

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

Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.

А вот и другой пример псевдокласса - определение буквицы вначале абзаца:

Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.

Комментарии

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

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

Эти данные полностью подтверждаются статистикой. Судя по ней, в 2014 году всего лишь 0.5% пользователей имеют компьютеры, поддерживающие лишь 256 оттенков.

Основы цветовой гармонии

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

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

Это даст следующий:

NameSalary
Ramesh Raman5000
Shabbir Hussein7000
NameSalary
Ramesh Raman5000
Shabbir Hussein7000


Наверх