Edytujesz Użytkownik:Lukasvonbayern/Tabele (sekcja)

==== 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.