Tabele w HTML, cz. 2

Autor: Maciej Skrobiński, dodano: 25-07-2003
Kategoria: Programowanie i tworzenie

W poprzedniej części poznaliśmy najprostsze modele tabel. Pozostały nam tabele zagnieżdżone oraz kilka jeszcze innych, którymi zajmiemy się w tej części.

Znaczniki tabel omówiłem w pierwszej części tak, więc przejdziemy od razu do przykładów, bo przecież dzięki nim jest najlepiej zrozumieć dane zagadnienie. Nie znaczy to, że nie powinniśmy znać teorii, ale przysłowie mówi praktyka czyni mistrza.


Oto kod tabeli zagnieżdżonej starajcie się najpierw przeanalizować kod a dopiero potem patrzeć, co dzięki niemu uzyskamy:


<table width="300" height="200" border="1"> <tr> <td> <p>1 komórka</p> </td> <td> <p>2 komórka</p> <table width="100" height="100" border="1"> <tr> <td> <p>tabela</p> </td> </tr> <tr> <td> <p>zagnieżdżona</p> </td> </tr> </table> </td> </tr> <tr> <td> <p>3 komórka</p> </td> <td> <p>4 komórka</p> </td> </tr> </table>


Wpisując ten kod otrzymamy:

 

1 komórka

2 komórka

tabela

zagnieżdżona

3 komórka

4 komórka

 

Z początku kod tej tabeli może wydawać się nieco zawiły, ale to tyko złudzenie. Po krótkim przyjrzeniu się mu wszystko staje się proste i zrozumiałe.


W tabelach jest możliwość stosowania atrybutów frame i rules. Są one odpowiedzialne za zewnętrzne obramowanie oraz wewnętrzne krawędzie. Aby nie pisać za każdym razem kodu tabeli napiszę jeden kod, który będzie wyświetlał tabelki różniące się tylko atrybutem.


<table width="300" height="100" border frame="below"> <tr> <td> <p>1 komórka</p> </td> <td> <p>2 komórka</p> </td> </tr> <tr> <td> <p>3 komórka</p> </td> <td> <p>4 komórka</p> </td> </tr> </table>


Wpisując powyższy kod do edytora otrzymamy taką tabelę:

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem frame="above":

 


1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem frame="void":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem frame="vsides":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem frame="hsides":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem frame="rhs":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem frame="lhs":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem rules="rows":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem rules="cols":

 

1 komórka

2 komórka

3 komórka

4 komórka


Tabela z wykorzystaniem rules="none":

 

1 komórka

2 komórka

3 komórka

4 komórka


Uf trochę tego jest. Tabele można wykorzystywać na wiele sposobów. Wszystko zależy, do jakiego celu mają być stosowane. Opisane tu przykłady, na pewno pomogą przy tworzeniu zagnieżdżonych tabel oraz takich, których poszczególne krawędzie mają być niewidoczne. Tabele można przekształcać do woli wszystko zależy od potrzeby i wyobraźni, jaką dysponuje ich twórca.

Ocena 2.4/5 (47.91%) (182 głosów)

Komentarze:



    Dodaj komentarz:


    Temat:
    Twój nick:
    Komentarz:
     

    Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.