Większość mitów narosła dlatego, że dawniej znacznik <table> był wykorzystywany do robienia layout i już go nie można używać w ten sposób w HTML5. To psuje SEO i nie jest responsywne itd., ale dane dwuwymiarowe można i trzeba pokazywać w znaczniku <table>, a pod SEO tabele HTML pozwalają zdobyć pozycję zerową w SERP-ach Google (Search Engine Results Page).

Z czego składa się tabela HTML?

Najprostsza tabela składa się ze znaczników:

  • <table> - inicjuje budowanie tabeli, to taki odpowiednik okalania list <ol> lub <ul>,
  • <tr> - za pomocą tego znacznika stworzysz wiersz w tabeli,
  • <td> - znacznik ten odpowiada za dodawanie komórek w wierszu <tr>.

Trzeba pamiętać, że tabele w HTML logicznie organizowane są wokół wierszy, w których dodajemy komórki, a nie wokół kolumn. Do kolumn odwołać się możemy np. za pomocą dodatkowych znaczników <colgroup>, o czym opowiadać będziemy w dalszej części artykułu.  Prosta tabela HTML składająca się z równorzędnych wierszy ma postać:

 

Powyższy kod prostej tabeli w formacie HTML simple-table.html oraz same znaczniki txt simple-table.txt

Jak dodać nagłówki do tabeli HTML?

Do tabeli możemy dodać nagłówki opisujące poszczególne kolumny lub wiersze i robimy to za pomocą semantycznego znacznika <th>, który tworzy tak zwane komórki nagłówków. Są to standardowo wyróżnione pogrubieniem komórki, które użytkownik może odróżnić od zawartości. 

Komórki nagłówków dodaje się za pomocą znacznika <th> i zastępuje on po prostu znacznik <td>. 

Poniżej znajdziesz nagłówki przypisane do kolumn. 

Powyższy kod tabeli HTML z nagłówkami th dodanymi do kolumn w formacie HTML th-table.html oraz znaczniki w .txt th-table.txt

Poniżej znajdziesz przykładowy kod prostej tabeli HTML, gdzie nagłówki są przypisane do wierszy. 

Powyższy kod tabeli HTML z nagłówkami th dodanymi do kolumn w formacie HTML th-rows-table.html oraz znaczniki w .txt th-rows-table.txt