Jak stworzyć tabele w HTML, czyli znacznik table bez tajemnic

Wokół tabel w HTML narosło wiele mitów. Tabele  obwiniane są niesłusznie za psucie SEO,  podobno są skomplikowane, jest trudność w ich tworzeniu lub nie da się robić ich responsywnie. Przez to wszystko webmasterzy próbują obchodzić rzeczywistość, układając dane za pomocą <div>. Ty tego nie rób! Nie ma nic gorszego niż kombinowanie z układaniem w <div>danych tabelarycznych, bo nie ma lepszego podejścia do przedstawiania danych dwuwymiarowych w HTML niż stworzony do tego znacznik <table>.

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

---

---