Tabele HTML · Technik informatyk egzamin zawodowy

Programowanie / HTML

Tabele HTML

Tabele w HTML pozwalają uporządkować oraz czytelnie zaprezentować dane. Ich struktura jest intuicyjna, a dobrze wykonana tabela zwiększa atrakcyjność wizualną strony oraz poprawia doświadczenie użytkownika.

Podstawowa struktura tabeli w HTML

<table border="1" cellspacing="10" cellpadding="5">
  <caption>Tytuł tabeli</caption>
  <tr>
    <th>Nagłówek 1</th>
    <th>Nagłówek 2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan="2">3</td>
  </tr>
  <tr>
    <td rowspan="2">4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
</table>

 

  • border – określa grubość ramki tabeli. Wartość 0 oznacza brak ramki.

  • cellspacing – ustala odległość pomiędzy komórkami (podawaną w pikselach).

  • cellpadding – ustala wewnętrzny margines komórki (również w pikselach).

  • colspan – pozwala połączyć określoną liczbę komórek poziomo (w kolumnach).

  • rowspan – pozwala połączyć określoną liczbę komórek pionowo (w wierszach).

 

Kiedy stosować tabelę HTML?

Tabele stosujemy, gdy zachodzi konieczność prezentacji danych liczbowych, porównawczych lub zestawień wymagających klarownego ułożenia w wierszach i kolumnach. Są szczególnie użyteczne dla cenników, harmonogramów zajęć, specyfikacji produktów, czy wyników badań.

 

Wskazówki praktyczne

  • Używaj <th> dla nagłówków, by wyróżnić je wizualnie oraz poprawić dostępność.

  • Unikaj tabel do projektowania całego układu strony – używaj ich tylko do danych.

  • Styluj tabele za pomocą CSS, aby były atrakcyjne wizualnie oraz responsywne.

Podobne wpisy