HTML, CSS, Blogger. Tabele. Omówienie cześć pierwsza - poradnik

Tabele. Omówienie cześć druga - poradnik

1. Tabele. Omówienie cześć pierwsza

Oto TABELA.
Tabela składa się ze znacznika <tr></tr> na osi Y, w którym poziomo doczepione są komórki <td></td> wzdłuż osi X. Tekst umieszczany w komórce jest pomiędzy znacznikami, czyli <td>pkt. 0</td>.

pkt. 0 oś X oś X oś X
oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table border="1"><tbody>
<tr><td>
</td>    <td>
</td>    <td>
</td>    <td>
</td>   </tr>
<tr>    <td>
</td>    <td>
</td>    <td>
</td>    <td>
</td>   </tr>
<tr>    <td>
</td>    <td>
</td>    <td>
</td>    <td>
</td>   </tr>
</tbody></table>
Przykład 1
pkt. 0 oś X oś X oś X
oś Y


oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table border="1" style="border-collapse: collapse; border-color: #ff3333; text-align: center;"><tbody>
<tr><td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>   <td style="paddiing: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
</tbody></table>
Opis: Początek tabeli <table>, koniec tabeli </table>. Początek szkieletu tabeli <tbody> oraz koniec </tbody>. Znak / oznacza koniec. Komórki na osi X <tr> ... </tr>, oraz osi Y <td> ... </td>. Wygląd tabeli określony jest po znaczniku style.

Przykład 2
pkt. 0 oś X oś X oś X
oś Y


oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table border="1"><tbody>
<tr><td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td></tr>
</tbody></table>
Opis: Domyślny wygląd tabeli. Zdefiniowane są tylko wewnętrzne marginesy by tekst nie zlewał się z krawędziami komórek. Znacznik border określa grubość krawędzi, może być zerowy. Wtedy linie są niewidoczne.

Przykład 3
pkt. 0 oś X oś X oś X
oś Y


oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table border="1" style="border-collapse: collapse; border: dashed #ff3333; text-align: center;"><tbody>
<tr><td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>    <td style="padding: 0px 5px 0px 5px;">
</td>   </tr>
</tbody></table>
Opis: Znacznik border określa cechy krawędzi tabeli. W tym przykładzie pierwszy użyty na początku określa grubość obrysu tabeli, natomiast drugi określa wygląd i kolor.

Przykład 4
pkt. 0 oś X oś X oś X
oś Y


oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table cellspacing="7" style="border: dashed #008000; text-align: center;"><tbody>
<tr><td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: dashed #ff3333; padding: 0px 5px 0px 5px;">
</td>   </tr>
</tbody></table>
Opis: Użycie znacznika cellspacing określa dodatkowe odstępy pomiędzy komórkami i obrysem tabeli (krawędziami). Znacznik dashed oznacza przerywaną linię.

Przykład 5
A A A A
B B B B
C C C C
D D D D

(Uwaga!) Konstrukcja czystej tabeli:
<table border="12" cellspacing="7" style="border-color: #008000; text-align: center;"><tbody>
<tr><td style="border: dotted #ff3333; padding: 30px 10px 10px 10px;">
</td>    <td style="border: dotted #ff3333; padding: 30px 10px 10px 10px;">
</td>    <td style="border: dotted #ff3333; padding: 30px 10px 10px 10px;">
</td>    <td style="border: dotted #ff3333; padding: 30px 10px 10px 10px;">
</td>   </tr>
<tr>    <td style="border: dotted #ff3333; padding:  10px 30px 10px 10px;">
</td>    <td style="border: dotted #ff3333; padding: 10px 30px 10px 10px;">
</td>    <td style="border: dotted #ff3333; padding:  10px 30px 10px 10px;">
</td>    <td style="border: dotted #ff3333; padding:  10px 30px 10px 10px;">
</td>   </tr>
<tr>    <td style="border: dotted #ff3333; padding:  10px 10px 30px 10px;">
</td>    <td style="border: dotted #ff3333; padding: 10px 10px 30px 10px;">
</td>    <td style="border: dotted #ff3333; padding:  10px 10px 30px 10px;">
</td>    <td style="border: dotted #ff3333; padding:  10px 10px 30px 10px;;">
</td>   </tr>
<tr>    <td style="border: dotted #ff3333; padding: 10px 10px 10px 30px;">
</td>    <td style="border: dotted #ff3333; padding: 10px 10px 10px 30px;">
</td>    <td style="border: dotted #ff3333; padding:  10px 10px 10px 30px;">
</td>    <td style="border: dotted #ff3333; padding:  10px 10px 10px 30px;">
</td>   </tr>
</tbody></table>
Opis: Znacznik dotted oznacza kropkowaną linię.Natomiast padding definiuje wewnętrzne marginesy, w dokładnie takiej kolejności górny, prawy, dolny i lewy. Ponieważ krawędzie mają różny wygląd, to pierwsze border html wizualnie wpływa tylko na obrys, a nie całą tabelę. Lepiej jest zapisywać wygląd w style. Czyli border: 12px #008000, nie określony wzór przyjmuje domyślny wygląd stylu.

Przykład 6
pkt. 0 oś X oś X oś X
oś Y


oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table border="12" cellspacing="0" style="border-color: #008000; text-align: center;"><tbody>
<tr><td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;;">
</td>   </tr>
<tr>    <td style="border: solid #ff3333; padding: 0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
</tbody></table>
Opis: Zerowa wartość cellspacing nie powoduje zniknięcia odstępów, są one teraz równe wielkości pozostałych krawędzi. Ponieważ w tym przykładzie krawędzie nie nakładają się na siebie. Nieokreślona grubość obrysu komórek przyjmuje domyślną wartość dla wzoru style.

