TH och TD HTML-tabellmärken

Bord har länge fått en dålig rap webbdesign. För många år sedan användes HTML-tabeller för layout, vilket naturligtvis inte var vad de var avsedda för. När CSS blev populär för webbplatslayouter, var tanken att "borden är dåliga" tog tag. Tyvärr missförstod många människor detta för att innebära att HTML-tabeller hela tiden är dåliga. Så är inte alls. Verkligheten är att HTML-tabeller är dåliga när de används för något annat än deras verkliga syfte, det vill säga att visa tabelldata (kalkylblad, kalendrar etc.). Om du bygger en webbplats och har en sida med den här typen av tabelldata bör du inte tveka att använda en HTML-tabell på din sida.

Vad gör och Do?

De

 tagg, eller "tabelldata" -tagg, skapar tabellceller i en tabellrad i en HTML-tabell. Detta är HTML-taggen som innehåller text och bilder. I grund och botten är detta arbetshäststaggen på ditt bord. Taggarna innehåller innehållet i HTML-tabellen.

De

 tagg eller "tabellhuvud" liknar  på många sätt. Den kan innehålla samma typ av information (även om du inte skulle lägga en bild i en
instagram viewer
), men den definierar den specifika cellen som en tabellrubrik.

De flesta webbläsare ändrar teckensnittets vikt till fetstil och centrerar innehållet i en cell. Naturligtvis kan du använda CSS-stilar för att få dessa bordsrubriker, såväl som innehållet i dina taggar, att se ut som du vill att de ska se ut på den återgivna webbsidan.

När ska du använda Hellre än ?

De

tagg ska användas när du vill ange innehållet i cellen som en rubrik för den kolumnen eller raden. Tabellhuvudcellerna finns vanligtvis högst upp på tabellen eller längs sidan - i grund och botten rubrikerna högst upp i kolumnerna eller rubrikerna till vänster eller början på en rad. Dessa rubriker används för att definiera vad innehållet nedan eller bredvid dem är, vilket gör tabellen och dess innehåll mycket lättare att granska och bearbeta snabbt.

Använd inte för att utforma dina celler. Eftersom webbläsare tenderar att visa tabellhuvudceller annorlunda kan vissa lata webbdesigners försöka dra nytta av detta och använda taggen när de vill att innehållet ska vara fet och centrerad. Det är dåligt av flera skäl:

  1. Du kan inte lita på att webbläsare alltid visar innehållet på det sättet. Framtida webbläsare kan ändra färg som standard eller göra några visuella ändringar alls till  innehåll. Du bör aldrig förlita dig enbart på standardwebbläsarstilar och bör aldrig använda ett HTML-element på grund av hur det "ser ut" som standard.
  2. Det är semantiskt felaktigt. Användaragenter som läser texten kan lägga till hörbar formatering som "radhuvud: din text" för att ange att den är i en cell. Dessutom skriver vissa webbapplikationer ut tabellrubrikerna överst på varje sida, vilket skulle göra resultera i problem om cellen inte egentligen är en rubrik utan istället används av stilistiska skäl endast. Slutsatsen - att använda taggar på detta sätt kan orsaka tillgänglighetsproblem för många användare, särskilt de som använder assisterade enheter för att komma åt ditt webbplatsinnehåll.
  3. Du borde använda CSS för att definiera hur cellerna ser ut. Separationen av stil (CSS) och struktur (HTML) har varit en bästa praxis inom webbdesign i många år. Återigen, använd a eftersom innehållet i den cellen är en rubrik, inte för att du gillar hur webbläsaren sannolikt återger det innehållet som standard.