Układ tabelaryczny strony

Słownik kwalifikacji AUD.05 - Realizacja projektów graficznych i multimedialnych

Czym jest układ tabelaryczny strony?

Układ tabelaryczny strony to sposób budowania layoutu witryny za pomocą znaczników tabel HTML, takich jak <table>, <tr> i <td>. Dawniej stosowano go często do rozmieszczania nagłówków, menu, kolumn i stopki.

Dlaczego nie powinno się używać tabel do layoutu?

Tabele w HTML są przeznaczone przede wszystkim do prezentowania danych tabelarycznych, np. cenników, zestawień lub harmonogramów. Używanie ich do projektowania całej strony powoduje problemy:

  • trudne dostosowanie strony do ekranów smartfonów,
  • sztywny układ elementów,
  • większa ilość kodu HTML,
  • trudniejsza edycja i modernizacja strony,
  • gorsza dostępność dla czytników ekranowych,
  • mieszanie struktury dokumentu z wyglądem.

Lepsze rozwiązanie

W nowoczesnych stronach strukturę dokumentu zapisuje się w HTML, a wygląd i rozmieszczenie elementów definiuje się w CSS.

Przykład prostego układu CSS:

<div class="container">
  <header>Nagłówek</header>
  <main>Treść strony</main>
  <footer>Stopka</footer>
</div>
.container {
  max-width: 1200px;
  margin: 0 auto;
}

W kontekście urządzeń mobilnych

Strona oparta na tabelach zwykle źle skaluje się na małych ekranach. Dlatego przy modernizacji witryny należy opracować szablon oparty na elementach blokowych i CSS, co pozwala łatwiej tworzyć układy responsywne.