Przykład 7
pkt. 0 oś X oś X oś X
oś Y


oś Y


oś Y



(Uwaga!) Konstrukcja czystej tabeli:
<table border="12" style="border-collapse: collapse; border-color: #008000; text-align: center;"><tbody>
<tr><td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
<tr>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>    <td style="border: solid #ff3333; padding:  0px 5px 0px 5px;">
</td>   </tr>
</tbody></table>
Opis: Znacznik border-collapse opisuje zachowanie krawedzi (obrysem), natomiast collapse definuje, że mają się ze sobą łączyć, czyli border-collapse: collapse.

Przykład 8
ridge dotted double
inset groove dotted
dashed outset ridge

(Uwaga!) Konstrukcja czystej tabeli:
 <table cellpadding="10" cellspacing="10" style="border: 10px solid #008000; text-align: center;"><tbody>
<tr><td style="border: 10px ridge #ff3333;">
</td>    <td style="border: 10px dotted #808080;">
</td>    <td style="border: 10px double  #ff3333;">
</td>   </tr>
<tr>    <td style="border: 10px inset #008080;">
</td>    <td style="border: 10px groove #ff3333;">
</td>    <td style="border: 10px dotted #808080;">
</td>   </tr>
<tr>    <td style="border: 10px dashed #ff3333;">
</td>    <td style="border: 10px outset #008080;">
</td>    <td style="border: 10px ridge #ff3333;">
</td> </tr>
</tbody></table>
Opis: W tym przykładzie cellspacing ustala identyczne marginesy (górny, prawy itd.) dla każdej komórki w tabeli. Wygląd tabli zanotowany jest w style. Zapisywanie warotści border= i bordercolor= przed style przypisuje tylko domyślny wygląd dla tabeli Tutaj w style określone jest po kolei grubość, wzór i kolor.

Może Ciebie zainteresować

Arena Albionu - gra online - poradnik

Link do gry -  Arena Albionu - gra MMORPG rozgrywana online w realiach średniowiecza Arena Albionu  - poradnik damior wersja 2.2b2 UWAGA! Arena Albionu nie jest grą łatwą. Jest skomplikowana i bardzo trudna dla nowicjuszy. Jednakże gracze są w większości dojrzali. Nie uświadczymy tu zbytnio tz. "gim bazy", która jest blokowana przez moderatorów gry.  Poza tym społeczność jest dość hermetyczna i awantury też się zdążają ;) Spis treści: Strategia - jak grać by przetrwać 1. Początek 2. Stolnik i dalej 3. Murgrabia 4. PŁATNOŚCI! FAQ 1. Gdzie przechować talary?  2. Turbo sprzęt? 3. Jak naprawiać statki?  4. Problemy z wysyłaniem wiadomości pod mapką? 5. Nie wykonam zadania, co wtedy? 6. Szybsze wydobywanie surowców? Ekonomia 1. Ceny Mechanika 1. Poziomy i statystyki 2. Produkcja sezamków STRATEGIA - jak grać by przetrwać Dowiesz się jak zarabiać, piąć się w górę i jak działa system.  P...
Czytaj dalej »

Realm Grinder, gra IDLE poradnik.

Realm Grinder  - poradnik  damior wersja 1a *** Zaczynamy przygodę Dylematy nowicjusza. 1. Wybór serwera Są trzy rodzaje serwerów: w  PvP - czyli walki między graczami są wszędzie dozwolone. Normal - spokojne grindownie, PvP możliwe tylko po udzieleniu zgody na pojedynki. RP - czyli serwery gdzie odgrywa się soją postać, a nie tylko bije stwory i graczy. 2. Umiejętności Specjalna zdolność rasowa po odblokowaniu wszystkich trzech poziomów ulepszeń. Raz odblokowana może być wykupywana w każdej frakcji. Ceny poziomów ulepszeń frakcji dla wszystkich nacji są identyczne, tylko waluta jest inna 1 lvl 20 Faction Coins 2 lvl 100 Faction Coins 3 lvl 500 Faction Coins NEUTRAL Zaklęcia: Tax Collection 200 mana Natychmiastowo dostajesz złoto warte urobku z 30 sekund z budynków i asystentów Call to Arms 400 mana Zwiększa produkcję wszystkich budynków w oparciu o liczbę wszystkich posiadanych budynków na 20s EVIL Evil p...
Czytaj dalej »

World of Warcraft - gra MMO - poradnik

World of Warcraft - poradnik damior wersja 1d World of Warcraft jest darmowy do 20 poziomu . Po osiągnięciu tego poziomu, możemy dalej grać, ale nasza postać już nie awansuje i nie przybywa jej doświadczenia. Poza tym gracz ma inne ograniczenia, jak maksymalny limit złota 10g, oraz brak dostępu do jakieś tam części rozszerzonej wersji, np. do budowania własnego garnizonu. Mimo to możemy cieszyć się najnowszymi patchami i dodatkami, tylko oprócz najnowszego rozszerzenia w danym momencie. Szczegółowe informacje tutaj . Jeśli kupimy podstawkę, to nasze konto nie przepada i możemy dalej grać naszymi bohaterami, z tym że mogą piąć się w górę z doświadczaniem itd, bo wcześniejsze limity już przestają nas obowiązywać. Spis treści: Zaczynamy przygodę 1. Wybór serwera 2. Wybór rasy i klasy 3. Mistrzem być, konfigurowanie klienta. Czy warto? 4. Ustawienia dla mistrza 5. Key bindings, czyli kocie ruchy tancerza śmieci Addons i Macros 1. WoW addons, o co chodzi i jak inst...
Czytaj dalej »