Balises de tableau HTML TH et TD

Les tables ont depuis longtemps mauvaise réputation création de sites web. Il y a de nombreuses années, les tableaux HTML étaient utilisés pour la mise en page, ce qui n'était évidemment pas ce à quoi ils étaient destinés. Au fur et à mesure que CSS est devenu un usage populaire pour les mises en page de sites Web, l'idée que "les tableaux sont mauvais" s'est imposé. Malheureusement, beaucoup de gens ont mal compris que cela signifiait que les tableaux HTML sont tous mauvais, tout le temps. Ce n'est pas du tout le cas. La réalité est que les tableaux HTML sont mauvais lorsqu'ils sont utilisés à autre chose que leur véritable objectif, qui est d'afficher des données tabulaires (tableurs, calendriers, etc.). Si vous construisez un site Web et avez une page avec ce type de données tabulaires, vous ne devriez pas hésiter à utiliser un tableau HTML sur ta page.

Qu'est-ce que et Fais?

le

 La balise, ou balise "table data", crée des cellules de tableau dans une ligne de tableau dans un tableau HTML. Il s'agit de la balise HTML qui contient du texte et des images. Fondamentalement, c'est la balise de cheval de bataille de votre table. Les balises contiendront le contenu du tableau HTML.

le

 balise, ou "en-tête de tableau", est similaire à la  De plusieurs façons. Il peut contenir le même type d'informations (bien que vous ne mettriez pas une image dans un ), mais il définit cette cellule spécifique comme un en-tête de tableau.

La plupart des navigateurs Web modifient le poids de la police en gras et centrent le contenu dans une cellule. Bien sûr, vous pouvez utiliser Styles CSS pour que ces en-têtes de tableau, ainsi que le contenu de vos balises, ressemblent à ce que vous souhaitez qu'ils apparaissent sur la page Web rendue.

Quand devriez-vous utiliser Plutôt que ?

le

La balise doit être utilisée lorsque vous souhaitez désigner le contenu de la cellule comme en-tête pour cette colonne ou cette ligne. Les cellules d'en-tête du tableau se trouvent généralement en haut du tableau ou sur le côté - essentiellement, les en-têtes en haut des colonnes ou les en-têtes à l'extrême gauche ou au début d'une ligne. Ces en-têtes sont utilisés pour définir le contenu en dessous ou à côté d'eux, ce qui rend le tableau et son contenu beaucoup plus faciles à réviser et à traiter rapidement.

Ne pas utiliser pour styliser vos cellules. Étant donné que les navigateurs ont tendance à afficher les cellules d'en-tête de tableau différemment, certains concepteurs de sites Web paresseux peuvent essayer de tirer parti de cela et d'utiliser la balise lorsqu'ils souhaitent que le contenu soit en gras et centré. C'est mauvais pour plusieurs raisons:

1. Vous ne pouvez pas vous fier aux navigateurs Web qui affichent toujours le contenu de cette façon. Les futurs navigateurs pourraient changer la couleur par défaut ou n'apporter aucune modification visuelle à  contenu. Vous ne devez jamais vous fier uniquement aux styles de navigateur par défaut et ne devez jamais utiliser un élément HTML en raison de son "apparence" par défaut.
2. C'est sémantiquement incorrect. Les agents utilisateurs qui lisent le texte peuvent ajouter une mise en forme audible telle que « en-tête de ligne: votre texte » pour indiquer qu'il est dans un cellule. De plus, certaines applications Web impriment les en-têtes de tableau en haut de chaque page, ce qui entraîner des problèmes si la cellule n'est pas réellement un en-tête mais est plutôt utilisée pour des raisons stylistiques seul. En fin de compte, l'utilisation de balises de cette manière peut entraîner des problèmes d'accessibilité pour de nombreux utilisateurs, en particulier ceux qui utilisent des appareils assistés pour accéder au contenu de votre site.
3. Tu devrais utiliser CSS pour définir à quoi ressemblent les cellules. La séparation de style (CSS) et structure (HTML) est une pratique exemplaire dans la conception de sites Web depuis de nombreuses années. Encore une fois, utilisez a parce que le contenu de cette cellule est un en-tête, pas parce que vous aimez la façon dont le navigateur est susceptible de rendre ce contenu par défaut.