Tabele. Dodał Administrator czwartek, 22 lipiec :59
|
|
|
- Bogdan Włodarczyk
- 4 lat temu
- Przeglądów:
Transkrypt
1 zazwyczaj kojarzą się z wypełnioną gęsto tekstem lub liczbami, podzieloną liniami na wiersze i kolumny kartką papieru; w dokumentach elektronicznych też najczęściej przyjmują taką postać. Na stronach WWW tabele zyskują jednak nowe znaczenie choć można je wykorzystywać do zapisywania danych, to najczęściej służą jednak do definiowania układu strony na przykład dzielenia strony na różnej szerokości kolumny wypełnione tekstem na wzór szpalt w gazecie. Mechanizm tabel jest mocnym punktem języka XHTML możliwe jest definiowanie rodzaju obramowania komórek tabeli (bądź zrezygnowanie z niego), ustalanie marginesów komórek tabeli, a nawet zagnieżdżanie tabel (tworzenie tabeli wewnątrz komórki innej tabeli). Osiągnięcie mistrzostwa w operowaniu tabelami wymaga miesięcy ciężkiej pracy, jednak po przeczytaniu kilkunastu kolejnych stron powinieneś opanować podstawy tworzenia i modyfikowania tabel, które pozwolą Ci samodzielnie poszerzać swoją wiedzę. Jak w języku XHTML opisuje się tabelę Kod opisujący tabelę zawarty jest wewnątrz elementu <table>. Niestety, olbrzymia elastyczność języka XHTML spowodowała, że nie wystarczy utworzyć element <table>, podać liczbę wierszy i kolumn tabeli i rozpocząć wprowadzanie danych. By stworzyć tabelę, konieczne jest stworzenie odrębnych elementów dla każdego wiersza i każdej komórki tabeli! Powoduje to, że tworzenie tabel jest jednym z najbardziej skomplikowanych i frustrujących zadań, przed którymi stają początkujący twórcy stron WWW. Projektując tabele w języku XHTML, musisz cały czas pamiętać o podstawowej zasadzie: najważniejszym elementem tabeli jest wiersz, który z kolei podzielony jest na komórki. Wierszowi tabeli odpowiada element, zaś pojedynczej komórce element <th> (w przypadku komórek pełniących funkcję nagłówka) oraz <td> (w przypadku zwykłych komórek danych). Elementy <th> oraz <td> muszą być zawarte w elemencie, a ten z kolei w elemencie <table>. Struktura kodu tabeli wygląda zatem następująco: <table> <td> </td> <td> </td> <td> </td> <td> </td> 1 / 23
2 Projektowanie tabeli najlepiej rozpocząć od narysowania jej na kartce papieru. Zaufaj mi pozwoli Ci to zaoszczędzić sporo czasu, gdyż pomoże w przełożeniu podziału na wiersze i komórki na prawidłowy kod XHTML tabeli. Tworzenie tabeli Poniżej przedstawiłem kroki niezbędne do zbudowania najprostszej tabeli, zawierającej dwa wiersze po dwie komórki każdy. Jeden z wierszy będzie pełnić funkcję nagłówka tabeli, drugi zaś funkcję wiersza danych. Wyróżnianie wiersza pełniącego funkcję nagłówka tabeli nie ma na celu wyłącznie zmiany jego wyglądu: ten sam efekt wizualny mógłbyś osiągnąć również, tworząc nagłówek w sposób identyczny jak zwykły wiersz danych. Jak już jednak podkreślałem w poprzednich rozdziałach, równie istotna jak wygląd dokumentu XHTML jest jego struktura logiczna. Przygotuj sobie szkielet pustej strony WWW, a następnie wewnątrz elementu <body> wprowadź następujący kod XHTML: <table> <th>nagłówek 1</th> <th>nagłówek 2</th> <td>komórka 1</td> <td>komórka 2</td> Powyższy kod tworzy tabelę (element <table>) składającą się z dwóch wierszy (elementów ). W pierwszym z nich znajdują się dwie komórki nagłówka (elementy <th>, rysowane po kolei od lewej do prawej), a w drugim dwie zwykłe komórki danych (elementy <td>). Ponieważ kolejne wiersze powielają zawsze wygląd pierwszego (szczególnie chodzi tu o szerokości poszczególnych komórek), obie komórki danych będą umieszczone idealnie poniżej komórek nagłówka, tworząc dwie kolumny (rysunek 6.1). 2 / 23
3 Rysunek 6.1. Prosta tabela Tworząc tabele i wypełniając je treścią, pamiętaj, że element <td> koniecznie musi zawierać jakąś treść. Jeśli komórka tabeli ma pozostać pusta, wewnątrz elementu <td> (a więc pomiędzy znacznikami <td> i </td>) musi być zawarty znak twardej spacji (w kodzie XHTML odpowiada mu encja ). Zmiana szerokości i pozycji tabeli Przeglądarka WWW zawsze stara się nadać tabeli najmniejszą możliwą szerokość. O ile zatem w tabeli będzie dostatecznie mało danych jak w powyższym przykładzie cała tabela zajmie tylko kilka centymetrów szerokości okna. Jeżeli chcesz użyć tabeli w celu kształtowania wyglądu strony na przykład podzielenia jej na obszary wypełniane różną treścią może to zniweczyć Twe wysiłki. Określenie szerokości całej tabeli i jej ewentualne wyśrodkowanie lub dosunięcie do prawej krawędzi okna nie jest na szczęście skomplikowane. Za szerokość odpowiada znany Ci już pewnie atrybut stylu width, a szerokość możesz podawać w pikselach (px), punktach (pt), centymetrach (cm) lub względem szerokości okna (%). Szczególnie ta ostatnia opcja może być przydatna, jeżeli Twoim celem jest utworzenie tabeli o szerokości całego okna przeglądarki: <table style="width: 100%;">... Jeżeli spróbowałeś na własną rękę stworzyć tabelę węższą od okna przeglądarki i wycentrować ją lub dosunąć do brzegu ekranu za pomocą atrybutu stylu textalign, pewnie zauważyłeś, że nie reaguje ona na Twoje wysiłki. Aby zmienić wyrównanie tabeli, należy bowiem użyć atrybutu stylu margin: aby wyśrodkować tabelę, jako wartości lewego i prawego marginesu należy podać auto, aby dosunąć tabelę do prawej krawędzi, jako wartość lewego marginesu należy podać auto, a prawego 0. Przy okazji możesz też określić szerokość górnego i dolnego marginesu tabeli. Oto przykład (rysunek 6.2): <table style="border: 1px solid blue;"> <td>komórka 1</td> <td>komórka 2</td> 3 / 23
4 <table style="border: 1px solid green; margin: 10pt auto 10pt auto;"> <td>komórka 1</td> <td>komórka 2</td> <table style="border: 1px solid red; margin: 10pt 0 10pt auto;"> <td>komórka 1</td> <td>komórka 2</td> Rysunek 6.2. Trzy sposoby wyrównywania tabeli względem marginesów strony Wskazówka Podana powyżej metoda wyrównywania całej tabeli względem marginesów nie funkcjonuje poprawnie w wersjach przeglądarki Microsoft Internet Explorer starszych niż 7.0. W ich przypadku konieczne jest zawarcie tabeli w bloku <div> i narzucenie sposobu wyrównywania tekstu w ramach tego bloku za pomocą atrybutu stylu textalign. Jeżeli zależy Ci na zgodności ze starszą wersją przeglądarki Internet Explorer, najlepiej jest połączyć obydwie metody wyrównywania. Zmiana szerokości kolumny tabeli 4 / 23
5 Rzadko kiedy przeglądarce uda się we właściwy sposób dopasować szerokość kolumn tabeli do zawartej w jej komórkach treści. Czasem też nie może być mowy o automatycznym modyfikowaniu szerokości wybranych kolumn. Na szczęście język XHTML pozwala bardzo dokładnie kontrolować szerokość kolumn tabeli i określać ją w sposób dokładny co do jednego piksela lub względny. Oczywiście służy do tego ten sam atrybut stylu width. Tym razem jednak musisz go zastosować nie do elementu <table> (w którym to przypadku modyfikował szerokość całej tabeli), lecz do elementu <td> lub <th>. Ponieważ pamiętasz pewnie, że wszystkie komórki w jednej kolumnie tabeli muszą mieć tę samą szerokość, wystarczy przypisać ten atrybut stylu do jednej komórki w całej kolumnie najlepiej do komórki znajdującej się w pierwszym wierszu. Oto przykład (rysunek 6.3): <table border="2"> <th style="width: 3cm;">Kolumna 1</th> <th style="width: 40%;">Kolumna 2</th> <th>kolumna 3</th> <th style="width: 50pt;">Kolumna 4</th> <td>żaba</td> <td>jaszczurka</td> <td>kot</td> <td>kameleon</td> <td>morświn</td> <td>rybitwa</td> <td>szczupak</td> <td>okoń</td> 5 / 23
6 Rysunek 6.3. Tabela z narzuconą szerokością poszczególnych kolumn Kolumny, których szerokość nie zostanie ręcznie określona, nadal będą automatycznie rozszerzane lub zwężane przez przeglądarkę w zależności od ich zawartości oraz od szerokości pozostałych kolumn tabeli. Nie uda Ci się też sztucznie zwęzić kolumn zawierających długie słowa minimalną szerokością kolumny będzie zawsze długość najdłuższego słowa zapisanego w jej komórkach, gdyż przeglądarki WWW nie potrafią automatycznie dzielić wyrazów. Wskazówka Aby oznakować miejsca, w których bardzo długie wyrazy mogą zostać podzielone w razie potrzeby, zastosuj encję. Zmiana obramowania tabeli Na pewno zauważyłeś, że w poprzednich przykładach utworzyłem ramkę wokół tabeli. Nie jest to zadanie trudne i może być wykonane na dwa sposoby. Pierwszy z nich wywodzi się z poprzednich wersji języka XHTML i umożliwia sterowanie obramowaniem wszystkich komórek tabeli naraz. Szerokość obramowania podaje się jako wartość atrybutu border, przy czym podanie zera jako szerokości usuwa obramowanie: <table border="3">... Sposobu tego powinieneś używać wyłącznie przy projektowaniu tabel i diagnozowaniu ich układu. Stworzona w ten sposób ramka jest bardzo czytelna, lecz mało elegancka, a kod wykorzystujący atrybut border nie jest zgodny z najnowszymi normami (rysunek 6.4). Rysunek 6.4. Obramowanie stworzone za pomocą atrybutu border jest funkcjonalne, lecz mało estetyczne 6 / 23
7 Drugi, ładniejszy sposób wykorzystuje atrybuty stylu CSS, a konkretniej znany Ci atrybut stylu border, którego pierwszy parametr określa szerokość obramowania, drugi styl, a trzeci kolor. Niestety, przypisanie go samemu elementowi <table>: <table style="border: 1px solid blue;"> powoduje, że obramowaniem otaczana jest cała tabela, lecz nie poszczególne komórki (rysunek 6.5). Rysunek 6.5. Atrybut stylu border zastosowany do elementu <table> wpływa wyłącznie na obramowanie otaczające całą tabe Aby uzyskać pożądany efekt, należy przypisać atrybut stylu border każdej komórce tabeli z osobna. Nagrodą za trud włożony w modyfikowanie kodu będzie możliwość dowolnego sterowania obramowaniem każdej komórki niezależnie (rysunek 6.6): <table style="border: 1px solid blue;"> <td style="border: 2pt solid green;">żaba</td> <td style="border: 3pt dotted red;">jaszczurka</td> <td style="border: 2pt dashed blue;">kot perski</td> <td>kameleon</td> 7 / 23
8 Rysunek 6.6. Określenie obramowania poszczególnych komórek wymaga sporego nakładu pracy, jednak pozwala uzyskać ś Najczęściej jednak autorowi stron WWW chodzi o to, by nowy rodzaj obramowania narzucić wszystkim komórkom tabeli lub przynajmniej grupom podobnych do siebie komórek. W przypadku dużych tabel składających się z setek lub tysięcy komórek osobne ustalanie wyglądu obramowania każdej z nich byłoby niezmiernie pracochłonne. Na szczęście można wykorzystać mechanizm kaskadowych arkuszy stylu CSS (a dokładniej selektory dziedziczenia), by zautomatyzować pracę i przerzucić powielanie definicji stylu na przeglądarkę. W pierwszym kroku należy usunąć wszelkie definicje stylu z kodu XHTML oraz nadać tabeli unikatowy identyfikator, korzystając z atrybutu id elementu <table>: <table id="tabela1"> <td>żaba</td> <td>jaszczurka</td> <td>kot perski</td> <td>kameleon</td> W kolejnym kroku przygotuj obszar definicji stylu dokumentu (lub otwórz do edycji istniejącą definicję stylu, jeżeli dany plik XHTML już ją zawiera) i wprowadź opis obramowania tabeli o nadanym przed chwilą identyfikatorze: table#tabela1 { } border: 1px solid blue; Obramowanie tabeli powinno już być widoczne. Zmiana obramowania poszczególnych komórek pozornie bardzo skomplikowana będzie jednak równie prosta dzięki wykorzystaniu selektora dziedziczenia. Konieczne jest stworzenie definicji CSS opisującej styl wszystkich elementów <td> stworzonych w ramach elementu <table> o unikatowym identyfikatorze tabela1 (rysunek 6.7): table#tabela1 td { } border: 3px dotted red; 8 / 23
9 Rysunek 6.7. Jeżeli wszystkie komórki tabeli mają dysponować identycznym obramowaniem, warto użyć selektorów dziedzic Oczywiście jeżeli różne grupy komórek tabeli mają dysponować różnym obramowaniem, możesz stworzyć klasy stylu elementu <td> i przypisać im różne definicje stylu (rysunek 6.8): table#tabela1 { } border: 1px solid blue; table#tabela1 td.czerwona_ramka { } border: 3px dotted red; table#tabela1 td.zielona_ramka { } border: 3px dashed green;... <table id="tabela1"> <td class="czerwona_ramka">żaba</td> <td class="czerwona_ramka">jaszczurka</td> <td class="zielona_ramka">kot perski</td> <td class="zielona_ramka">kameleon</td> 9 / 23
10 Rysunek 6.8. Korzystając z klas stylu, można zróżnicować wygląd poszczególnych komórek tabeli, nie rezygnując jednak ze Wskazówka Aby scalić ze sobą obramowania poszczególnych komórek i zlikwidować odstępy między nimi, nadaj elementowi <table> atrybut bordercollapse o wartości collapse. Zmiana koloru tła i tekstu tabeli Zmiana koloru tła tabeli i jej komórek realizowana tylko i wyłącznie za pomocą stylów CSS przebiega w sposób analogiczny do zmiany obramowania tabeli, tyle że wykorzystuje się atrybuty z rodziny background (głównie backgroundcolor), a zmiana koloru tła tabeli automatycznie zmienia kolor tła wszystkich komórek, których barwy tła nie określiłeś. Nie muszę chyba podkreślać, że bardzo upraszcza to kompozycję wielobarwnych tabel. Oto przykład tabeli o trzech kolumnach i trzech wierszach, w której trzem komórkom leżącym na przekątnej nadane zostały odmienne barwy tła niż całej reszcie tabeli (rysunek 6.9): <table style="border: none; color: yellow; backgroundcolor: blue;"> <td style="backgroundcolor: black; color: silver;">11</td> <td>12</td> <td>13</td> <td>21</td> <td style="backgroundcolor: green; color: cyan;">22</td> <td>23</td> <td>31</td> <td>32</td> <td style="backgroundcolor: red; color: white;">33</td> 10 / 23
11 Rysunek 6.9. Efekt zmiany koloru tła całej tabeli i poszczególnych jej komórek Zauważ, że użyłem też atrybutu stylu color, aby określić kolor tekstu zawartego wewnątrz komórek tabeli. Działa on w sposób opisany już w tym kursie w części poświęconej formatowaniu akapitów tekstu oraz stylom CSS. Zmieniając kolor tła tabeli, zawsze warto dobrać odpowiednio kontrastowy kolor tekstu czarny tekst na niebieskim tle będzie ledwie czytelny dla większości użytkowników Twojej strony WWW, a dla daltonistów najprawdopodobniej absolutnie niewidoczny. W przypadku gdyby ten sam zestaw barw miał zostać użyty w wielu komórkach, powtarzanie definicji stylu wewnątrz każdego wyróżnionego elementu <td> byłoby pracochłonne i niepraktyczne. Najprostszym rozwiązaniem jest stworzenie klas stylu elementów <td> i przypisanie im zestawu atrybutów gwarantującego pożądany wygląd komórek. Jeszcze lepszym sposobem na poradzenie sobie z tym problemem likwidującym ryzyko powstania konfliktów nazw klas między kilkoma tabelami jest połączenie mechanizmu klas stylu z selektorami dziedziczenia opisanymi w poprzednim punkcie. Zmiana marginesów komórek tabeli Jeżeli przyjrzysz się dokładnie rysunkowi zamieszczonemu w poprzednim ćwiczeniu, zauważysz pewnie, że wokół komórek tabeli rysowana jest ramka koloru tła całej tabeli. Spowodowane jest to standardowymi marginesami komórek: komórki są odsunięte od siebie, a spomiędzy nich wyziera tło tabeli. W języku XHTML można jednak sterować prawie każdym aspektem wyglądu strony, zatem i te marginesy możesz zmienić. Za domyślne marginesy wszystkich komórek tabeli odpowiadają atrybuty cellpadding i cellspacing elementu <table>. Pierwszy określa szerokość marginesu wewnątrz komórki czyli o ile ma być odsunięta zawartość komórki (tekst, obraz) od jej krawędzi. Drugi z kolei określa szerokość marginesu wokół komórki czyli o ile komórki mają być odsunięte od siebie. Właśnie nadanie wartości 0 temu drugiemu cellspacing spowoduje zlikwidowanie obramowania powstałego z tła tabeli. Oto kod czterech przykładowych tabel. Każda z nich składa się tylko z jednej komórki, ale wyraźnie możesz dostrzec sposób, w jaki działają dwa opisane powyżej atrybuty (rysunek 6.10): <table style="backgroundcolor: blue;" cellpadding="5" cellspacing="5"> <td style="backgroundcolor: yellow;">cellpadding=5, CellSpacing=5</td> <br /> <table style="backgroundcolor: blue;" cellpadding="0" cellspacing="5"> <td style="backgroundcolor: yellow;"><b>cellpadding=0</b>, CellSpacing=5</td> 11 / 23
12 <br /> <table style="backgroundcolor: blue;" cellpadding="5" cellspacing="0"> <td style="backgroundcolor: yellow;">cellpadding=5, <b>cellspacing=0</b></td> <br /> <table style="backgroundcolor: blue;" cellpadding="0" cellspacing="0"> <td style="backgroundcolor: yellow;"><b>cellpadding=0</b>, <b>cellspacing=0</b></td> Rysunek Efekty uzyskane dla różnych kombinacji wartości atrybutów cellspacing i cellpadding Atrybuty cellspacing i cellpadding określają szerokości marginesów wspólnie dla wszystkich komórek tabeli, ale w razie potrzeby możesz też sterować szerokością marginesów wewnętrznych pojedynczych komórek. Służy do tego znany Ci już atrybut stylu padding. Niestety, szerokości marginesów zewnętrznych nie zmienisz pozostaje Ci usuwanie ich na poziomie globalnym za pomocą atrybutu cellspacing="0" lub atrybutu stylu bordercollapse: 12 / 23
13 collapse; (rysunek 6.11): <table style="backgroundcolor: blue;" cellpadding="5" cellspacing="5"> <td style="backgroundcolor: yellow;">normalnie</td> <br /> <table style="backgroundcolor: blue;" cellpadding="5" cellspacing="5"> <td style="backgroundcolor: yellow; padding: ;">padding = ;</td> <br /> <table style="backgroundcolor: blue;" cellpadding="5" cellspacing="5"> <td style="backgroundcolor: yellow; margin: ;">margin = ;</td> Rysunek Wpływ atrybutów stylu margin i padding na marginesy komórek tabeli Rozbudowywanie tabeli Wstawienie nowego wiersza tabeli jest operacją banalną wystarczy w odpowiednim miejscu kodu wstawić nowy element i uzupełnić go odpowiednią liczbą elementów <td> lub <th>. Musisz jedynie pamiętać, by w nowo wstawianym wierszu tabeli liczba komórek była identyczna z liczbą komórek znajdujących się w pozostałych wierszach. 13 / 23
14 Niestety, struktura kodu tabeli w języku XHTML tabela opisana jest wiersz po wierszu, zaś każdy wiersz zawiera identyczną liczbę komórek powoduje, że rozszerzenie tabeli o dodatkową kolumnę jest znacznie bardziej skomplikowane i pracochłonne. Wstawienie nowej kolumny polega na dołożeniu nowych elementów <td> lub <th> do każdego istniejącego wiersza tabeli. Jeśli po rozbudowaniu kodu tabeli o nowy wiersz lub kolumnę tabela dosłownie rozpada się, mieszając zawartość komórek lub kończąc się przedwcześnie, na pewno popełniłeś jakiś błąd w kodzie. W takim przypadku jeszcze raz sprawdź, czy zamknąłeś we właściwej kolejności wszystkie elementy języka XHTML składające się na kod tabeli oraz czy wszystkie wiersze tabeli zawierają tyle samo komórek (czyli elementów <td> oraz <th>). Scalanie komórek tabeli Jeśli tworzyłeś kiedyś za pomocą edytora tekstów lub arkusza kalkulacyjnego tabele o skomplikowanym układzie, zetknąłeś się pewnie z funkcją scalania komórek tabeli, umożliwiającą utworzenie wspólnego nagłówka obejmującego swoim zasięgiem kilka wierszy lub kolumn tabeli. Scalanie komórek tabeli jest również dostępne w języku XHTML; można wręcz powiedzieć, że jego rola jest znacznie większa, gdyż tabele umieszczane na stronie WWW służą nie tylko tabelaryzowaniu danych, ale również tworzeniu układu strony oraz rozmieszczaniu jej elementów takich jak fragmenty tekstu czy osadzone na stronie obrazy. Niestety, tworzenie kodu XHTML odpowiedzialnego za układ tabeli zawierającej scalone komórki jest dość trudne. Podstawowa trudność przy tworzeniu kodu scalonych komórek polega na tym, że scalanie wymaga złamania zasady obecności takiej samej liczby komórek w każdym wierszu tabeli. Dwie scalone ze sobą komórki opisywane będą w kodzie przez tylko jeden element <td>, co znacznie utrudnia weryfikację poprawności kodu tabeli. Scalanie komórek tabeli w poziomie Scalanie kilku leżących obok siebie komórek tabeli w poziomie jest względnie łatwe należy tylko usunąć zbędne elementy <th> i <td>, zaś kod elementu tworzącego dużą, scaloną komórkę uzupełnić atrybutem colspan informującym, jako ile komórek ma być traktowana scalona komórka. Na przykład jeżeli chcesz scalić ze sobą trzy komórki: <td>...</td> <td>...</td> <td>...</td> wynikowy kod będzie miał następującą postać: <td colspan="3">...</td> ponieważ ten jeden element <td> ma być traktowany jako trzy komórki. Oto przykład, w którym w drugiej z dwóch identycznych tabel trzy komórki w środkowym wierszu zastąpiłem jedną scaloną, rozciągniętą na powierzchni trzech (rysunek 6.12): <table border="1"> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> 14 / 23
15 <td>31</td> <td>32</td> <td>33</td> <td>34</td> <br /> <table border="1"> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>21</td> <td colspan="3">scalona</td> <td>31</td> <td>32</td> <td>33</td> <td>34</td> 15 / 23
16 Rysunek W dolnej tabeli trzy elementy <td> (odpowiadające trzem kolumnom tabeli) zostały zastąpione jednym, tworzą Scalanie komórek w pionie Scalanie dwóch leżących nad sobą, czyli w pionie, komórek tabeli wymaga rozszerzenia o atrybut rowspan elementu <td> leżącego w najwyższym wierszu oraz usunięcia elementów <td> leżących w wierszach poniżej. Metoda jest zatem identyczna jak w przypadku scalania komórek w poziomie, lecz wykonanie trudniejsze, gdyż modyfikacja kodu będzie obejmowała wiele wierszy tabeli, a więc łatwiej o omyłkę. Oto przykład, w którym w drugiej z dwóch identycznych tabel dwie komórki w środkowej kolumnie zastąpiłem jedną scaloną, rozciągniętą na powierzchni dwóch (rysunek 6.13): <table border="1"> <td>11</td> <td>12</td> <td>13</td> <td>21</td> <td>22</td> <td>23</td> <td>31</td> <td>32</td> <td>33</td> <br /> <table border="1"> 16 / 23
17 <td>11</td> <td>12</td> <td>13</td> <td>21</td> <td rowspan="2">22</td> <td>23</td> <td>31</td> <td>33</td> Rysunek W dolnej tabeli dwa elementy <td> zostały zastąpione jednym, tworzącym komórkę rozciągniętą na dwa wiers Dzielenie scalonej komórki tabeli Aby anulować operację scalenia komórek tabeli, należy wykonać dwie operacje: usunąć atrybut rowspan lub colspan z elementu <td> odpowiadającego za scaloną komórkę (zamienić ją z 17 / 23
18 powrotem w najzwyklejszą komórkę tabeli), odtworzyć usunięte w czasie scalania elementy <td>, tak aby przywrócić odpowiednią liczbę elementów w każdym wierszu (elemencie ) tabeli. Określenie położenia zawartości komórki tabeli Tekst zawarty w komórce tabeli może być wyrównywany w dwojaki sposób: w poziomie do lewego lub prawego marginesu, do obu marginesów lub wycentrowany, w pionie do górnego lub dolnego marginesu albo wycentrowany. Szczególnie istotna jest możliwość definiowania wyrównywania tekstu w pionie, gdyż przeglądarki WWW najczęściej domyślnie centrują zawartość komórki, co powoduje nieelegancki wygląd tabel zawierających w komórkach na zmianę długie i krótkie fragmenty tekstu (rysunek 6.14). Rysunek Skutek ignorowania kwestii wyrównywania zawartości komórek tabeli w pionie Do wyrównywania zawartości komórki czyli elementu <td> lub <th> służy znany Ci już dobrze atrybut stylu textalign, który może przyjmować następujące wartości: left wyrównanie do lewego marginesu, right wyrównanie do prawego marginesu, 18 / 23
19 center wyśrodkowanie, justify wyrównanie do obu marginesów (justowanie). Z kolei za wyrównanie zawartości komórki w pionie odpowiada atrybut stylu verticalalign, któremu można przypisać jedną z następujących wartości: top wyrównanie do górnego marginesu, bottom wyrównanie do dolnego marginesu, middle wyśrodkowanie. Oto przykład tabeli, w której użyłem prawie wszystkich (z wyjątkiem justowania) możliwości wyrównania zawartości (rysunek 6.15): <table cellpadding="3" cellspacing="0" border="1" style="width: 100%;"> <tr style="height: 1.5cm;"> <td style="width: 33%; textalign: left; verticalalign: top;">lewo, góra</td> <td style="width: 33%; textalign: center; verticalalign: top;">środek, góra</td> <td style="width: 33%; textalign: right; verticalalign: top;">prawo, góra</td> <tr style="height: 1.5cm;"> <td style="textalign: left; verticalalign: middle;">lewo, środek</td> <td style="textalign: center; verticalalign: middle;">środek, środek</td> <td style="textalign: right; verticalalign: middle;">prawo, środek</td> <tr style="height: 1.5cm;"> <td style="textalign: left; verticalalign: bottom;">lewo, dół</td> <td style="textalign: center; verticalalign: bottom;">środek, dół</td> <td style="textalign: right; verticalalign: bottom;">prawo, dół</td> 19 / 23
20 Rysunek Dziewięć najważniejszych kombinacji atrybutów stylu odpowiedzialnych za wyrównywanie zawartości komóre W powyższym przykładzie nadałem elementom atrybut stylu height, aby ręcznie określić wysokość wierszy tekstu, co podkreśliło możliwość wyrównywania zawartości komórek tabeli w pionie. W praktyce staraj się nigdy nie wykorzystywać możliwości sterowania wysokością wierszy tabeli: tylko automatyczny dobór umożliwi wyświetlanie zawsze pełnej zawartości wszystkich komórek tabeli. Aby uczynić domyślnym wyrównywanie zawartości do górnej krawędzi komórek, w obszarze definicji stylu strony WWW umieść następującą definicję: td { verticalalign: top; } Tabela tworząca układ strony Podstawowym celem tabeli jest przedstawienie zbioru danych w eleganckiej, tabelarycznej postaci. Dostępny w języku XHTML mechanizm tabel jest jednak tak elastyczny, iż umożliwia budowanie za pomocą tabel układu całej strony WWW (dzielenie jej na prostokątne fragmenty odpowiadające szpaltom gazety). W poniższym przykładzie pokażę, w jaki sposób wykorzystać mechanizm tabel do stworzenia prostego układu strony podzielonej na fragmenty (rysunek 6.16). Rysunek Typowy układ graficzny serwisu WWW Tworząc bardziej skomplikowane tabele, możesz wspomagać się takimi właśnie szkicami. Ułatwiają one określenie liczby wymaganych wierszy i kolumn tabeli oraz oznaczenie komórek, które powinny zostać scalone. Przyjrzyj się powyższemu schematowi i postaraj się odgadnąć liczbę potrzebnych wierszy i kolumn tabeli. Jeden 20 / 23
21 wiersz przypadnie na nagłówek, drugi na datę ostatniej aktualizacji, trzeci na menu i treść artykułu, a czwarty na stopkę strony; razem cztery wiersze. Liczba kolumn powinna z kolei wynosić dwa, gdyż środkowa część strony będzie podzielona właśnie na dwie kolumny; pozostałe wiersze będą wykorzystywały komórki scalone, by zamienić dwie kolumny w jedną. Oto gotowy kod strony WWW o podanym schemacie, uzupełniony nawet pewnym szczątkowym formatowaniem. Na rysunku 6.17 przedstawiona została strona WWW powstała na bazie tego kodu: <?xml version="1.0" encoding="utf8"?> <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <title>serwis internetowy</title> <meta httpequiv="contenttype" content="text/html; charset=utf8" /> </head> <body style="margin: 0; padding: 0; fontfamily: 'trebuchet ms';"> <table cellpadding="3" cellspacing="0" style="width: 100%;"> <td colspan="2" style="fontsize: 16pt; fontweight: bold;"> Serwis internetowy </td> <td colspan="2" style="backgroundcolor: blue; color: yellow; textalign: right;"> Ostatnia aktualizacja: </td> <td style="width: 3.5cm; backgroundcolor: blue; color: yellow; textalign: center; verticalalign: top;"> <a href="strona.html" style="color: cyan;">strona główna</a><br /> <a href="druga.html" style="color: cyan;">druga strona</a><br /> 21 / 23
22 <a href="trzecia.html" style="color: cyan;">trzecia strona</a> </td> <td style="verticalalign: top;"> Tutaj zawarty będzie tekst artykułu wyświetlanego na stronie lub lista aktualności. Cała powierzchnia strony jest do Twojej dyspozycji <tt>:)</tt> Zauważ, że nawet mimo że wpisujemy tutaj dużo tekstu, menu zawsze dosunięte jest do górnej krawędzi swojej komórki tabeli to zasługa atrybutu stylu <tt>verticalalign</tt>. </td> <td colspan="2" style="backgroundcolor: blue; color: yellow; fontsize: 10pt;"> Autorem strony jest Radosław Sokół </td> </body> </html> 22 / 23
23 Rysunek Strona WWW podzielona na części funkcjonalne z wykorzystaniem tabel XHTML Podsumowanie stanowią bardzo istotny element języka XHTML. Wbrew pozorom rzadko służą one do przedstawiania w postaci tabelarycznej zestawów danych. Najczęstszym zastosowaniem tabel jest dzielenie strony na obszary (takie jak obszar nagłówka, obszar menu czy obszar treści) wypełnione różnorodnym tłem. Tworząc tabele, pamiętaj o kilku zasadach: kod tabeli wprowadza się zawsze wiersz po wierszu, każdy wiersz tabeli (element ) zawiera kilka komórek (elementy <td> lub <th>), w tabeli niezawierającej scalonych komórek liczba komórek w każdym wierszu musi być identyczna, komórka scalona obejmująca N wierszy lub N kolumn odpowiada N odrębnym elementom <td> lub <th>, zatem tworząc scaloną komórkę, należy usunąć nadmiarowe komórki tabeli wraz z ich zawartością, błędny kod tabeli najczęściej skutkuje efektem rozsypywania się tabeli pojawiają się puste wiersze lub kolumny, komórki nachodzą na siebie lub też tabela urywa się nagle i przekształca w zwykły tekst. 23 / 23
Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.
Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość
Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Tworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
I. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Kaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Wstęp 5 Rozdział 1. Informacje podstawowe 9
Wstęp 5 Rozdział 1. Informacje podstawowe 9 Co to jest internet? 9 Co to jest WWW? 10 Jak komunikują się komputery w internecie? 11 Surfowanie i przeglądarka 12 Jeszcze kilka słów o adresach URL 13 Co
HTML podstawowe polecenia Szkielet dokumentu: Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Deklarowanie tytułu związanej z tabelą
Tabele 1 Deklarowanie tytułu związanej z tabelą Przychody w latach 2007-2010 Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach
Wykład 3 - część I. I. TABELE. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD
Wykład 3 - część I. I. TABELE 1 I. Tabele Struktura tabeli - HTML Najprostsza tabela składa się z elementu oraz komórek pogrupowanych w rzędy . Podstawowa struktura kodu tabeli 3x4 wygląda
Krótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Laboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Krok 1: Stylizowanie plakatu
HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Tabela z komórkami nagłówkowymi (wyróżnionymi)
Tabela z komórkami nagłówkowymi (wyróżnionymi) Nagłówek poziomy ... ... Nagłówek pionowy ... ... Tytuł tabeli tytuł tabeli... gdzie
[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
![[ HTML ] Tabele. 1. Tabela, wiersze i kolumny](/thumbs/70/62541125.jpg "[ HTML ] Tabele. 1. Tabela, wiersze i kolumny")
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
Odsyłacze. Style nagłówkowe
Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami
Ćwiczenie 4 - Tabele
Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć
1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.
Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
Układy witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz
Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,
CSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Języki programowania wysokiego poziomu. HTML cz.2.
Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)
Tworzenie szablonów użytkownika
Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera
www.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Formatowanie komórek
Formatowanie komórek Korzystając z włączonego paska narzędziowego Formatowanie możemy, bez szukania dodatkowych opcji sformatować wartości i tekst wpisany do komórek Zmiana stylu czcionki (pogrubienie,
Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM
Zaznaczanie komórek Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Aby zaznaczyć blok komórek które leżą obok siebie należy trzymając wciśnięty LPM przesunąć kursor rozpoczynając od komórki
Rozdział VI. Tabele i ich możliwości
Rozdział VI Tabele i ich możliwości 3.6. Tabele i ich możliwości W wielu dokumentach zachodzi konieczność przedstawienia danych w formie tabelarycznej. Dlatego też program OO Writer jest wyposażony w
Ćwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
9. TABELE KURS HTML.
9. TABELE Tabele są czymś niezwykle waŝnym dla strony HTML. ChociaŜ początkujący omijają je szerokim łukiem, lepiej się je nauczyć. Ta lekcja będzie większym połączeniem oby dwóch języków kursu niŝ jakiekolwiek
Pierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
KATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
Wstawianie nowej strony
Wstawianie nowej strony W obszernych dokumentach będziemy spotykali się z potrzebą dzielenia dokumentu na części. Czynność tę wykorzystujemy np.. do rozpoczęcia pisania nowego rozdziału na kolejnej stronie.
1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3
DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz
Projektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Zadanie 3. Praca z tabelami
Zadanie 3. Praca z tabelami Niektóre informacje wygodnie jest przedstawiać w tabeli. Pokażemy, w jaki sposób można w dokumentach tworzyć i formatować tabele. Wszystkie funkcje związane z tabelami dostępne
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Sylabus Moduł 2: Przetwarzanie tekstów
Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera
Podstawy pozycjonowania CSS
Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość
Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów
STRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
DOKUMENTÓW W EDYTORACH
2015-10-12 TWORZENIE DOKUMENTÓW W EDYTORACH Microsoft Word Jan Kowalski UAM Tworzenie dokumentów w edytorach Spis treści Struktura a formatowanie... 1 Formatowanie za pomocą stylów... 1 Nagłówki... 2 Rysunki...
1. Przypisy, indeks i spisy.
1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW
Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border
Bezbolesny wstęp do CSS
CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Jeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli
Tabela Aby wstawić tabelę do dokumentu należy wybrać z górnego menu Tabela-->Wstaw-->Tabela W kategorii Rozmiar określamy z ilu kolumn i ilu wierszy ma się składać nasza tabela. Do dokumentu tabelę możemy
Tematy lekcji informatyki klasa 4a luty/marzec 2013
Tematy lekcji informatyki klasa 4a luty/marzec 2013 temat 11. z podręcznika (str. 116-120) Jak uruchomić edytor tekstu MS Word 2007? ćwiczenia 2-5 (str. 117-120); Co to jest przycisk Office? W jaki sposób
Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
CSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Techniki wstawiania tabel
Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać
Model blokowy. Model blokowy w CSS
Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania
Wprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
EDYCJA TEKSTU MS WORDPAD
EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny
Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:
1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera
ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0
ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i
p { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,
Mateusz Bednarczyk, Dawid Chałaj. Microsoft Word Kolumny, tabulatory, tabele i sortowanie
Mateusz Bednarczyk, Dawid Chałaj Microsoft Word Kolumny, tabulatory, tabele i sortowanie 1. Kolumny Office Word umożliwia nam dzielenie tekstu na kolumny. Zaznaczony tekst dzieli się na wskazaną liczbę
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe
Marginesy, dopełnienia i obramowanie
Tematy: Pudełkowy model formatowania elementów Marginesy Dopełnienie Obramowanie Wymiary Zagadnienia marginesów, dopełnienia inaczej zwanego marginesami wewnętrznymi oraz obramowania są ściśle ze sobą
najlepszych trików Excelu
70 najlepszych trików W Excelu 70 najlepszych trików w Excelu Spis treści Formatowanie czytelne i przejrzyste zestawienia...3 Wyświetlanie tylko wartości dodatnich...3 Szybkie dopasowanie szerokości kolumny...3
Podstawowe znaczniki języka HTML.
Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
HTML cd. Ramki, tabelki
HTML cd. Ramki, tabelki Ramki Umożliwiają wyświetlanie kilku niezależnych dokumentów w tym samym oknie w układzie pionowym, poziomym lub mieszanym. Wady: kłopotliwe drukowanie, konieczność zapanowania
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30
MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.
Po wstawieniu tabeli (i zawsze wtedy, gdy w tabeli jest kursor) pojawia się na wstążce nowa grupa zakładek o nazwie Narzędzia tabel.
Tabelę można szybko wstawić do dokumentu, korzystając z przycisku Tabela w zakładce Wstawianie na wstążce. Komputer umożliwia zakreślenie myszką, ile wierszy i kolumn ma mieć tabela. Można też skorzystać
Czcionki. Rodzina czcionki [font-family]
![Czcionki. Rodzina czcionki [font-family]](/thumbs/27/10053051.jpg "Czcionki. Rodzina czcionki [font-family]")
Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana
Układ informacji i powiązań między danymi w deklaracji o wysokości opłaty za gospodarowanie odpadami komunalnymi
Załącznik Nr 2 do uchwały nr XLIX/392/2013 Rady Miasta Marki z dnia 19 grudnia 2013 roku Układ informacji i powiązań między danymi w deklaracji o wysokości opłaty za gospodarowanie odpadami komunalnymi
Znaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
LEGISLATOR. Data dokumentu:17 września 2012 Wersja: 1.3 Autor: Paweł Jankowski
LEGISLATOR Dokument zawiera opis sposobu tworzenia tabel w załącznikach do aktów prawnych Data dokumentu:17 września 2012 Wersja: 1.3 Autor: Paweł Jankowski Zawartość Wprowadzenie... 3 Strukturalizowanie
Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable
W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,
Elementy div i style CSS w praktyce
Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze
Laboratorium 6 Tworzenie bloga w Zend Framework
Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy
Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych
rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz
DODAJEMY TREŚĆ DO STRONY
DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...
Przenoszenie, kopiowanie formuł
Przenoszenie, kopiowanie formuł Jeżeli będziemy kopiowali komórki wypełnione tekstem lub liczbami możemy wykorzystywać tradycyjny sposób kopiowania lub przenoszenia zawartości w inne miejsce. Jednak przy
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna