Aplikacje internetowe

1. Aplikacje internetowe Tabele Ciąg dalszy

2. Wprowadzanie złamań wiersza Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań wiersza (znaczniki <br/>). Łamania wiersza są szczególnie użyteczne w przypadku tabel, w których większość komórek ma niewielkie rozmiary, a jedynie dwie czy trzy zawierają dłuższe teksty. Dopóki szerokość ekranu jest wystarczająca, przeglądarka po prostu poszerza kolumny i wydłuża wiersze, co wygląda niekiedy dziwnie.

3. Przykład

4. Kod HTML <table border="1"> <tr> <th>Imię</th> <th>Wiek</th> <th>Zachowanie</th> </tr> <tr> <td>Witek</td> <td>2</td> <td>Miłe</td> </tr> <tr> <td>Szymon</td> <td>3</td> <td>Potulne</td> </tr> <tr> <td>Piotr</td> <td>7</td> <td>Podejrzliwy za wyjątkiem chwil gdy jest głodny</td> </tr> </table>

5. Wprowadzanie złamań wiersza • Wstawiając znaczniki łamania wiersza, możemy zmieścić tekst w węższej kolumnie, dzięki czemu tabela będzie wyglądała, jak na rysunku

6. Kod HTML <table border="1"> <tr> <th>Imię</th> <th>Wiek</th> <th>Zachowanie</th> </tr> <tr> <td>Witek</td> <td>2</td> <td>Miłe</td> </tr> <tr> <td>Szymon</td> <td>3</td> <td>Potulne</td> </tr> <tr> <td>Piotr</td> <td>7</td> <td>Podejrzliwy za <br /> wyjątkiem chwil <br />gdy jest głodny</td> </tr> </table>

7. Atrybut nowrap • Możliwa jest także sytuacja odwrotna, to znaczy taka, w której zawartość komórki jest zawijana, a nie powinna. • W takim wypadku możemy dodać atrybut nowrap do znacznika <th> lub <td>. Przeglądarka nie będzie wówczas rozdzielała takich danych i wyświetli je w jednym wierszu.

8. Modyfikacja koloru tła tabel i komórek Aby zmienić tło tabeli, wiersza lub komórki wiersza, do znacznika <table>, <tr>, <th> lub <td> dodawany jest atrybut bgcolor. Wartością atrybutu bgcolor jest określająca kolor liczba szesnastkowa lub jedna z szesnastu nazw kolorów.

9. Modyfikacja koloru tła tabel i komórek • Ustawienia dotyczące koloru tła dominują nad ustawieniami koloru tła elementu nadrzędnego. • Oznacza to, że ustawienia koloru tła tabeli dominują nad ustawieniami tła strony, ustawienia koloru wiersza dominują nad ustawieniami koloru tła tabeli, a ustawienia dotyczące koloru komórki nad wszelkimi innymi.

10. Zmiana koloru tekstu • Pamiętaj także, by wraz ze zmianą koloru tła komórki zmienić kolor zawartego w niej tekstu, aby komórka była czytelna. • Do zmiany koloru tekstu służy atrybut color użyty w znaczniku <font>.

11. Zmiana koloru obramowań tabeli Aby zmienić kolor obramowania tabeli do znacznika <table> dodawany jest atrybut bordercolor. Wartością atrybutu bordercolor jest określająca kolor liczba szesnastkowa lub jedna z szesnastu nazw kolorów tak jak w przypadku koloru tła tabeli.

12. Wyrównywanie tabeli • Domyślnie tabela wyrównywana jest do lewej krawędzi strony, a tekst umieszczany jest nad i pod nią. Za pomocą atrybutu align możliwe jest wyrównywanie tabel względem dowolnego marginesu oraz otaczanie ich tekstem. • Ustawienie align="left" powoduje wyrównanie tabeli względem lewego marginesu, a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli. • Ustawienie align="right" działa podobnie, z tym, że tabela jest wyrównywana do prawego marginesu. • Ustawienie align="center" powoduje wyśrodkowanie tabeli a towarzyszący tekst jest umieszczany nad i pod tabelą.

