Bardzo wiele danych wygodnie jest prezentować w formie tabelarycznej, np. różnego rodzaju zestawienia. Z tego powodu w języku HTML wprowadzono zestaw znaczników pozwalajšcych na tworzenie tabel. Jak się okazało póniej, te znaczniki pozwoliły także na precyzyjne rozmieszczenie poszczególnych elementów na stronie, przez co możliwe stało się tworzenie stron których szata graficzna wykraczała poza to co oferowały pozostałe znaczniki. Podstawy tworzenia tabel w HTML Przy tworzeniu tabeli podstawę stanowiš następujšce znaczniki: * <table> - ten znacznik stanowi "ramę" wewnštrz której zawiera się cała definicja tabeli; * <tr> - ten znacznik służy do zdefiniowania pojedynczego wiersza tabeli. W jego obrębie muszš znajdować się definicje poszczególnych komórek tabeli; * <td> - ten znacznik z kolei służy do zdefiniowania pojedynczej komórki tabeli; * <th> - znacznik ten podobnie jak znacznik <td> definiuje pojedynczš komórkę tabeli. Różnica jest jednak taka że znacznik <th> tworzy komórkę nagłówka - test w takiej komórce jest pogrubiony. Przykładowa tabela może zatem wyglšdać następujšco: <table> <tr> <th>11</th> <th>12</th> <th>13</th> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table> 11 12 13 21 22 23 31 32 33 Sposób w jaki rozłożone sš znaczniki w przykładzie powyżej nie jest obowišzkowy - można także zapisać wszystko w jednej linii, można również umiecić definicję każdej komórki w jednym wierszu. Tutaj rozmieciłem to tak aby było to w miarę czytelne. Także z tego powodu wstawiłem spacje pomiędzy definicjami poszczególnych komórek i wierszy. Modyfikowanie wyglšdu tabeli Wyglšd gotowej tabeli można modyfikować na wiele sposobów, na przykład za pomocš parametrów znacznika <table>. Dostępne sš atrybuty pozwalajšce na okrelenie następujšcych parametrów tworzonej tabeli: * gruboć obramowania wokół tabeli - atrybut border. Jako wartoć podaje się jakie grube ma być to obramowanie (w pikselach): <table border="5"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 W przypadku gdy nie poda się wartoci, przeglšdarka przyjmie wartoć domylnš, która jest zależna od przeglšdarki: <table border> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * wielkoć odstępu pomiędzy komórkami (w pikselach) - atrybut cellspacing: <table border="1" cellspacing="10"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * wielkoć odstępu pomiędzy zawartociš komórki a jej obramowaniem (w pikselach) - atrybut cellpadding: <table border="1" cellpadding="10"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * szerokoć tabeli - atrybut width. Można jš okrelić w pikselach lub w procentach szerokoci elementu wewnštrz którego tabela jest umieszczona (jeżeli nie jest w żadnym, to brana jest szerokoć okna przeglšdarki): <table border="1" width="200"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> <br> <table border="1" width="50%"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 11 12 21 22 * wysokoć tabeli (w pikselach) - atrybut height. Uwaga: Atrybut ten nie jest co prawda oficjalnš częciš standardu HTML, ale jest interpretowany przez większoć przeglšdarek. Zamiast niego powinno się jednak stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS: <table border="1" height="100"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> <table border="1" style="height: 100px"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * kolor tła tabeli - atrybut bgcolor. Jako wartoć należy podać nazwę koloru lub jego kod szesnastkowy (przykładowš listę kodów kolorów znajdziesz w artykule Bezpieczna paleta kolorów). Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS: <table border="1" bgcolor="yellow"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> <table border="1" style="background-color: yellow"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * obrazek jako tło tabeli - atrybut background. Uwaga: Atrybut ten nie jest co prawda oficjalnš częciš standardu HTML, ale jest interpretowany przez większoć przeglšdarek. Zamiast niego powinno się jednak stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS: <table border="1" background="tlo.gif"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> <table border="1" style="background: url(tlo.gif)"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * wyrównanie tabeli do brzegów dokumentu - atrybut align. Dostępne sš wartoci: left - wyrównanie do lewej (wartoć domylna), center - wyrównanie do rodka, right - wyrównanie do prawej strony. Dodatkowo przy zastosowaniu tego parametru tekst będzie odpowiednio "oblewał" tabelę. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS: <table border="1" align="right"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> tekst tekst<br> tekst tekst<br> tekst tekst <table border="1" style="float: right"> <tr> <td>11</td><td>12</td> </tr><tr> <td>21</td><td>22</td> </tr> </table> tekst tekst<br> tekst tekst<br> tekst tekst 11 12 21 22 tekst tekst tekst tekst tekst tekst Kolejne parametry - dotyczšce sposobu rysowania obramowania oraz linii wewnętrznych tabeli - zostanš podane poniżej, po podaniu metody grupowania kolumn. Modyfikowanie wyglšdu wierszy znacznik <tr> (definiujšcy wiersz tabeli) także może posiadać parametry. Oto one: * wyrównanie tekstu w komórkach w wierszu - atrybut align. Dostępne sš wartoci: left, center i right. Przykład: <table border="1" width="200"> <tr align="center"> <td>11</td><td>12</td> </tr><tr align="right"> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * wyrównanie tekstu w pionie w komórkach w wierszu - atrybut valign. Dostępne sš wartoci: top - wyrównanie do góry komórki, middle - wyrównanie do połowy wysokoci komórki (wartoć domylna), bottom - wyrównanie do dołu komórki. Przykład: <table border="1" width="200" style="height: 100px"> <tr valign="top"> <td>11</td><td>12</td> </tr><tr valign="bottom"> <td>21</td><td>22</td> </tr> </table> 11 12 21 22 * kolor tła komórek w wierszu - atrybut bgcolor. Jako wartoć należy podać nazwę koloru lub jego kod szestnaskowy. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS: <table border="1"> <tr bgcolor="red"> <td>11</td><td>12</td> ...
dzeromijo