Edycja tabel w HTML i CSS

Demo:
CSS Tutorial Table options Web Design
Lorem Ipsum
one two three
Contact Location Gallery

Wpis ten pokazuje kilka przydatnych elementów do wykorzystania przy budowie tabel na stronie. Układ tabeli w HTML a układ wizualny w całości w CSS.

Wyróżnienie wierszy

W większości przypadków nasza tabela będzie jakimś zestawieniem, lub elementami podobnymi. A więc będziemy mieli standardowy układ z kilkoma kolumnami i wierszami. Kiedy liczba wierszy jest dosyć spora i w poszczególnych komórkach tabeli mamy tekst to może się on zlewać i przekaz będzie niejasny. W bardzo prosty sposób możemy się z tym uporać. Oto kilka prostych sposobów:

Dolna ramka

Col 1 1 Col 2 1 Col 3 1
Col 1 2 Col 2 2 Col 3 2
Col 1 3 Col 2 3 Col 3 3
Col 1 4 Col 2 4 Col 3 4

W bardzo prosty sposób możemy oddzielić nasze wiersze.

table tr td
{
border-bottom:1px solid #ddd;
}

Pseudo klasy

Pseudo klasy w wielu przypadkach okazują się bardzo dobrym rozwiązaniem. Nie inaczej jest w naszym przykładzie. Za pomocą pseudo klas możemy zdefiniować potrzebne nam style.

Nieparzyste i parzyste kolumny

Można za pomocą jednego polecenia przypisać style do wszystkich parzystych i nieparzystych kolumn:

Col 1 1 Col 2 1 Col 3 1 Col 4 1 Col 5 1
Col 1 2 Col 2 2 Col 3 2 Col 4 2 Col 5 2
Col 1 3 Col 2 3 Col 3 3 Col 4 3 Col 5 3
Col 1 4 Col 2 4 Col 3 4 Col 4 4 Col 5 4
Col 1 5 Col 2 5 Col 3 5 Col 4 5 Col 5 5

Powyższy przykład jest dla nieparzystych kolumn.

table.nth-odd tr td:nth-child(odd)
{
	background:#ddd;
}

Natomiast dla parzystych będzie to miało strukturę:

table.nth-odd tr td:nth-child(even)
{
	background:#ddd;
}

Zdefiniowanie kolumny

Można także określić krok, która kolumna z kolei:

table.nth-odd tr td:nth-child(3n+0)
{
	background:#ddd;
}

A więc będzie to co trzecia kolumna.

pseudo klasy dla wierszy tabeli

Tak jak można edytować kolumny, można oczywiście i wiersze. Nasz kod będzie się różnił tym, że pseudo klasę będziemy dodawać do znacznika tr.
Poniższy przykład prezentuje dodanie tła do co trzeciego wiersza zaczynając od drugiego.

Col 1 1 Col 2 1 Col 3 1 Col 4 1 Col 5 1
Col 1 2 Col 2 2 Col 3 2 Col 4 2 Col 5 2
Col 1 3 Col 2 3 Col 3 3 Col 4 3 Col 5 3
Col 1 4 Col 2 4 Col 3 4 Col 4 4 Col 5 4
Col 1 5 Col 2 5 Col 3 5 Col 4 5 Col 5 5
Col 1 6 Col 2 6 Col 3 6 Col 4 6 Col 5 6
Col 1 7 Col 2 7 Col 3 7 Col 4 7 Col 5 7
table.nth-wiersze tr:nth-child(3n+2)
{
	background:#ddd;
}

Cellspacing i Cellpadding

bardzo często w zewnętrznych stylach omija się odstępy pomiędzy komórkami tabeli a umieszcza się je w znacznikach tabeli w kodzie HTML.
Jak wiadomo późniejsza edycja może sprawiać problemy zwłaszcza jeśli mamy wiele podobnych elementów. Warto zapoznać się z funkcjami:

border-spacing: 0;
border-collapse: collapse;

Zastępuje to kod cellspacing=”0″, cellpadding=”0″.

Cienie komórek

Dla tych co się lubują w cieniach i podobnych stylach można oczywiście ustawić odpowiednie cienie dla interesujących nas komórek:

Lorem Ipsum
Lorem Ipsum
table tr td.cien
{
box-shadow: inset 0 0 10px #ddd;
}

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code