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

Slides:



Advertisements
Podobne prezentacje
PODSTAWY TWORZENIA STRON WWW W HTML’u
Advertisements

Dokument HTML jest zwykłym
Tworzenie stron internetowych
Tworzenie stron internetowych
Tworzenie stron internetowych
Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz
HTML.
Kolory, grafika, multimedia
Konstrukcja i formatowanie tabel
Style CSS.
Język HTML podstawy programowania
Style definiujące tabele
Zastosowanie technologii medialnych i internetowych Grafika i skrypty na stronach WWW Wykład dr in ż. Jacek Wachowicz
Budowa i układ strony dokumentu
Podstawy i rozszerzenia języka HTML
Tworzenie stron internetowych www World Wide Web
PODSTAWY <HTML>
Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW.
PODSTAWY TWORZENIA STRON WWW W HTML’u
OPRACOWAŁ : KONRAD MIGAŁA iz krótki tekst Krótki tekst Do formatowania tekstu użyjemy znacznika jest to znacznik który umożliwia utworzenie akapitu.
języka hipertekstowego
Wykład 15 Dokumenty HTML. Tworzenie stron WWW
Otwieranie elementów w różnych ramkach
Tworzenie stron internetowych
HTML.
Kurs języka HTML Mariusz Tomczyk.
HTML cz. 2 Znaczniki i ich parametry
Elementy graficzne <HR> linia pozioma
Zastosowanie Matematyki w Informatyce.
Temat 10: Tabele. Tabele stanowią obecnie jeden ze sposobów prezentowania danych. Początkowo były wykorzystywane do tworzenia układów stron, które teraz.
Temat 5: Pozycjonowanie elementów
HTML Hyper Text Markup Language
Wprowadzenie do CSS Okiełznać style.
Część I. Grupowanie elementów  Elementy i są używane do grupowania i strukturyzowania dokumentu. Będziesz je często wykorzystywał wraz z atrybutami class.
Temat 13: Ramki.
Podstawy HTML RAMKi. Ramki Za ich pomocą możesz swobodnie podzielić okno przeglądarki na kilka części i w nich niezależnie przeglądać dokumenty. Ramki.
Aplikacje internetowe
Aplikacje internetowe
Elementy multimedialne na stronie
Aplikacje internetowe Grafika na stronach WWW ciąg dalszy Atrybuty znacznika body.
Moja pierwsza strona internetowa Created by Marta Guba
Tabele. TABELE Konstrukcja tabeli: Określa ramy tabeli określamy wiersz tabeli określamy komórkę tabeli.
Aplikacje internetowe
Aplikacje internetowe
Aplikacje internetowe Formatowanie tekstu w HTML-u ciąg dalszy.
Kolory w kodzie RGB i HEX
Aplikacje internetowe Tabele. Wprowadzenie Wprowadzenie tabel przez firmę Netscape na początku 1995 roku niemal od razu zrewolucjonizowało sposób projektowania.
Aplikacje internetowe
HTML Hyper Text Markup Language komputerowe Esperanto cz. III polecenia konstrukcyjne strony.
Treści multimedialne - kodowanie, przetwarzanie, prezentacja Odtwarzanie treści multimedialnych Andrzej Majkowski 1 informatyka +
Temat 9: Obrazy i multimedia
Aplikacje internetowe
Temat 4: Klasy i identyfikatory
XHTML Tworzenie stylów CSS Damian Urbańczyk. Zewnętrzny plik CSS Aby ułatwić sobie pracę ze stylami, najlepiej utworzyć osobny plik, w którym będą przechowywane.
Kolumny, tabulatory, tabele, sortowanie
Formatowanie danych w arkuszu kalkulacyjnym
HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie.
Temat 2: Składnia kaskadowych arkuszy stylów. Za zmianę wyglądu witryny w kaskadowych arkuszach stylów odpowiadają reguły stylów. Każda z reguł powiązana.
Podstawy tworzenia stron WWW w języku HTML Koło Naukowe Elektroniki Przemysłowej - KNEP Wykonali:Mariusz Zawistowicz i Karol Witowski.
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
Aplikacje internetowe Posługiwanie się ramkami. Zastosowanie ramek Wprowadzenie obsługi ramek w przeglądarce Netscape 2.0 otworzyło nową erę dla twórców.
Wykład 2 Mechatronika PWSW Informatyka. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari.
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
Istotą kolumn jest przedzielenie strony na kilka części położonych obok siebie. Ilość kolumn jest generowana przez użytkownika, odpowiednio dla jego potrzeb.
Zapis szesnastkowy koloru.
<i>Tu wpisz tekst</i>
Formatowanie, projektowanie tabeli
Zasady formatowania szkolnej pracy pisemnej
Piotr Grzegorzewski klasa 1GB (rok szkolny 2011/2012)
Arkusz stylów CSS Cascading Style Sheet.
Zapis prezentacji:

Aplikacje internetowe Tabele Ciąg dalszy

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.

Przykład

Kod HTML Imię Wiek Zachowanie Witek 2 Miłe Szymon 3 Potulne Piotr 7 Podejrzliwy za wyjątkiem chwil gdy jest głodny

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

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.

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# silver#C0C0C0 gray# white#FFFFFF maroon# red#FF0000 purple# fuchsia#FF00FF green# lime#00FF00 olive# yellow#FFFF00 navy# blue#0000FF teal# 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.

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.

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 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 z atrybutem align. Przykład Statystyka

Przykład

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.

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

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.

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

Przykład komórki rozpiętej na dwóch kolumnach – kod HTML Płeć Mężczyzna Kobieta 15 23

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

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