L'avantage et les inconvénients des tableaux HTML

Les premières versions du HTML n'offraient pas beaucoup de possibilités pour agrémenter ses pages web. Le style était très sobre, car le CSS n'était pas encore populaire. Par ailleurs, le HTML était conçu pour afficher et partager des données entre des universités et des centres de recherche et l'esthétique n'était pas la priorité. Pour afficher correctement les données, le HTML possède la balise table qui permet de créer des tableaux. Cette balise contient deux attributs qui sont TR et TD pour les lignes et les colonnes. Avec ces trois éléments, on peut créer un tableau avec un minimum de code tel que l'exemple suivant :

Créer son site
Référencer son site

Cet exemple affiche une ligne et une colonne, l'attribut TR permet de créer une ligne et la balise TD permet de créer la colonne dans cette ligne. On peut mettre autant de lignes et de colonnes qu'on veut, mais il faut faire attention à la structure. En effet, le code du tableau HTML n'est pas convivial et il est fréquent de mélanger le code et d'obtenir un résultat indésirable. Une chose concernant les tableaux est qu'ils peuvent consommer de la bande passante parce que le navigateur doit interpréter le code et afficher son contenu. C'est pourquoi, on le déconseille sur la mise en forme globale et d'utiliser des conteneurs DIV à la place.

Améliorer l'aspect des tableaux


Les tableaux HTML peuvent également avoir une section d'en-tête symbolisée par l'attribut TH. Cet en-tête fonctionne comme un titre à la fois pour le visiteur et le moteur de recherche. Cela permet d'identifier rapidement le rôle du tableau, notamment si vous utilisez plusieurs tableaux dans la même page. La balise « Table » peut aussi être améliorée avec des bordures, une largeur fixe et un alignement comme dans le code suivant :


Cet exemple va créer un tableau avec une largeur de 350 pixels, une bordure de 1 pixel et il sera aligné à la gauche par rapport au texte. Cela signifie qu'il sera entouré par le texte. Sans l'attribut de l'alignement, le tableau utilise un alignement linéaire. Cet exemple est fréquemment utilisé pour créer des tables de matières dans une page et on peut supprimer la bordure avec border=0 pour bénéficier de la mise en page du tableau tout en restant invisible. Mais on peut également ajouter des styles CSS aux tableaux et on peut le faire de 2 manières. La première est de créer des styles globaux pour tous les tableaux. Ainsi, vous créez un style CSS tel que :

table {

background:#000;
width:250px;

}


Ce code va définir une couleur d'arrière-plan noir pour tous les tableaux de votre site en lui donnant une largeur de 250 pixels. Cette technique peut fonctionner si vous utilisez rarement les tableaux. Mais elle ne fonctionne pas si vous utilisez des tableaux pour différents résultats tels qu'un menu, le contenu principal, l'affichage dynamique des données, etc. De ce fait, une meilleure alternative est d'utiliser le CSS avec les sélecteurs. Pour utiliser le CSS avec un tableau, on doit l'identifier par un ID ou une classe, ainsi le code suivant :
Va créer 2 tableaux avec deux styles différents et on pourra les personnaliser séparément. Mais on a déjà mentionné le fait que le tableau HTML a été supplanté par le conteneur DIV qui est plus souple et plus facile à configurer. Mais on peut utiliser les tableaux pour des données et on vous donne quelques exemples d'utilisations.

Des exemples pour utiliser un tableau HTML


Le premier exemple est une table des matières. Les lignes et les colonnes seront parfaites pour créer les différents chapitres de l'article. La table des matières est souvent négligée, mais elle offre une grande facilité aux visiteurs. Une astuce est de rendre la bordure invisible pour un meilleur effet. Et si on l'aligne à gauche ou à droite par rapport au texte, on aura un aspect professionnel. Le second est polyvalent et permet d'afficher une grande quantité de données. Par exemple, un site internet d'un restaurant pourrait utiliser un tableau pour ses menus. Chaque ligne représenterait un plat et la colonne afficherait le prix. Avec le CSS, on peut décorer ce tableau afin d'avoir un effet d'ardoise comme dans les vrais restaurants. On peut identifier un tableau, mais aussi chaque ligne et colonne et donc, les possibilités du design sont infinies.