Таблицы и стили
Сами по себе таблицы выглядят довольно «бедно», к тому же браузеры по-своему отображают некоторые характеристики таблиц, в частности, рамки. Вместе с тем эти недостатки легко исправить воспользовавшись мощью стилей. При этом весьма расширяются средства по оформлению таблиц, что позволяет удачно вписать таблицы в дизайн сайта и нагляднее представить табличные данные.
Цвет фона ячеек
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).
Пример 2.3. Цвет фона
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4
Результат данного примера показан на рис. 2.4.
Рис. 2.4. Изменение цвета фона
Поля внутри ячеек
Пример 2.4. Поля в таблицах
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4
В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.
Рис. 2.5. Поля в ячейках
Расстояние между ячейками
Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).
Пример 2.5. Расстояние между границами ячеек
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Замена cellspacing Леонардо 5 8 Рафаэль 4 11 Микеланджело 24 9 Донателло 2 13
Результат данного примера показан на рис. 2.6.
Рис. 2.6. Вид таблицы при использовании border-spacing
Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).
При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется.
Границы и рамки
Использование атрибута cellspacing
Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.
Применение свойства border
Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left , border-right , border-top и border-bottom , эти свойства соответственно определяют границу слева, справа, сверху и снизу.
Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6).
Пример 2.6. Добавление двойной рамки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4
В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7.
Рис. 2.7. Граница вокруг таблицы и ячеек
Пример 2.7. Создание одинарной рамки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4
В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8.
Рис. 2.8. Граница вокруг таблицы
Выравнивание содержимого ячеек
По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 2.8).
Пример 2.8. Выравнивание содержимого ячеек по горизонтали
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы Заголовок 1 Ячейка 1 Ячейка 2 Заголовок 2 Ячейка 3 Ячейка 4
Рис. 2.9. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9.
Пример 2.9. Выравнивание содержимого ячеек по вертикали
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2
В данном примере устанавливается высота заголовка как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.
Рис. 2.10. Выравнивание текста в ячейках
Пустые ячейки
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:
- нет вообще никаких символов;
- в ячейке содержится только перевод строки, символ табуляции или пробел;
- значение visibility установлено как hidden .
Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).
Пример 2.10. Пустые ячейки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Использование empty-cells Леонардо 5 8 Рафаэль 11 Микеланджело 24 Донателло 13
Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.
а. В браузере Safari, Firefox, Opera, IE8, IE9
б. В браузере IE7
Рис. 2.11. Вид таблицы с пустыми ячейками
изменить цвета ячеек в таблице
Есть таблица, нужно задать цвет ячеек в колонке, таким образом, чтоб цвет менялся в зависимости от значения в ячейке.по аналогии с тепловой картой! диапазон цветов: minColor: ‘#f9f9f9’ до maxColor: ‘#98c76b’
Отслеживать
задан 27 ноя 2019 в 11:53
47 6 6 бронзовых знаков
почему rgb а не rgba? куда проще варьировать альфа канал по шкале от 0 до 255, чем rgb менять
27 ноя 2019 в 14:12
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Как по мне, просто изменяйте альфа канал у цвета от 0 до 1 в зависимости от значения.
$("td").each(function()< let a = +$(this).text()/100; $(this).css('background-color', `rgba(152, 199, 108, $)`); >);td < border:1px solid black; padding: 4px 12px; font-weight: bold; >tr < background-color: white; >tr:nth-child(2n+1)
10 100 25 0 50 0
Отслеживать
ответ дан 27 ноя 2019 в 14:47
29.2k 1 1 золотой знак 21 21 серебряный знак 43 43 бронзовых знака
Для начала я бы перешел от цветовой модели RGB к HSL. Тогда, задав оттенок и насыщенность раз и навсегда, в переменные minColor и maxColor я бы занес значение яркости, от самой маскимальной (светлой) до минимальной (темной). Да, именно так, чтобы minColor соотвествовало наименьшей величине.
Затем я бы определился с условиями для каждой колонки. То, что вы хотите, в экселе делается условным форматированием и требует задания условий. Например, должна ли быть наиболее темной ячейка с максимальной величиной в КАЖДОЙ колонке? Или ВО ВСЕХ колонках с величиной одного типа надо выяснить минимальную и максимальную величину? Или цвет ячейки зависит от порогового значения в ячейке (например, больше 75% — темная, и не станет еще темнее даже при значении в 100500%).
Ну а дальше просто. Разбиваем диапазон значений в ячейках (с учетом всех ограничений, если таковые будут) на столько частей, сколько % у вас получилось при вычитании maxColor из minColor, и проходимся скриптом по ячейкам, делая вычисления яркости и подставляя результат в свойства цвета в формате HSL/HSLA.
в одной ячейке значение 5 (и это минимум. переменная Min), в другой 30, в третьей 125 (и это максимум, переменная Max), цвет должен становиться светлее/темнее равномерно, minColor = 100%, maxColor = 70% то скрипт в каждой ячейке сделает как-то так:
%SomeVariable% = cell.value / (Max - Min) * 100; // узнаем, какой % значение ячейки составляет от диапазона %SomeVariable% = %SomeVariable% * (minColor - maxColor) / 100; // узнаем, какой % этот процент составляет от предусмотренного диапазона яркостей %someOtherVariable% = minColor - %SomeVariable%; //вычитаем этот % из максимума яркости, т.к. нам надо чем больше значение, тем МЕНЬШЕ L. cell.style.backgroundColor = "HSLA(0,100%," + %someOtherVariable% + "%, 1)"; // задаем цвет. Как поменять цвет таблицы в html
Для стилизации ячеек таблиц можно использовать как свойства background , так и border .
Исходный HTML документ:
Заголовок 1 class="bg-2">Заголовок 2 class="bg-1">Ячейка 3 Ячейка 4
table background: #cadetblue; /* Цвет фона таблицы */ border: 2px dashed #000; /* Рамка вокруг таблицы */ > td, th padding: 10px; /* Поля вокруг текста */ border: 1px solid #fff; /* Рамка вокруг ячеек */ > .bg-1 background: #burlywood; > .bg-2 background: #darkgreen; > 67. Работаем с цветами в HTML таблице
Меняем цвет текста, фон и цвет рамок в таблице, строке, ячейке
Именно свойство color служит для изменения цвета текста и не обязательно в таблице, а где угодно на веб странице. Цвет можно задать по названию, шестнадцатеричным числом, RGB, RGBA, HSL и HSLA. Далее пример:
Пример 1, CSS
table color: #FF0000;
>Пример 2, CSS
tr color: green;
>Пример 3, CSS
td color: rgb(0, 0, 200);
>Свойство background-color или просто background служит для изменения фона блока, таблицы, ячейки и прочего. Цвет можно задать по названию, шестнадцатеричным числом, RGB, RGBA, HSL и HSLA. Далее пример:
Пример 4, CSS
td background: rgb(0, 0, 255);
color: #FFFFFF;
padding: 10px;
>Свойство мы уже немного научились пользоваться универсальным свойством border (позже мы его еще вспомним), но здесь мы использовать будем узкоспециализированное свойство border-color , которое меняет только цвет рамок, в отличие от border (сразу три значения можно установить: толщина, стиль и цвет). Далее пример:
Пример 5, CSS
table width: 100%; /* Ширина 100% */
text-align: center; /* Выравнивание по центру */
/* border: 2px solid #000000 */ /* Равно трем строкам ниже */
border-width: 2px; /* Толщина рамки */
border-style: solid; /* Стиль рамки */
border-color: #000000; /* Цвет рамки */
>
td background: rgb(105, 0, 105); /* Фон фиолетовый */
color: #FFFFFF; /* Цвет текста белый */
padding: 10px; /* Поля 10px */
>