Tabela z komórkami nagłówkowymi (wyróżnionymi) Nagłówek poziomy <th>...</th> <th>...</th> Nagłówek pionowy <th>...</th> <th>...</th> Tytuł tabeli <caption align="ustawienie">tytuł tabeli</caption>... gdzie jako "ustawienie" należy podać: "top" - tytuł górny (domyślnie) "bottom" - tytuł dolny "left" - ustawienie przy lewej krawędzi tabeli "right" - przy prawej krawędzi "center" - na środku Przykład 1: Tytuł tabeli komórka1 komórka2 komórka3 komórka4 Wykonaj tabelki z wyróżnionymi nagłówkami.
Wymiary i wyrównanie Wymiary tabeli <table width="x" height="y">... Wymiary pojedynczej komórki <td width="x" height="y">... Wyrównanie tabeli <table align="rodzaj">... gdzie jako "rodzaj" należy wpisać: "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu "center" - wyśrodkowanie tabeli Wyrównanie zawartości tabeli Wyrównanie zawartości całego wiersza <tr align="rodzaj" valign="ustawienie">... Wyrównanie zawartości pojedynczej komórki <td align="rodzaj" valign="ustawienie">... rodzaj "left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie) "right" - wyrównanie zawartości do prawej "center" - wyśrodkowanie zawartości ustawienie "top" - ustawienie zawartości (wiersza lub komórki) na górze "bottom" - ustawienie zawartości na dole "middle" - ustawienie zawartości po środku (domyślnie) Wypróbuj wszystkie podane sposoby wyrównania zawartości w tabeli.
Kolor tła W całej tabeli <table bgcolor="kolor">... W jednym wierszu <tr bgcolor="kolor">... W pojedynczej komórce <td bgcolor="kolor">... Tło obrazkowe W całej tabeli <table background="ścieżka dostępu">... W pojedynczej komórce <td background="ścieżka dostępu">... Zmień tło w komórkach tabeli. Wykorzystaj kolor i grafikę. Łączenie komórek Poziome łączenie komórek <td colspan="x">... gdzie "x" oznacza liczbę komórek do połączenia w poziomie. Pionowe łączenie komórek <td rowspan="y">... gdzie "y" oznacza liczbę komórek do połączenia w pionie.
Łączenie wierszy w grupy Umożliwia odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie określone parametry: Określony rodzaj formatowania - ustawienie tekstu w komórkach Kolor tła <tbody align="rodzaj" valign="ustawienie">... <tbody bgcolor="kolor">... Usunąć część krawędzi wewnętrznych w tabeli Przykład 2 <table border="1" width="100%"> <tbody align="center"> <td>komórka1 <td>komórka2 <td>komórka3 <td>komórka4 <td>komórka5 <td>komórka6 <td>komórka7 <td>komórka8 <td>komórka9 Zewnętrzne krawędzie <table border="1" frame="typ">... gdzie jako "typ" należy podać: "void" - usuwa zewnętrzne obramowanie "above" - tylko górna krawędź "below" - tylko dolna krawędź "lhs" - tylko lewa krawędź "rhs" - tylko prawa krawędź "hsides" - tylko poziome krawędzie "vsides" - tylko pionowe krawędzie "box" - wszystkie krawędzie zewnętrzne (domyślnie) Wewnętrzne krawędzie <table border="1" rules="typ">... gdzie jako "typ" należy podać: "none" - usuwa wszystkie wewnętrzne krawędzie "rows" - tylko poziome krawędzie w środku tabeli "cols" - tylko pionowe krawędzie w środku tabeli "all" - wszystkie krawędzie wewnętrzne (domyślnie) "groups" - wybrane krawędzie wewnętrzne (grupy).
Przykład 3: <table border="1" cellpadding="5" rules="groups"> <colgroup span="1"></colgroup> <colgroup span="3"></colgroup> <td>komórka1 <td>komórka2 <td>komórka3 <td>komórka4 <td>komórka5 <td>komórka6 <td>komórka7 <td>komórka8 <td>komórka9 Efekt: <table border="1" frame="above"> <td>komórka1 <td>komórka2 <td>komórka3 <td>komórka4 <td>komórka5 <td>komórka6 <td>komórka7 <td>komórka8 <td>komórka9 na podstawie podanych przykładów wykonaj dwie tabelki z osuniętymi, dowolnymi krawędziami.
Zagnieżdżanie tabel tabela w tabeli <td> gdzie kolorem czerwonym zaznaczono tabelę główną (nadrzędną), a kolorem zielonym tabelę wewnętrzną (podrzędną). Możliwe jest oczywiście dalsze zagnieżdżanie. Praktyczne wykorzystanie zagnieżdżania - budowa struktury strony <td colspan="2" bgcolor="#808080"> <td align="center" valign="middle" bgcolor="white"> <br><b>logo</b><br /> <td width="100" valign="top" bgcolor="#a0a0a0"> <td bgcolor="white"><b>menu</b><br />- Link 1<br />- Link 2<br />- Link 3 <br /> <td bgcolor="white"><b>menu 2</b><br />- Link <td valign="top" bgcolor="#c0c0c0"> <td height="100%" valign="top" bgcolor="white"><b>treść STRONY</b><br /><br />Jakis tekst... <td colspan="2" align="center" bgcolor="#808080"> <table width="100%" cellspacing="0" cellpadding="3"> <td align="center" valign="middle" bgcolor="white"><b>stopka</b>
Efekt: LOGO MENU 1 - Link 1 - Link 2 - Link 3 TREŚĆ STRONY Jakiś tekst... MENU 2 - Link STOPKA