Edytujesz Użytkownik:Lukasvonbayern/Tabele (sekcja)

=== Kolory ===
We współczesnych komputerach nie ma w praktyce ograniczeń co do wyboru kolorów. W starszych niektóre barwy mogą zostać zastąpione zbliżoną lub wyświetlić się ziarniście (zob. dithering (grafika komputerowa)|dithering). W skrajnych wypadkach, szczególnie, gdy barwy tła i koloru tekstu mają zbliżoną jasność, może się zdarzyć, że kolor tła i tekstu będzie identyczny. Barw o zbliżonej jasności należy unikać również ze względu na osoby z zaburzeniami postrzegania barw.

W większości wypadków powinno się stosować wypracowane zestawienia kolorystyczne np. tabel z class="wikitable", co pomaga zachować spójny wygląd i ułatwia globalne zmiany. W wypadku konieczności wyróżnienia komórek w szczególny sposób, powinno się stosować barwy z tabelek w Pomoc:Kolory. Wprawdzie nie daje to zupełnej pewności stabilnego wyglądu na różnych komputerach, ale istnieje wysokie prawdopodobieństwo, że nowe przeglądarki nie wyświetlą ich źle. Zawsze należy przy tym pamiętać, aby ''nie bić czytelników po oczach''.

==== Kolorowanie tła ====
Żeby uzyskać różne barwy tła komórek, wstawiamy przed każdą komórką <code>style="background-color:LightSteelBlue"|</code>, zamiast ''LightSteelBlue'' wpisując odpowiednią nazwę koloru (lista rozpoznawanych nazw podana jest w Pomoc:Kolory). Można również podać barwę jako kombinację trzech szesnastkowych liczb podających jasność poszczególnych składowych koloru (czerwony, zielony, niebieski]]) z obowiązkowym znakiem <code>#</code> przed liczbą np. <code>style="background-color:#ff0000"|</code>. Dodatkowo można stosować zapis skrócony, podając jedną szesnastkową cyfrę na kolor – i tak zamiast <code>#ff0033</code> można to zapisać skrótowo <code>#f03</code>.

Barwy samego tekstu reguluje atrybut <code>color:</code>, np. dodanie <code><nowiki>style="color: PaleGreen"</nowiki></code> spowoduje, że tekst będzie jasnozielony. Spacja po dwukropku jest opcjonalna, podobnie wielkość liter w nazwie barwy nie ma znaczenia. W przykładach wyróżnienie wielkimi literami zostało zastosowane jedynie dla zwiększenia czytelności.

Określenia barwy tła i tekstu można oczywiście zestawiać razem (przedzielając je średnikiem), np. <code>style="background-color:Maroon; color:White"</code>.

==== Kolorowanie tekstu ====
Zastosowanie poniższego kodu...
<source lang="text">
{| class="wikitable"
| style="background-color:PowderBlue" | kolor szaroniebieski
| style="background-color:Khaki" | kolor khaki
| style="color:DarkKhaki" | ciemny kolor khaki (tekstu)
| style="color:#00f" | niebieski podany szesnastkowo
|}
</source>

...daje taki efekt:
{| class="wikitable"
| style="background-color:PowderBlue" | kolor szaroniebieski
| style="background-color:Khaki" | kolor khaki
| style="color:DarkKhaki" | ciemny kolor khaki (tekstu)
| style="color:#00f" | niebieski podany szesnastkowo
|}

Jeżeli chcemy ustalić kolor dla całego wiersza, to można zrobić to, wpisując określenie stylu po znakach rozpoczęcia nowego wiersza "|-". Na przykład:
<source lang="text">
{| class="wikitable"
|- style="background-color:PaleGreen"
| jeden kolor
| we wszystkich
| czterech komórkach
| tego wiersza
|- style="background-color:Maroon; color:White"
| tu kolor wg wiersza
| tu też domyślny wybrany
| style="background-color:Chocolate" | a tu zmiana domyślnego koloru tła
| a tu znowu jest domyślny
|}
</source>

