Określanie właściwości tabeli

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: tabele table obramowanie border jednostki kurs css

Jak już mogłaś/eś spostrzec na poprzednich lekcjach do opisywania tabeli nadal używałem html-a. Dlaczego? Dlatego, że rzadko zdarza się, by na stronie trafiły się 2 takie same tabele. Poza tym opisywanie tamtych właściwości nie jest krótsze w CSS niż w HTML. Po trzecie, z przyzwyczajenia. Procent udziału CSS w opisie wyglądzu strony będzie różny dla różnych witryn. Na tej lekcji nauczysz się jak opisywać tabele, bo mimo wszystko czasem będziesz tego używał, nawet na tym kursie.

Zmiany w pliku 'style.css':

* otwórz plik 'style.css' który tworzyłeP na poprzednich lekcjach */

BODY {
background-color: #CBD1D3;
text-align: center;
scrollbar-3dlight-color:silver;
scrollbar-arrow-color:black;
scrollbar-base-color:white;
scrollbar-dark-shadow-color:black;
scrollbar-face-color:white;
scrollbar-highlight-color:silver;
scrollbar-shadow-color:silver; }
/* to wszystko powinno już tam być */

td { // 1
vertical-align: top;} // 2

td.menu {
border-left:1px solid white; // 3
width:160; // 4
background-color: #AFB4C0;} // 5

td.txt {
border-left:1px solid white; // 3
border-top:1px solid white; // 3
border-bottom:1px solid white;} // 3

td.gorne {
padding: 25px 0 25px 0; // 6
border-top: 1px solid white; // 3
border-right:1px solid black; // 3
border-left:1px solid white; // 3
background-color: #AFB4C0;} // 3

Opis:

1 - Zaczyna deklarować komórkę. Każda komórka będzie mieć jej właściwości (o ile w klasie nie będzie to zmienione - potęga dziedziczenia!).
2 - Pionowe wypozycjonowanie ustalam na 'top' [góra], czyli cała treść każdej komórki będzie podsuwana do samej góry (komórki).
3 - Określam właściwości obramowania komórki. Każdą stronę opisuję osobno [strony: left(lewa), right(prawa), top(góra), bottom(dół)] wg schematu: border-strona: Qpx typ kolor , gdzie 'Q' - liczba pixeli; typ - jedno z możliwych rozwiązań [patrz niżej]; kolor - kolor ramki, nazwa może być po angielsku [red, blue itp.], kodem heksadecymalnym [np. #AFB4C0] lub kodem RGB.
4 - Określam szerokość komórki w pixelach. Można także określić wysokość - height: Q , gdzie 'Q' to liczba pixeli lub procent. Zawsze należy podać jednostkę, tylko wartość 0 jej nie wymaga.
5 - Kolor tła, sposób określania identyczny jak w przypadku określania tła całej strony.
6 - Padding, czyli odległość wypełnienia komórki od obramowania. Okraślane kolejno strony wg schematu: padding: góra prawa dół lewa określane w pixelach.

Jednostki (wartości przykładowe):

procent, zapis: 100%,
punkt, zapis: 5pt,
inch(cal), zapis: 2in,
centymetr, zapis: 3cm,
względem, zapis: 0.3em [to kropka, nie przecinek],
piksel, zapis: 4px

Typy obramowań:

żadne, zapis: border: 1px none white,
kropkowane, zapis: border: 1px dotted white,
kreskowane, zapis: border: 1px dashed white,
normalnie, zapis: border: 1px solid white,
podwójna ciągła, zapis: border: 1px double white,
cieniowane, zapis: border: 1px groove white,
odwrotnie cieniowane, zapis: border: 1px ridge white,
cieniowane, zapis: border: 1px inset white,
odwr. cieniowane, zapis: border: 1px outset white;

Masz już w tej chwili gotowe style dla prawie wszystkich tabel. Teraz czas dodać kilka słów do pliku 'index.htm'.

Aby wszystko działało jak trzeba to musisz:

kod pierwszej komórki zostawić bez zmian, czyli pozostaje: <td>
dopisać do pierwszej komórki drugiej tabeli kod: class="menu", czyli powstanie <td class="menu">
dopisać do drugiej komórki drugiej tabeli kod: class="txt", czyli powstanie <td class="txt">"

Tekst zabarwiony należy dopisać. Tekst czarny powinien już tam być.

Na razie nic nie wpisuj do ostatniej tabeli. Zapisz wszystko i obejrzyj efekt. Jeśli nic nie będzie widoczne, to powpisuj do poszczególnych komórek jakiekolwiek napisy, np. 'Hello world!'. Lub nazywam się Bond:-) cs

Patryk 'yarpo' Jar

szukaj: tabele tabele table table obramowanie border border jednostki kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!