Tworzenie stron internetowych w kodzie HTML Cz 5

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tworzenie stron internetowych w kodzie HTML Cz 5"

Karolina Mazurek
8 lat temu
Przeglądów:

1 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia tzw. odcięć, czyli wstawiania do komórek tabeli poszczególnych kawałków pociętego, zwykle większego obrazka. Wewnątrz komórek tabeli nie powinniśmy umieszczać białych znaków wraz ze znacznikiem Poprawnie: <td><img src="..." alt="..." /> Niepoprawnie: <td><img src="..." alt="..." /> Aby to zmienić, naleŝy zdefiniować w kaŝdej komórce osobno rozmiar czcionki. Jednak lepszym rozwiązaniem jest wstawienie w nagłówku dokumentu: <style type="text/css"> /* <![CDATA[ */ td { font-size: wielkośćpx; color: kolor; font-family: rodzaj } /* ]]> */ </style> wielkość Rozmiar tekstu w tabeli podany w pikselach kolor Barwa czcionki rodzaj Wybrany krój czcionki (potrzebne w Netscape 6) Inne zastosowania tabel Prezentacji zbioru uporządkowanych danych: <table border="0" width="100%"> <td align="left">lewa <td align="right">prawa Struktura strony Struktury strony. MoŜna np. w lewej kolumnie umieścić spis treści serwisu, a w prawej - zawartość tekstową strony. Na górze moŝna przeznaczyć miejsce na animowany banner lub/i logo serwisu: 1 z 7

Wewnątrz komórek tabeli nie powinniśmy umieszczać białych znaków wraz ze znacznikiem Poprawnie: <td><img src="..." alt=".

2 <table width="100%" cellspacing="0" cellpadding="10"> <td bgcolor="kolor góra" colspan="2" align="center" valign="middle">tutaj moŝna umieścić logo serwisu <td bgcolor="kolor menu" width="tutaj wpisz szerokość menu (np.: 150)" valign="top"> Tu umieszcza się odsyłacze spisu treści <td bgcolor="kolor strony" valign="top"> Tu wpisuje się treść strony Strona niezaleŝna od rozdzielczości ekranu W powyŝszym kodzie ustalono szerokość tabeli równą 100%, czyli będzie ona zajmowała zawsze całą szerokość okna przeglądarki (minus marginesy) bez względu na rozdzielczość, w jakiej pracuje uŝytkownik. Środkowanie Do uzyskania takiego efektu, lepszym rozwiązaniem od tabel jest uŝycie bloków, np.: <body style="text-align: center; margin: 0; padding: 0"> <div style="width: 770px; margin: 0 auto; text-align: left"> Tu wpisuje się treść strony </div> </body> Rozwiązanie na tabelach <table width="750" align="center" cellspacing="0" cellpadding="10"> <td bgcolor="kolor góra" colspan="2" align="center" valign="middle">tutaj moŝna umieścić logo serwisu <td bgcolor="kolor menu" width="150" valign="top">  <a target="strona" href="home.html">strona główna</a><br /> <a href="mailto:jan_kowalski@example.com">kontakt</a><br>  <td bgcolor="kolor strony" valign="top"><iframe name="strona" src="home.html" width="560" height="440" frameborder="0"></iframe> Ramki Innym ciekawym zastosowaniem tabel jest tworzenie "ramek" z zaokrąglonymi bądź ściętymi rogami. Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie cztery naroŝniki, np.: <table cellpadding="0" cellspacing="0"> <td style="line-height: 1px"><img src="lg.gif" alt="" /><td bgcolor="#426b9c" style="line-height: 1px"><img src="0.gif" alt="" /><td style="line-height: 1px"><img src="pg.gif" alt="" /> <td bgcolor="#426b9c"><img src="0.gif" alt="" /><td bgcolor="#426b9c"> <font color="#c0ffff"><b>tabelka z zaokrąglonymi rogami</b></font> <td bgcolor="#426b9c"><img src="0.gif" alt="" /> <td style="line-height: 1px"><img src="ld.gif" alt="" /><td bgcolor="#426b9c" style="line-height: 1px"><img src="0.gif" alt="" /><td style="line-height: 1px"><img src="pd.gif" alt="" /> 2 z 7

2 Strona niezaleŝna od rozdzielczości ekranu W powyŝszym kodzie ustalono szerokość tabeli równą 100%, czyli będzie ona zajmowała zawsze całą szerokość okna przeglądarki (minus marginesy) bez względu

