Використання кольорів
Матеріал з ТерноВікі
Зміст |
Використання кольору
Нижче наведено складніші приклади, що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись, який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими — інші користувачі редагуватимуть їх також!
Кольоровий текст
Текст, що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML:
- для окремого слова — <font color="#ABCDEF">Текст</font>;
- для довгого тексту — <div style="color:#ABCDEF">Текст, текст.</div>,
де «ABCDEF» — індекс кольору. Для "розфарбування" тексту пишуть так:
Вихідний код
{| border=1 |Клітинка 1*1 |Кольорове <font color="#FF00FF">одне</font> слово. |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |<div style="color:#33CC66">Кольоровий весь рядок.</div> |- |Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}
Як він виглядає
Клітинка 1*1 | Кольорове одне слово. | Клітинка 3*1 |
Клітинка 1*2 | Клітинка 2*2 | Кольоровий весь рядок.
|
Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Колір клітинки
Зробити кольорову клітинку можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» — індекс кольору.
Пишеться
{| border=1 |Клітинка 1*1 |bgcolor=#FFCC00|Клітинка 2*1 |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |Клітинка 3*2 |- |bgcolor=#CCFF00|Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}
Як він виглядає
Клітинка 1*1 | Клітинка 2*1 | Клітинка 3*1 |
Клітинка 1*2 | Клітинка 2*2 | Клітинка 3*2 |
Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Фоновий колір таблиці
Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут «bgcolor=#ABCDEF» в перший рядок таблиці, де ставитися і атрибут рамки:
Пишеться
{| border=1 bgcolor=#66FFFF |Клітинка 1*1 |Клітинка 2*1 |Клітинка 3*1 |- |Клітинка 1*2 |Клітинка 2*2 |Клітинка 3*2 |- |Клітинка 1*3 |Клітинка 2*3 |Клітинка 3*3 |}
Як він виглядає
Клітинка 1*1 | Клітинка 2*1 | Клітинка 3*1 |
Клітинка 1*2 | Клітинка 2*2 | Клітинка 3*2 |
Клітинка 1*3 | Клітинка 2*3 | Клітинка 3*3 |
Класи оформлення клітинок
заголовок | звичайна клітинка | |
---|---|---|
highlight | ||
bright | ||
shadow | ||
dark |
Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок.
Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка.
|- class="bright" | ... | ...
Або до окремо взятої клітинки; якщо потрібно просто скасувати колір, заданий в рядку, використовуйте клас transparent.
|- |class="bright"| ... |class="highlight"| ...
Наприклад:
|-class="dark" | |class="highlight" | |||
|-class="bright" | |class="transparent" |
Для заголовків рекомендується використовувати підсвічування highlight
, за необхідності виділити більш важливий заголовок — bright
. Якщо є необхідність знизити важливість заголовка, можна використовувати затінення.
Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку shadow
, за необхідності — dark
). Если нужно выделить одну-две ячейки, можно использовать подсветку.
Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: style="background-color: колір;"
(див. таблицю кольорів). Рекомендується використовувати цю можливість тільки якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.