...co daje:
{| class="wikitable"
|- style="background-color:PaleGreen"
| jeden kolor
| we wszystkich
| czterech komórkach
| tego wiersza
|- style="background-color:Maroon; color:White"
| tu kolor wg wiersza
| tu też domyślny wybrany
| style="background-color:Chocolate" | a tu zmiana domyślnego koloru tła
| a tu znowu jest domyślny
|}

==== Kolorowanie obramowania ====
Obramowanie (jednocześnie wszystkie 4 krawędzie) pojedynczej komórki lub całego wiersza kolorujemy poleceniem <code>border-color</code>. Zazwyczaj dla poprawy widoczności trzeba wtedy obramowanie również pogrubić poleceniem <code>border-width</code>, a to z kolei wymusza użycie polecenia <code>border-style</code> określającego rodzaj linii (np. ciągła, przerywana, kropkowana). W efekcie musimy użyć 3 poleceń, np.:
{|
| 1) &nbsp; linia ciągła: || <code>style="border-style: solid;"</code>
|-
| 2) &nbsp; o grubości 4 pikseli: &nbsp; || <code>style="border-width: 4px;"</code>
|-
| 3) &nbsp; i kolorze czerwonym: || <code>style="border-color: Red;"</code>
|}

W kodzie tabeli łączymy te polecenia w jedno polecenie stylu:

<code>style="border-style: solid; border-width: 4px; border-color: Red;"</code>

Wygodniej jednak użyć polecenia <code>border</code>, które grupuje wszystkie 3 powyższe parametry, np.:

<code>style="border: solid 4px Red;"</code>

<source lang="text">{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| style="border: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|- style="border: solid 4px Green;"
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}</source>

...co daje:
{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| style="border: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|- style="border: solid 4px Green;"
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}

Wspólne obramowanie kilku komórek wymaga więcej pracy, bo atrybuty trzeba nadawać w każdej komórce kolejno każdej kolorowanej krawędzi (góra/prawo/dół/lewo). Krawędzi, które pozostaną czarne, nie ruszamy. Polecenia dla poszczególnych krawędzi to:
* <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code> i <code>border-left</code>.

<source lang="text">{| class="wikitable"
| wiersz 1, kolumna 1
| style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| wiersz 1, kolumna 2
| style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|-
| style="border-top: solid 4px Green; border-right: solid 4px Green; border-left: solid 4px Green;"|wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| style="border-right: solid 4px Green; border-bottom: solid 4px Green; border-left: solid 4px Green;"|wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}</source>

...co daje:
{| class="wikitable"
| wiersz 1, kolumna 1
| style="border-top: solid 4px Red; border-bottom: solid 4px Red; border-left: solid 4px Red;"| wiersz 1, kolumna 2
| style="border-top: solid 4px Red; border-right: solid 4px Red; border-bottom: solid 4px Red;"| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|-
| style="border-top: solid 4px Green; border-right: solid 4px Green; border-left: solid 4px Green;"|wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| style="border-right: solid 4px Green; border-bottom: solid 4px Green; border-left: solid 4px Green;"|wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|}

W ten sam sposób (formatując w każdej komórce potrzebną krawędź) robimy oczywiście pojedyncze kreski, np.:
{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 3
|-
| wiersz 2, kolumna 1
| style="border-top: solid 4px Red;"| wiersz 2, kolumna 2
| style="border-top: solid 4px Red;"| wiersz 2, kolumna 3
|-
| style="border-right: solid 4px Green;"|wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 3
|-
| style="border-right: solid 4px Green;"|wiersz 4, kolumna 1
| wiersz 4, kolumna 2
| wiersz 4, kolumna 3
|-
| wiersz 5, kolumna 1
| wiersz 5, kolumna 2
| wiersz 5, kolumna 3
|}

O wiele łatwiej (pojedynczym poleceniem) robi się kreskę wzdłuż całego wiersza:
<source lang="text">{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 3
|- style="border-top: solid 4px Red;"
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|}</source>

...co daje:
{| class="wikitable"
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 3
|- style="border-top: solid 4px Red;"
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 3
|}

Niestety pionowej kreski po całości nie da się zrobić jednym poleceniem. Trzeba formatować potrzebną krawędź w każdej komórce.

==== Tabele kolorów ====
{{osobny artykuł|Pomoc:Kolory}}