Tabele#
Kolor obramowania#
W całej tabeli:
<table rodzaj="kolor">...</table>
W jednym wierszu:
<table> <tr rodzaj="kolor">...</tr> ... </table>
W pojedynczej komórce:
<table> <tr> <th rodzaj="kolor">...</th> <td rodzaj="kolor">...</td> </tr> ... </table>gdzie jako "
rodzaj" można podać następujące atrybuty:bordercolor- określa kolor dla całego obramowaniabordercolorlight- określa kolor dla "oświetlonej" części tabeli (lewa oraz górna krawędź obramowania)bordercolordark- określa kolor dla "ocienionej" części tabeli (prawa oraz dolna krawędź obramowania)
Polecenia pozwalają ustawić kolor obramowania dla całej tabeli , w jednym (lub kilku) wierszach bądź w pojedynczej komórce. Można również zdefiniować kolor cieni w komórkach (standardowo są one kolorów odpowiednio szarego - cień, białego - oświetlenie).
Atrybuty BORDERCOLOR, BORDERCOLORLIGHT oraz BORDERCOLORDARK nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Wspomniane atrybuty są niestandardowym rozszerzeniem Internet Eksplorera, które nie są obsługiwane przez pozostałe przeglądarki. W przykładach zaprezentuję alternatywne polecenia CSS.
Domyślny wygląd obramowania tabeli:
<table style="width: 500px; height: 150px;" border="10" cellspacing="10">
<tr>
<td>komórka1</td>
<td>komórka2</td>
<td>komórka3</td>
</tr>
<tr>
<td>komórka4</td>
<td>komórka5</td>
<td>komórka6</td>
</tr>
<tr>
<th>komórka7</th>
<td>komórka8</td>
<td>komórka9</td>
</tr>
</table>Efekt:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
|---|
Manipulowanie wyglądem obramowania tabeli:
<table style="border-left: 10px solid aqua; border-top: 10px solid aqua; border-right: 10px solid navy; border-bottom: 10px solid navy; width: 500px; height: 150px;" border="10" cellspacing="10">
<tr>
<td>komórka1</td>
<td>komórka2</td>
<td>komórka3</td>
</tr>
<tr>
<td>komórka4</td>
<td>komórka5</td>
<td>komórka6</td>
</tr>
<tr>
<th style="border: 10px solid lime;">komórka7</th>
<td style="border-left: 10px solid maroon; border-top: 10px solid maroon; border-right: 10px solid red; border-bottom: 10px solid red;">komórka8</td>
<td style="border: 10px outset;">komórka9</td>
</tr>
</table>| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
|---|
Arkusze stylów oferują zdecydowanie większe możliwości manewrowania wyglądem obramowań. Przykłady z wycofanymi atrybutami przedstawione zostały na specjalnej stronie testowej.