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
