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

Є таблиця, потрібно задати колір осередків у колонці, таким чином, щоб колір змінювався в залежності від значення в осередку. за аналогією з тепловою картою! діапазон кольорів: minColor: '#f9f9f9' до maxColor: '#98c76b'

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)

Для початку я перейшов би від колірної моделі RGB до HSL. Тоді, задаючи відтінок і насиченість раз і назавжди, в змінні minColor і maxColor я б заніс значення яскравості, від наймаскімальнішої (світлішої) до мінімальної (темної). Так, саме так, щоб minColor відповідало найменшій величині.

Потім я визначився б з умовами для кожної колонки. Те, що ви хочете, в екселе робиться умовним форматуванням і вимагає завдання умов. Наприклад, чи повинен бути найбільш темним осередок з максимальною величиною в КОЖНІЙ колонці? Чи у всіх колонках з величиною одного типу треба з'ясувати мінімальну і максимальну величину? Або колір комірки залежить від порогового значення в комірці (наприклад, більше 75% - темна, і не стане ще темнішою навіть при значенні 100-500%).

Ну, а далі просто. Розбиваємо діапазон значень у комірках (з урахуванням всіх обмежень, якщо такі будуть) на стільки частин, скільки % у вас вийшло при відніманні 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. // задаємо колір.

HTML таблиці основи

Цей розділ познайомить вас з таблицями HTML, представивши основні поняття - рядки і осередки, заголовки, злиття рядків і стовпців, а також об'єднання всіх осередків в стовпці з метою стилізації.

Що таке таблиця?

Таблиця - це структурований набір даних, що складається з рядків та стовпців (табличних даних). Таблиці дозволяють швидко і легко подивитися значення, що показують деякий взаємозв'язок між різними типами даних, наприклад - людина та її вік, або розклад у плавальному басейні.

Люди постійно використовують таблиці, причому вже давно, як показує документ з перепису в США, що відноситься до 1800:

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

Як працює таблиця?

Сенс таблиці в тому, що вона жорстка. Інформацію легко інтерпретувати, візуально зіставляючи заголовки рядків та стовпців.Наприклад, подивіться на наведену нижче таблицю і знайдіть єдиний особистий займенник, що використовується в третій особі, з підлогою ♀, що виступає як об'єкт у реченні.

Якщо правильно подати таблицю HTML, інтерпретувати її дані зможуть навіть люди, які мають проблеми із зором.

Оформлення таблиць

Вихідний код HTML (HTML source code) вищенаведеної таблиці є в GitHub; подивіться його і живий приклад (look at the live example)! , а наведений у GitHub приклад інформації про стиль немає.

Не маєте хибних ілюзій - щоб ефективно представляти таблиці у веб, необхідно надати їм хорошу структуру в HTML і застосувати до них таблиці стилів (CSS). статті Стилізація таблиць.

У цьому розділі ми не фокусуємося на CSS, але все ж таки дали просту таблицю стилів CSS, щоб зробити таблиці більш читабельними. з таблицями HTML.

Примітка: Перегляньте також таблицю personal_pronouns із застосованим до неї стилем, щоб отримати уявлення про те, як вона виглядає.

Коли не потрібно використовувати HTML таблиці?

HTML-таблиці слід використовуватиме табличних даних — те, навіщо вони призначені.На жаль, багато хто використовує таблиці HTML для оформлення веб-сторінок, наприклад, один рядок для заголовка, один для вмісту, один для виносок тощо. Докладніше про це можна дізнатися в розділі Верстка на Початковому модулі доступності. Це відбувалося через погану підтримку CSS у різних браузерах; у наш час таке зустрічається набагато рідше, але іноді все ж таки трапляється.

Коротше кажучи, використання таблиць для оформлення замість методів CSS є поганою ідеєю з наступних причин :

1. Таблиці, що використовуються для оформлення, зменшують доступність сторінок для людей, які мають проблеми із зором: Скрінрідери (Screenreaders), використовувані ними, інтерпретують HTML-теги та читають вміст користувачеві. Оскільки таблиці не є засобом для представлення структури таблиці, і розмітка виходить складніше, ніж при використанні методів CSS, скринрідери вводять в оману користувачів.
2. Таблиці створюють плутанину тегів: Як уже згадувалося, оформлення сторінок за допомогою таблиць дає складнішу структуру розмітки, ніж спеціально призначені для цього методи. Відповідно, такий код важче писати, підтримувати та налагоджувати.
3. Таблиці не реагують автоматично на тип пристрою: У відповідних контейнерах (наприклад, , , , або ) ширина за замовчуванням дорівнює 100% від батьківського елемента. У таблиць розмір за замовчуванням підлаштовується під їх вміст, так що щоб вони однаково добре працювали на різних типах пристроїв необхідно вживати додаткових заходів.

Вправа: ваша перша таблиця

Отже, ми вже говорили про теорію, тепер візьмемо конкретний приклад і побудуємо таблицю.

