Tabele w HTML, cz. 1

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

Dzięki zastosowaniu tabel możemy w łatwy sposób rozmieszczać elementy na stronie. Oprócz tworzenia tabelek, w których umieszczamy informacje, można za pomącą tabeli zrobić szkielet strony.

Na początek opiszę, z jakich znaczników składa się tabela. Znaczniki <table> i <⁄table> są elementami otwierającymi i zamykającymi. Pomiędzy nie wpisujemy <tr> i <⁄tr> są to znaczniki tworzące wiersz w tabeli. I pozostały nam znaczniki komórki, które umieszczamy pomiędzy znacznikami wiersza, są to <td> i <⁄td>.


Zacznijmy od prostej tabeli podzielonej na dwie komórki:

 

<table width="300" height="100" border="1"> <tr> <td> 1 komórka </td> <td> 2 komórka </td> </tr> </table>

 

Wpisując ten kod otrzymamy:

 

1 komórka 2 komórka

 

Atrybuty width i height są odpowiedzialne za szerokość i wysokość tabeli. Wpisywane wartości mogą być w pikselach oraz w procentach wówczas wpisujemy np. "30%". Natomiast atrybut border definiuje nam grubość obramowania, wpisując wartość "0" sprawimy, iż obramowanie będzie niewidoczne.
Teraz wykonamy tabele z wykorzystaniem colspan i rowspan:

 

<table width="300" height="100" border="1"> <tr> <td colspan="2"> 1 komórka </td> </tr> <tr> <td> 2 komórka </td> <td> 3 komórka </td> </tr> </table>

 

Po wisaniu kodu otrzymamy:

 

1 komórka
2 komórka 3 komórka

 

Atrybut colspan służy do łączenia komórek wpisana wartość "2" oznacza, że łączy się ze sobą dwie komórki.
No i jeszcze tabelka z zastosowaniem rowspan, czyli łączenia ze sobą wierszy:

 

<table width="300" height="100" border="1"> <tr> <td rowspan="2"> 1 komórka </td> <td> 2 komórka </td> </tr> <tr> <td> 3 komórka </td> </tr> </table>
1 komórka 2 komórka
3 komórka

 

Są to najprostsze przykłady tabeli są one jednak często stosowane. Można je w dowolny sposób rozbudowywać w zależności od potrzeb. Rodzajów tabel jest jeszcze kilka między innymi zagnieżdżanie tabel oraz nie wyświetlanie poszczególnych części obramowania tabeli. Opiszę je w następnej części.

Ocena 2.43/5 (48.59%) (198 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.