Opis właściwości tabel w CSS

Jak już mogł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łeś 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:160px; /* 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 */
}

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.

- 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:
- wpisać do pierwszej od góry komórki <td >
- wpisać do pierwszej komórki drugiej tabeli <td class="menu">
- wpisać do drugiej komórki drugiej tabeli <td class="txt">

Text zabarwiony należy dopisać. Text 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:-)

Zmiany w pliku 'style.css':

Typy obramowań:

Zobacz podobne artykuły