Aplikacje internetowe Tabele Ciąg dalszy. Wprowadzanie złamań wiersza Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań.

Prezentacja na temat: "Aplikacje internetowe Tabele Ciąg dalszy. Wprowadzanie złamań wiersza Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań."— Zapis prezentacji:

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 ). Ł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 Imię Wiek Zachowanie Witek 2 Miłe Szymon 3 Potulne Piotr 7 Podejrzliwy za wyjątkiem chwil gdy jest głodny

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 Imię Wiek Zachowanie Witek 2 Miłe Szymon 3 Potulne Piotr 7 Podejrzliwy za wyjątkiem chwil gdy jest głodny

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 lub. 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,, lub dodawany jest atrybut bgcolor. Wartością atrybutu bgcolor jest określająca kolor liczba szesnastkowa lub jedna z szesnastu nazw kolorów. NazwaHEXKolor black#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

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.

11 Zmiana koloru obramowań tabeli Aby zmienić kolor obramowania tabeli do znacznika 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 align tak 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 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 z atrybutem align. Przykład Statystyka

18 Przykład

19 Komórki rozpięte na 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ęte na kilku wierszach lub kolumnach Aby stworzyć komórkę rozpiętą na kilku wierszach i (lub) kolumnach, należy do znacznika lub 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 Płeć Mężczyzna Kobieta 15 23

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

25 Przykład komórki rozpiętej na kilku wierszach – kod HTML Luz pierścienia Tłok Górny 3mm Dolny 3.2mm