1. Перш за все, створіть локальну копію blank-template.html та minimal-table.css у новій папці на вашому комп'ютері.
2. Вміст будь-якої таблиці полягає між двома тегами: . Додайте їх у тіло HTML.
3. Найменшим контейнером у таблиці є комірка, вона створюється елементом ('td' - скорочення від 'table data'). Введіть усередині тегів table наступне:

Hi, I'm your first cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Щоб цей рядок перестав зростати, а нові осередки перейшли на другий рядок, необхідно використовувати елемент ('tr' - скорочення від 'table row'). Спробуємо як це вийде.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

В результаті вийде таблиця, яка виглядатиме приблизно так:

Примітка: Цей приклад можна також знайти на GitHub під назвою simple-table.html (see it live also).

Додавання заголовків за допомогою елементів

Тепер звернемося до табличних заголовків - особливих осередків, які йдуть спочатку рядки або стовпця і визначають тип даних, які містить цей рядок або стовпець (як "Person" і "Age" у першому прикладі цієї статті). Щоб показати, навіщо вони потрібні, візьмемо такий приклад. Спочатку вихідний код:

 
Knocky
Flor
Ella
Juan

Breed
Jack Russell
Poodle
Streetdog
Cocker Spaniel

Age
16
9
10
5

Owner
Mother-in-law
Me
Me
Sister-in-law

Eating Habits
Eats everyone's leftovers
Nibbles at food
Hearty eater
Will eat till he explodes

Тепер як виглядає таблиця:

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

Вправа: заголовки

Спробуємо покращити цю таблицю.

Примітка: Закінчений приклад можна знайти на dogs-table-fixed.html в GitHub (дивіться живий приклад).

Навіщо потрібні заголовки?

Ми вже частково відповіли на це питання — коли заголовки виділяються, легше шукати дані та таблиця виглядає краще.

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

Заголовки дають додаткову перевагу - разом з атрибутом scope (який ми вивчатимемо в наступній статті) вони допомагають покращити зв'язок кожного заголовка з усіма даними рядка або стовпця одночасно, що досить корисно

Злиття кількох рядків або стовпців

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

Вихідна розмітка виглядає так:

Animals

Hippopotamus

Horse
Mare

Stallion

Crocodile

Chicken
Cock

Rooster

Але результат не такий, як хотілося б:

Потрібно, щоб "Animals", "Hippopotamus" та "Crocodile" поширювалися на два стовпці, а "Horse" та "Chicken" - на два рядки. На щастя, табличні заголовки та комірки мають атрибути colspan і rowspan, які дозволяють це зробити. Обидва набувають безрозмірного числового значення, яке дорівнює кількості рядків або стовпців, на які повинні поширюватися осередки. Наприклад, colspan="2" поширює комірку на два стовпці.

Скористайтеся colspan та rowspan щоб покращити таблицю.

1. Спочатку створіть локальну копію animals-table.html та minimal-table.css у новій папці на вашому комп'ютері.Код HTML містить приклад із тваринами, який ви вже бачили вище.
2. Потім використовуйте атрибут colspan щоб поширити "Animals", "Hippopotamus" та "Crocodile" на два стовпці.
3. Нарешті, використовуйте атрибут rowspan щоб поширити "Horse" та "Chicken" на два рядки.
4. Збережіть код і відкрийте його у браузері, щоб побачити покращення.

Примітка: Закінчений приклад можна переглянути в animals-table-fixed.html на GitHub (живий приклад).

Стилізація стовпців

І остання можливість, про яку розповідається у цій статті. HTML дозволяє вказати, який стиль потрібно застосовувати до цілого стовпця даних відразу - для цього застосовують елементи та . Їх запровадили, оскільки задавати стиль для кожного осередку окремо або використовувати складний селектор на зразок :nth-child() було б занадто стомлюючим.

Візьмемо простий приклад:

Data 1
Data 2

Calcutta
Orange

Robots
Jazz

Data 1
Data 2

Calcutta
Orange

Robots
Jazz

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

Якби ми хотіли застосувати інформацію про стиль до обох стовпців, ми могли б просто ввести один елемент з атрибутом span, таким чином:

Подібно colspan і rowspan , span набуває безрозмірне числове значення, що вказує, до якої кількості стовпців необхідно застосувати цей стиль.

Вправа: colgroup та col

Тепер спробуйте самі.

Нижче наведено таблицю уроків з мов. У п'ятницю (Friday) новий клас цілий день вивчає голландську (Dutch), крім того, у вівторок (Tuesday) та четвер (Thursdays) є заняття з німецької (German). Вчителька хоче виділити стовпці, що відповідають дням, коли вона викладає.

Заново створіть таблицю, виконавши наведені нижче дії.

Подивіться, що у вас вийшло. Якщо застрягнете, або захочете себе перевірити, можете переглянути нашу версію в timetable-fixed.html (погляньте живий приклад).

Підсумок

Тут наведено практично всі базові відомості про таблиці HTML.