3 Efekt: Tabelka z zaokrąglonymi rogami 5.2. Obramowanie <table border="x"> Marginesy w komórkach <table border cellpadding="x"> Odstępy między komórkami <table cellspacing="x"> Komórki nagłówkowe 1. Nagłówek poziomy 2. Nagłówek pionowy 3. Nagłówek mieszany <th></th> 3 z 7

Odstępy między komórkami <table cellspacing="x">... 5.

4 5.6. Tytuł tabeli <caption align="ustawienie">tu podaj tytuł</caption> (...) top, bottom, left, righti,center 5.7. Wymiary 1. Wymiary całej tabeli <table width="x" height="y"> Wymiary pojedynczej komórki <td width="x" height="y"> Wyrównanie tabeli <table align="rodzaj">... Left, right, center 5.9. Wyrównanie zawartości tabeli 1. Wyrównanie zawartości całego wiersza <tr align="rodzaj" valign="ustawienie"> Wyrównanie zawartości pojedynczej komórki <td align="rodzaj" valign="ustawienie">... r: left, right, center; u: top, bottom, Middle Kolor tła 1. W całej tabeli 4 z 7

Wyrównanie tabeli <table align="rodzaj">... Left, right, center 5.9. Wyrównanie zawartości tabeli 1.

5 <table bgcolor="kolor"> W jednym wierszu <tr bgcolor="kolor"> W pojedynczej komórce <td bgcolor="kolor"> Tło obrazkowe 1. W całej tabeli <table background="ścieżka dostępu"> W pojedynczej komórce <td background="ścieżka dostępu"> Kolor obramowania <table bordercolor="kolor">... <table bordercolorlight="kolor1">... <table bordercolordark="kolor2">... Kolor - Oznacza kolor, jaki będzie miało całe obramowanie kolor1- Oznacza kolor, jaki będzie miała "oświetlona" część tabeli (lewa oraz górna krawędź obramowania - bordercolorlight="...") kolor2- Oznacza kolor, jaki będzie miała "ocieniona" część tabeli (prawa oraz dolna krawędź obramowania - bordercolordark="...") Blokada zawijania tekstu <td nowrap="nowrap"> Łączenie komórek 1. Poziome łączenie komórek 5 z 7

.. Kolor - Oznacza kolor, jaki będzie miało całe obramowanie kolor1- Oznacza kolor, jaki będzie miała "oświetlona" część tabeli (lewa oraz górna krawędź obramowania - bordercolorlight=".

6 <td colspan="x"> Pionowe łączenie komórek <td rowspan="y"> Łączenie wierszy w grupy <tbody align="rodzaj" valign="ustawienie"> </tbody> Nagłówek i stopka Nagłówek tworzymy, przy uŝyciu: <thead>...</thead>, natomiast stopkę: <tfoot>...</tfoot>: Łączenie kolumn w grupy <colgroup span="x"></colgroup> "></colgroup> Zewnętrzne krawędzie <table border="1" frame="typ"> "void" - usuwa zewnętrzne obramowanie 2. "above" - tylko górna krawędź 3. "below" - tylko dolna krawędź 4. "lhs" - tylko lewa krawędź 5. "rhs" - tylko prawa krawędź 6. "hsides" - tylko poziome krawędzie 7. "vsides" - tylko pionowe krawędzie 8. "box" - wszystkie krawędzie zewnętrzne (domyślnie) Wewnętrzne krawędzie <table border="1" rules="typ"> "none" - usuwa wszystkie wewnętrzne krawędzie 6 z 7

"void" - usuwa zewnętrzne obramowanie 2. "above" - tylko górna krawędź 3. "below" - tylko dolna krawędź 4. "lhs" - tylko lewa krawędź 5. "rhs" - tylko prawa krawędź 6.

7 2. "rows" - tylko poziome krawędzie w środku tabeli 3. "cols" - tylko pionowe krawędzie w środku tabeli 4. "all" - wszystkie krawędzie wewnętrzne (domyślnie) 5. "groups" - wybrane krawędzie wewnętrzne (grupy) ZagnieŜdŜanie tabel <td> 7 z 7

"all" - wszystkie krawędzie wewnętrzne (domyślnie) 5.

Podobne dokumenty

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