Tabele
W dzisiejszych czasach, gdy nie używam już tabel do tworzenia struktury strony, są one ciągle powszechnie używane, najczęściej po prostu jako tabele.
Prosta tabela
Stworzymy sobie teraz najprostszą tabelę. Zawierać ona będzie dane na temat 3 użytkowników, będzie to ich imię, nazwisko i wiek. Dane każdego użytkownika wyświetlimy w osobnym wierszu.
Elementem, który tworzy tabelę jesttable. Następnie musimy pomiędzy jego tagiem otwierającym a zamykającym, umieścić tworzenie wierszy. Każdy wiersz jest tworzony poprzez znaczniktr(ang.table row- pl.wiersz tabeli). W każdym wierszu należy następnie umieścić konkretne komórki tworzone elementamitd(ang.table data- pl.dane tabeli). Realizacja tego co opisaliśmy wygląda następująco:
| 1 2 3 4 5 6 7 8 910111213141516171819202122 | <table><tr><td>Imię</td><td>Nazwisko</td><td>Wiek</td></tr><tr><td>Jan</td><td>Nowak</td><td>28</td></tr><tr><td>Grzegorz</td><td>Brzęczyszczykiewicz</td><td>99</td></tr><tr><td>Franek</td><td>Dolas</td><td>30</td></tr></table> |
|---|---|
Jak widzisz, najpierw tworzymy elementtable, następnie w nim 4 elementytrreprezentujące kolejne wiersze, a w każdym z nich 3 znacznikitdtworzące konkretne komórki tabeli. W elementachtdpodajemy dane wyświetlane w tabeli.
Tabelka sama dopasuje się do treści. Oznacza to że wykorzysta dostępna przestrzeń na stronie aby wszystkie komórki miały tę samą szerokość. Zwykle będzie to szerokość komórki w której jest najwięcej treści w obrębie danej kolumny.
Zadanie 1
Utwórz tabelę składającą się dokładnie z 2 kolumn i 3 wierszy. Zawartość komórek może być dowolna.
Tabela z nagłówkiem
W tej chwili tabela wyświetlana jest poprawnie, chociaż warto w jakiś sposób wyróżnić komórki zawierające nazwy kolumn. Można to zrobić poprzez zwykłe pogrubienie znacznikiemb, jednak jest lepszy sposób. Nagłówki tabel najczęściej umieszczamy w elementachthzamiasttd. Nazwath_jest skrótem od_table heading, a to znaczy po prostunagłówek tabeli. Dane wyświetlane przez elementythsą domyślnie pogrubione i wyśrodkowane.
| 1 2 3 4 5 6 7 8 91011121314151617 | <table><tr><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr><tr><td>Grzegorz</td><td>Brzęczyszczykiewicz</td><td>99</td></tr><tr><td>Franek</td><td>Dolas</td><td>30</td></tr></table> |
|---|---|
Dodajemy obramowanie
Korzystając z tabel przyzwyczailiśmy się do tego, że posiadają one obramowanie. Oczywiście możemy je również dodać do naszej tabeli utworzonej w HTML. Aby to zrobić należy użyć atrybutuborderelementutable. Jako wartość tego atrybutu należy przekazać liczbę, która wyraża szerokość obramowania w pikselach.
| 1 2 3 4 5 6 7 8 910111213141516171819202122 | <tableborder="1"><tr><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr><tr><td>Jan</td><td>Nowak</td><td>28</td></tr><tr><td>Grzegorz</td><td>Brzęczyszczykiewicz</td><td>99</td></tr><tr><td>Franek</td><td>Dolas</td><td>30</td></tr></table> |
|---|---|
Po uruchomieniu przykładu zauważysz, że obramowanie zostało dodane zarówno do całej tabeli jak i do każdej komórki z osobna. Oczywiście można to zmienić, jednak najlepiej użyć do tego stylów CSS, zajmiemy się nimi pod koniec kursu. Już za chwilę pokażemy Ci jednak ciekawe obejście tego problemu.
Odstępy w tabeli
Być może efekt, który uzyskaliśmy w poprzednim przykładzie Ci się nie spodobał. Przyznam, że mi również nie przypadł on do gustu. Jest tak głównie dlatego, że pomiędzy każdą komórką są odstępy, przez co w tabeli występują podwójne obramowania. Co ciekawe odstępy pomiędzy komórkami możemy modyfikować za pomocą atrybutucellspacing. Przekazujemy do niego liczbę określającą odstęp wyrażony w pikselach.
Po przypisaniu atrybutowicellspacingwartości0, pomiędzy komórkami tabeli nie będzie odstępu, a to spowoduje, że obramowanie będzie wyglądać jak jedna linia.
| 1 2 3 4 5 6 7 8 910111213141516171819202122 | <tableborder="1"cellspacing="0"><tr><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr><tr><td>Jan</td><td>Nowak</td><td>28</td></tr><tr><td>Grzegorz</td><td>Brzęczyszczykiewicz</td><td>99</td></tr><tr><td>Franek</td><td>Dolas</td><td>30</td></tr></table> |
|---|---|
Według mnie tym razem efekt jest o wiele lepszy, chociaż przydałoby się jeszcze dodać odstępy do wnętrza komórek. Można to zrobić przy pomocy atrybutucellpadding.
| 1 2 3 4 5 6 7 8 910111213141516171819202122 | <tableborder="1"cellspacing="0"cellpadding="7"><tr><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr><tr><td>Jan</td><td>Nowak</td><td>28</td></tr><tr><td>Grzegorz</td><td>Brzęczyszczykiewicz</td><td>99</td></tr><tr><td>Franek</td><td>Dolas</td><td>30</td></tr></table> |
|---|---|
Zadanie 2
Do poniższej tabeli dodaj obramowanie szerokie na 2 piksele, ustaw odległości pomiędzy komórkami na 0, a wewnętrzne odległości w komórkach na 5 pikseli.
Scalanie komórek
Jeśli korzystałeś z arkuszy kalkulacyjnych np. Excel lub z tabelek np. w Word, to najprawdopodobniej wiesz, czym jest scalanie komórek. Chodzi po prostu aby połączyć kilka komórek leżących obok siebie w jedną.
W HTML używamy do tego atrybutówcolspanokreślającego na ile kolumn ma się rozciągać aktualna komórka orazrowspan, które pozwala nam rozciągnąć komórkę na kilka wierszy.
| 1 2 3 4 5 6 7 8 910111213141516171819 | <tableborder="1"cellspacing="0"cellpadding="7"><tr><th>Kolumna 1</th><th>Kolumna 2</th><th>Kolumna 3</th></tr><tr><tdrowspan="2">Wiersz 1 Kolumna 1</td><td>Wiersz 1 Kolumna 2</td><td>Wiersz 1 Kolumna 3</td></tr><tr><td>Wiersz 2 Kolumna 2</td><td>Wiersz 2 Kolumna 3</td></tr><tr><tdcolspan="3">Wiersz 3 Kolumna 1</td></tr></table> |
|---|---|
Zwróć uwagę na to, że tym razem w kodze w tagachtrnie znajduje się zawsze tyle samo znacznikówtd. Jest to spowodowane właśnie rozciąganiem komórek na kilka kolumn lub wierszy.
Zadanie 3
Zmodyfikuj tabelę, tak aby obie komórki w ostatnim wierszu zostały połączone. Taka scalona komórka powinna zawierać tekst będący połączeniem tekstów złączonych komórek, czyli “Grzegorz Brzęczyszczykiewicz”.
Podsumowanie
W tej lekcji miałeś okazję poznać tabele, które są bez wątpienia ważnym elementem HTML. Rozpoczęliśmy od stworzenia prostej tabeli, miałeś okazję poznać elementytable,tritd. Następnie dodaliśmy nagłówek za pomocą tagówth. W dalszej części zajęliśmy się obramowaniem, odstępami pomiędzy komórkami i wewnątrz komórek, a na koniec lekcji dowiedziałeś się jak scalać komórki, co sprowadza się do tworzenia komórek rozciągających się na kilka kolumn lub wierszy.