Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia tzw. odcięć, czyli wstawiania do komórek tabeli poszczególnych kawałków pociętego, zwykle większego obrazka. Wewnątrz komórek tabeli nie powinniśmy umieszczać białych znaków wraz ze znacznikiem Poprawnie: <td><img src="..." alt="..." /> Niepoprawnie: <td><img src="..." alt="..." /> Aby to zmienić, naleŝy zdefiniować w kaŝdej komórce osobno rozmiar czcionki. Jednak lepszym rozwiązaniem jest wstawienie w nagłówku dokumentu: <style type="text/css"> /* <![CDATA[ */ td { font-size: wielkośćpx; color: kolor; font-family: rodzaj } /* ]]> */ </style> wielkość Rozmiar tekstu w tabeli podany w pikselach kolor Barwa czcionki rodzaj Wybrany krój czcionki (potrzebne w Netscape 6) 5.1.2 Inne zastosowania tabel Prezentacji zbioru uporządkowanych danych: <table border="0" width="100%"> <td align="left">lewa <td align="right">prawa 5.1.2.1 Struktura strony Struktury strony. MoŜna np. w lewej kolumnie umieścić spis treści serwisu, a w prawej - zawartość tekstową strony. Na górze moŝna przeznaczyć miejsce na animowany banner lub/i logo serwisu: 1 z 7
<table width="100%" cellspacing="0" cellpadding="10"> <td bgcolor="kolor góra" colspan="2" align="center" valign="middle">tutaj moŝna umieścić logo serwisu <td bgcolor="kolor menu" width="tutaj wpisz szerokość menu (np.: 150)" valign="top"> Tu umieszcza się odsyłacze spisu treści <td bgcolor="kolor strony" valign="top"> Tu wpisuje się treść strony 5.1.2.2 Strona niezaleŝna od rozdzielczości ekranu W powyŝszym kodzie ustalono szerokość tabeli równą 100%, czyli będzie ona zajmowała zawsze całą szerokość okna przeglądarki (minus marginesy) bez względu na rozdzielczość, w jakiej pracuje uŝytkownik. Środkowanie Do uzyskania takiego efektu, lepszym rozwiązaniem od tabel jest uŝycie bloków, np.: <body style="text-align: center; margin: 0; padding: 0"> <div style="width: 770px; margin: 0 auto; text-align: left"> Tu wpisuje się treść strony </div> </body> Rozwiązanie na tabelach <table width="750" align="center" cellspacing="0" cellpadding="10"> <td bgcolor="kolor góra" colspan="2" align="center" valign="middle">tutaj moŝna umieścić logo serwisu <td bgcolor="kolor menu" width="150" valign="top"> <!-- MENU --> <a target="strona" href="home.html">strona główna</a><br /> <a href="mailto:jan_kowalski@example.com">kontakt</a><br> <!-- MENU koniec --> <td bgcolor="kolor strony" valign="top"><iframe name="strona" src="home.html" width="560" height="440" frameborder="0"></iframe> 5.1.2.3 Ramki Innym ciekawym zastosowaniem tabel jest tworzenie "ramek" z zaokrąglonymi bądź ściętymi rogami. Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie cztery naroŝniki, np.: <table cellpadding="0" cellspacing="0"> <td style="line-height: 1px"><img src="lg.gif" alt="" /><td bgcolor="#426b9c" style="line-height: 1px"><img src="0.gif" alt="" /><td style="line-height: 1px"><img src="pg.gif" alt="" /> <td bgcolor="#426b9c"><img src="0.gif" alt="" /><td bgcolor="#426b9c"> <font color="#c0ffff"><b>tabelka z zaokrąglonymi rogami</b></font> <td bgcolor="#426b9c"><img src="0.gif" alt="" /> <td style="line-height: 1px"><img src="ld.gif" alt="" /><td bgcolor="#426b9c" style="line-height: 1px"><img src="0.gif" alt="" /><td style="line-height: 1px"><img src="pd.gif" alt="" /> 2 z 7
Efekt: Tabelka z zaokrąglonymi rogami 5.2. Obramowanie <table border="x">... 5.3. Marginesy w komórkach <table border cellpadding="x">... 5.4. Odstępy między komórkami <table cellspacing="x">... 5.5. Komórki nagłówkowe 1. Nagłówek poziomy 2. Nagłówek pionowy 3. Nagłówek mieszany <th></th> 3 z 7
5.6. Tytuł tabeli <caption align="ustawienie">tu podaj tytuł</caption> (...) top, bottom, left, righti,center 5.7. Wymiary 1. Wymiary całej tabeli <table width="x" height="y">... 2. Wymiary pojedynczej komórki <td width="x" height="y">... 5.8. Wyrównanie tabeli <table align="rodzaj">... Left, right, center 5.9. Wyrównanie zawartości tabeli 1. Wyrównanie zawartości całego wiersza <tr align="rodzaj" valign="ustawienie">... 2. Wyrównanie zawartości pojedynczej komórki <td align="rodzaj" valign="ustawienie">... r: left, right, center; u: top, bottom, Middle 5.10. Kolor tła 1. W całej tabeli 4 z 7
<table bgcolor="kolor">... 2. W jednym wierszu <tr bgcolor="kolor">... 3. W pojedynczej komórce <td bgcolor="kolor">... 5.11. Tło obrazkowe 1. W całej tabeli <table background="ścieżka dostępu">... 2. W pojedynczej komórce <td background="ścieżka dostępu">... 5.12. Kolor obramowania <table bordercolor="kolor">... <table bordercolorlight="kolor1">... <table bordercolordark="kolor2">... Kolor - Oznacza kolor, jaki będzie miało całe obramowanie kolor1- Oznacza kolor, jaki będzie miała "oświetlona" część tabeli (lewa oraz górna krawędź obramowania - bordercolorlight="...") kolor2- Oznacza kolor, jaki będzie miała "ocieniona" część tabeli (prawa oraz dolna krawędź obramowania - bordercolordark="...") 5.13. Blokada zawijania tekstu <td nowrap="nowrap">... 5.14. Łączenie komórek 1. Poziome łączenie komórek 5 z 7
<td colspan="x">... 2. Pionowe łączenie komórek <td rowspan="y">... 5.15. Łączenie wierszy w grupy <tbody align="rodzaj" valign="ustawienie"> </tbody>... 5.15.1 Nagłówek i stopka Nagłówek tworzymy, przy uŝyciu: <thead>...</thead>, natomiast stopkę: <tfoot>...</tfoot>: 5.16. Łączenie kolumn w grupy <colgroup span="x"></colgroup> "></colgroup>... 5.17. Zewnętrzne krawędzie <table border="1" frame="typ">... 1. "void" - usuwa zewnętrzne obramowanie 2. "above" - tylko górna krawędź 3. "below" - tylko dolna krawędź 4. "lhs" - tylko lewa krawędź 5. "rhs" - tylko prawa krawędź 6. "hsides" - tylko poziome krawędzie 7. "vsides" - tylko pionowe krawędzie 8. "box" - wszystkie krawędzie zewnętrzne (domyślnie) 5.18. Wewnętrzne krawędzie <table border="1" rules="typ">... 1. "none" - usuwa wszystkie wewnętrzne krawędzie 6 z 7
2. "rows" - tylko poziome krawędzie w środku tabeli 3. "cols" - tylko pionowe krawędzie w środku tabeli 4. "all" - wszystkie krawędzie wewnętrzne (domyślnie) 5. "groups" - wybrane krawędzie wewnętrzne (grupy). 5.19. ZagnieŜdŜanie tabel <td> 7 z 7