Tabele w HTML, cz. 2

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:

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ę:

Tabela z wykorzystaniem frame=”above”:

Tabela z wykorzystaniem frame=”void”:

Tabela z wykorzystaniem frame=”vsides”:

Tabela z wykorzystaniem frame=”hsides”:

Tabela z wykorzystaniem frame=”rhs”:

Tabela z wykorzystaniem frame=”lhs”:

Tabela z wykorzystaniem rules=”rows”:

Tabela z wykorzystaniem rules=”cols”:

Tabela z wykorzystaniem rules=”none”:

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.