13. Wyrównanie zawartości wiersza i komórki • Możliwe jest także wyrównywanie zawartości poszczególnych wiersz i komórek, w poziomie i w pionie. • Domyślnie zawartość komórek nagłówka jest centrowana w poziomie i pionie, natomiast w przypadku komórek danych, zawartość jest centrowana w pionie, a w poziomie wyrównana do lewego marginesu. • Sposób wyrównania zawartości wiersza i komórki w poziomie określony jest wartością atrybutu aligntak samo jak w przypadku tabeli.

14. Wyrównanie zawartości wiersza i komórki w pionie Sposób wyrównania zawartości wiersz i komórki w pionie określony jest wartością atrybutu valign. Przyjmuje on takie oto wartości: • top(dosunięcie do górnego marginesu), • bottom (do dolnego marginesu), • middle (wycentrowanie względem obu marginesów).

15. Przykład

16. Wyrównywanie tytułu tabeli Opcjonalny atrybut align znacznika <caption> określa sposób wyrównania tekstu podpisu. Atrybut ten może przyjąć następujące wartości: • top (umieszczenie tytułu nad tabelą na środku), • bottom(umieszczenie tytułu pod tabelą na środku), • left (umieszczenie tytułu z lewej strony tabeli), • right(umieszczenie tytułu z prawej strony tabeli),

17. Wyrównywanie tytułu tabeli • Jest możliwe również wyrównanie tytułu w poziomie do lewej lub prawej krawędzi tabeli w przypadku gdy jest on umieszczony nad lub pod tabelą. • W tym przypadku z pomocą przychodzi znacznik <div> z atrybutem align. • Przykład <caption align="top" ><div align="left">Statystyka</div></caption>

18. Przykład

19. Komórki rozpiętena kilku wierszach lub kolumnach • W dotychczas tworzonych przez nas tabelach, na jedną komórkę przypadała jedna wartość, ewentualnie była to komórka pusta. • Można również utworzyć takie komórki, które rozpięte są na wielu wierszach lub kolumnach tabeli. • Takie komórki najczęściej zawierają nagłówki dzielące się w kolejnych wierszach lub kolumnach na sekcje. Mogą one także posłużyć do urozmaicania układu tabeli.

20. Przykład Komórka zawierająca dwa wiersze i dwie kolumny Komórka zawierająca dwa wiersze Komórka zawierająca dwie kolumny

21. Komórki rozpiętena kilku wierszach lub kolumnach Aby stworzyć komórkę rozpiętą na kilku wierszach i (lub) kolumnach, należy do znacznika <th> lub <td> dodać atrybuty rowspan i/lub colspan oraz przypisać im odpowiednie wartości, które określą liczbę wierszy i (lub) kolumn, na których komórka jest rozpięta. Dane umieszczone w takiej komórce wypełnią obszar o długości i (lub) szerokości odpowiadającej rozpiętości.

22. Przykład komórki rozpiętej na dwóch kolumnach

23. Przykład komórki rozpiętej na dwóch kolumnach – kod HTML <table border="1"> <tr> <th colspan=2>Płeć</th> </tr> <tr> <th>Mężczyzna</th> <th>Kobieta</th> </tr> <tr> <td>15</td> <td>23</td> </tr> </table>

24. Przykład komórki rozpiętej na kilku wierszach

25. Przykład komórki rozpiętej na kilku wierszach – kod HTML <table border="1"> <tr> <thcolspan="2"><br /></th> <th>Luz<br />pierścienia</th> </tr> <tralign="center"> <throwspan="2">Tłok</th> <th>Górny</th> <td>3mm</td> </tr> <tralign="center"> <th>Dolny</th> <td>3.2mm</td> </tr> </table>