Projekt: tabelka CSS
Ćwiczenie ma na celu zapoznać z możliwościami modyfikacji wyglądu tabel za pomocą kaskadowych arkuszy styli (CSS).
PROBLEM:
Poza możliwościami modyfikacji wyglądu tabel z wykorzystaniem:
- parametrów tagu <table>, <tr> i <td> (border, cellspacing, cellpadding, width, height, align, valign, bgcolor, background, bordercolor, bordercolordark, bordercolorlight);
- możliwością zagłębiania tabel jednej w drugiej;
istnieją również bardziej zaawansowane sposoby modyfikacji standardowego wyglądu tabel. Stosuje się zasadniczo dwie techniki:
- zastosowanie kaskadowych arkuszy styli (css);
- zastosowanie parametru background tagu <td> w powiązaniu z tagami <img> np:
|
|
Tabelka ma wymiary:
Width: 209 px.
Naglowek
komórka tabeli:
Width: 209px.; Height: 37px.
plik graficzny jako img:
Width: 209px.; Height: 37px.
Centrum
komórka tabeli ma wymiary:
Width: 209px.
plik graficzny jako background ma wymiary:
Width: 209px.; Height: 15px.
Stopka
komórka tabeli:
Width: 209px.; Height: 15px.
plik graficzny:
Width: 209px.; Height: 15px.
|
 |
Należy przy tym jednak pamiętać, że:
- nie wszystkie przeglądarki jednakowo dobrze interpretują kaskadowe arkusze styli;
- wprowadzenie zbyt dużej ilości grafiki rastrowej w tłach tabel lub w postaci wklejonych obrazków znacznie spowalnia ładowanie się strony;
Przy rozwiązywaniu zadania należy skorzystać z:
- kaskadowego arkusza styli dołączonego do danej strony internetowej w sekcji <HEAD> w postaci lini:
<link href="styl_tabele.css" rel="stylesheet" type="text/css">
- lub deklaracji bezpośredniej wewnątrz tagu <HEAD>:
<style type="text/css">
.tabela_main{
background-color: #99CCFF;
border: none;
}
</style>
Przykład tabeli z wykorzystaniem kaskadowego arkusza styli przedstawionego poniżej:
| wiersz lewy |
wiersz centralny |
wiersz prawy |
Kaskadowy arkusz styli dla kolejnych elementów tabeli wygląda:
.tabela_main{
background-color: #99CCFF;
border: none;
}
.wiersz_boczny {
background-color: #CCFFFF;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
border-right-width: thin;
border-right-style: none;
border-right-color: #000000;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
border-left-width: thin;
border-left-style: none;
border-left-color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #6666FF;
}
.srodek {
background-color: #FFFFFF;
border-top-width: thin;
border-top-style: solid;
border-top-color: #330066;
border-right-width: thin;
border-right-style: dotted;
border-right-color: #330066;
border-bottom-width: thick;
border-bottom-style: double;
border-bottom-color: #330066;
border-left-width: medium;
border-left-style: dashed;
border-left-color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #000000;
font-weight: bold;
letter-spacing: 2mm;
text-align: center;
vertical-align: top;
word-spacing: 4mm;
}
Manual:
Przykłady:
Ramka (cała ramka danej komórki, wiersza lub tabeli)
border: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;
co oznacza (w nawiasach zaznaczono standard i zgodność z przeglądarkami)
none (wartość domyślna) - CSS2 / IE4, N6, O3.5: nie ma ramki
hidden - CSS2 / O3.5: linia ukryta
dotted - CSS2 / IE5.5, N6, O3.5: linia składająca się z kropek
dashed - CSS2 / IE5.5, N6, O3.5: linia składająca się z kresek
solid - CSS2 / IE4, N6, O3.5: linia tradycyjna
double - CSS2 / IE4, N6, O3.5: linia podwójna
groove - CSS2 / IE4, N6, O3.5: linia wklęsła przestrzenna
ridge - CSS2 / IE4, N6, O3.5: linia wypukła przestrzenna
inset - CSS2 / IE4, N6, O3.5: linia wklęsła
outset - CSS2 / IE4, N6, O3.5: linia wypukła
inherit - CSS2 / N6: przejęcie wartości "rodzica", np. border-right-style:inherit;
styl ramki można wiązać z konkretnymi krawędziami danej komórki, wiersza lub tabeli:
border-left: ...
border-right: ...
border-top: ...
border-bottom: ...
Szerokość ramki
border-width: thin|medium|thick|;
border-left-width: ...
border-right-width: ...
border-top-width: ...
border-bottom-width: ...
Kolor ramki
border-color: rgb(255,255,0)|#rrggbb;
border-left-color: ...
border-right-color: ...
border-top-color: ...
border-bottom-color: ...
Wiązanie atrybutów: Mieszane atrybuty obramowania
Definiując obramowanie, możemy stosować definicję mieszaną, w której podamy jedynie polecenie border i wartości, rezygnując z wymieniania własności. Zamiast:
border-width: thick; border-style: double; border-color: red
Akapit 1a
Możemy wpisać po prostu:
border: thick double red
Akapit 1b
Inne przykłady:
thin dotted blue
border: medium dotted black; border-top: medium dashed black
border-left: groove yellow 2mm
