Aplikacje internetowe

TabeleCiąg dalszy

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.

Przykład

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>

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

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>

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.

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.

Nazwa HEX Kolorblack #000000 silver #C0C0C0 gray #808080 white #FFFFFF maroon #800000 red #FF0000 purple #800080 fuchsia #FF00FF green #008000 lime #00FF00 olive #808000 yellow #FFFF00 navy #000080 blue #0000FF teal #008080 aqua #00FFFF

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.

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>.

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.

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ą.

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 align tak samo jak w przypadku tabeli.

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).

Przykład

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),

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>

Przykład

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.

Przykład

Komórkazawierającadwa wierszei dwie kolumny

Komórka zawierającadwa wiersze

Komórka zawierającadwie kolumny

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.

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

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>

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

Przykład komórki rozpiętej na kilku wierszach – kod HTML

<table border="1"><tr>

<th colspan="2"><br /></th><th>Luz<br />pierścienia</th>

</tr><tr align="center">

<th rowspan="2">Tłok</th><th>Górny</th><td>3mm</td>

</tr><tr align="center">

<th>Dolny</th><td>3.2mm</td>

</tr></table>