Elementy blokowe pomagają nam zapanować nad wyglądem naszej strony, dzięki nim możemy zaprojektować jej wygląd, zaplanować wizualną część strony.

Kiedyś strony tworzone były główne przy pomocy elementu table(tzw. tabelki), nadawał on ściśle określone ramy niestety efektem tego była mała elastyczność naszej strony i utrudnione wprowadzanie poprawek w jej wyglądzie.
Obecnie coraz częściej do budowy layoutu (layout: projekt/układ) stron wykorzystywany jest element div (głównie za sprawą arkuszy styli CSS).

Za i przeciw?
Który ze sposobów zbudowania strony wybierzesz zależy od ciebie ale warto wiedzieć, że szybciej można zrobić stronę opartą o table ale jej późniejsza modyfikacja jest dosyć trudna, za to strona oparta na div jest w początkowej fazie tworzenia dosyć trudna do przygotowania za to późniejsze modyfikacje są bardzo proste.

Nie ma idealnej metody po prostu po nabraniu pewnej wprawy należy samemu zdecydować co jest wygodniejsze ja używam tego co wydaje mi się bardziej przydatne w danym momencie a czasem także łączę elementy table z elementami div w zależności od potrzeb.

table

Element table służy główne do prezentacji danych tabelarycznych, jak w przypadku każdego znacznika mamy otwarcie tabelki: <table> oraz jej zamknięcie </table>.
Tabelka składa się z wierszy oraz kolumn:
otwarcie wiersza: <tr> zamknięcie wiersza: </tr>
otwarcie kolumny: <td> zamknięcie kolumny: </td>

Przykład prostej tabeli 2x2 (dodałem w tabeli cienkie ramki aby było lepiej widać jej kształt):

linia1 komórka 1	linia 1 komórka 2
linia2 komórka 1	linia 2 komórka 2

Kod do wygenerowania powyższej tabelki (bez ramek które są robione na stylach i opisane dokładniej w dalszej części kursu - dział CSS parametr border):

<table>
<tr><td>linia1 komórka 1</td><td>linia 1 komórka 2</td></tr>
<tr><td>linia2 komórka 1</td><td>linia 2 komórka 2</td></tr>
</table>

W pewnych sytuacjach przydatne może okazać się łączenie poszczególnych komórek tabeli, do łączenia w poziomie stosujemy znacznik colspan, przykład połączenia komórek w poziomie:

l1 k1	l1 k2	l1 k3
l2 k1 l2 k2		l2 k3
l3 k1	l3 k2	l3 k3

Kod do wygenerowania powyższej tabelki (bez ramek):

<table>
<tr><td>l1 k1</td><td>l1 k2</td><td>l1 k3</td></tr>
<tr><td colspan='2'>l2 k1 l2 k2</td><td>l2 k3</td></tr>
<tr><td>l3 k1</td><td>l3 k2</td><td>l3 k3</td></tr>
</table>

Obok parametru colspan podajemy ilość komórek do połączenia w tym wypadku 2.

Można także w razie potrzeby połączyć wybrane wiersze wiersze, dokonujemy tego przy pomocy parametru rowspan:

l1 k1	l1 k2 l2 k2 l3 k2	l1 k3
l2 k1		l2 k3
l3 k1		l3 k3

Kod do przykładu:

<table>
<tr><td>l1 k1</td><td rowspan='3'>l1 k2 l2 k2 l3 k2</td><td>l1 k3</td></tr>
<tr><td>l2 k1</td><td>l2 k3</td></tr>
<tr><td>l3 k1</td><td>l3 k3</td></tr>
</table>


Połączone zostały 3 środkowe wiersze.

Dodatkowe uwagi:

• w czasie łączenia wierszy/kolumn zawartość należy także "połączyć"
• można łączyć dowolną (dostępną) liczbę wierszy/kolumn
• rozmiary komórek tabeli automatycznie dopasowują się do zawartości

div

Element div sam w sobie ma mniejsze możliwości konfiguracyjne niż table jego zdecydowana przewaga pojawia się gdy połączymy go z arkuszami styli CSS. Na chwilę obecną krótka informacja o jego zastosowaniu. Jak można się domyślić znacznik div ma swoje otwarcie: <div> oraz zamknięcie </div>.
Treść którą chcemy zgrupować w tym elemencie umieszczamy między jego znacznikami.

Przykład zastosowania elementu div:



Tak jak w przypadku tabelki aby dokładniej pokazać rozmiar obiektu dodałem mu cienką obwódkę. Na chwilę obecną div można potraktować jako jedno komórkową tabelę (co jest oczywiście ogromnym uproszczeniem ale bez arkuszy CSS naprawdę niewiele więcej można z divem zdziałać).

Kod do powyższego przykładu:

<div> jakiś napis<br /> linia druga napisu<br /> </div>

Dodatkowe uwagi:

• div (jeśli w stylach nie zdefiniujemy inaczej) zajmuje w poziomie całą dostępną powierzchnię - nie dopasowuje się do zawartości tak jak komórki obiektu table