aplikacje internetowe
DESCRIPTION
Aplikacje internetowe. Tabele Ciąg dalszy. Wprowadzanie złamań wiersza. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/1.jpg)
Aplikacje internetowe
TabeleCiąg dalszy
![Page 2: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/2.jpg)
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.
![Page 3: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/3.jpg)
Przykład
![Page 4: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/4.jpg)
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>
![Page 5: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/5.jpg)
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
![Page 6: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/6.jpg)
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>
![Page 7: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/7.jpg)
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.
![Page 8: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/8.jpg)
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
![Page 9: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/9.jpg)
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.
![Page 10: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/10.jpg)
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>.
![Page 11: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/11.jpg)
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.
![Page 12: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/12.jpg)
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ą.
![Page 13: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/13.jpg)
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.
![Page 14: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/14.jpg)
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).
![Page 15: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/15.jpg)
Przykład
![Page 16: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/16.jpg)
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),
![Page 17: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/17.jpg)
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>
![Page 18: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/18.jpg)
Przykład
![Page 19: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/19.jpg)
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.
![Page 20: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/20.jpg)
Przykład
Komórkazawierającadwa wierszei dwie kolumny
Komórka zawierającadwa wiersze
Komórka zawierającadwie kolumny
![Page 21: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/21.jpg)
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.
![Page 22: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/22.jpg)
Przykład komórki rozpiętej na dwóch kolumnach
![Page 23: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/23.jpg)
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>
![Page 24: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/24.jpg)
Przykład komórki rozpiętej na kilku wierszach
![Page 25: Aplikacje internetowe](https://reader031.vdocuments.mx/reader031/viewer/2022012922/56813167550346895d97dd24/html5/thumbnails/25.jpg)
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>