Gérer les mises en page de tableaux en HTML5 - les nuls

En HTML, les tableaux facilitent la disposition des données, du texte et même des images dans une grille. Les tableaux facilitent la présentation de données numériques (qui apparaissent naturellement sous forme de tableau dans des tableurs et d'autres applications similaires).

Mais les tableaux rendent également facile et pratique de présenter toutes sortes d'informations qui tombent naturellement en rangées et colonnes, et d'optimiser l'espace lors de l'introduction de nombreux termes ou d'autres éléments qui gaspilleraient trop d'espace marges gauche ou droite sur une page.

Si vous regardez les choses dans le bon sens, toute la capacité et la complexité des tables HTML sont construites à partir de trois éléments de base:

• Bordures: Chaque table de base a exactement quatre arêtes un rectangle.

• Cellules: Il s'agit des zones individuelles de données, d'informations, d'images ou autres, à l'intérieur des limites d'une table.

• Étendue de la cellule: Dans la structure à quatre parois d'une table, vous pouvez ajouter ou supprimer des parois de cellule (comme indiqué avec les cellules sur le côté droit du tableau dans la figure). Lorsque vous supprimez des murs de cellules, vous créez une cellule span plusieurs lignes ou colonnes - et c'est exactement ce qui rend les tables si flexibles pour accommoder des arrangements de cellule différents et intéressants.

  

L'espacement des cellules et la largeur des cellules fonctionnent différemment. Lorsque vous parcourez des cellules, vous modifiez l'espace des cellules en combinant ou en fusionnant des cellules. Cette étape supprime les parois cellulaires, pour ainsi dire. Lorsque vous ajustez les dimensions d'une cellule, en utilisant généralement les contrôles de largeur et de hauteur CSS, vous pouvez spécifier l'espace qu'ils occuperont.

Le tableau de la figure montre comment vous pouvez créer une mise en page intéressante simplement en couvrant les cellules dans les lignes du haut et du bas (étiquetées 1 et 7), avec deux cellules de gauche (cellules 2 et 3) cela couvre deux rangées, et trois cellules droites (la cellule 4 s'étend sur deux colonnes, et les cellules 5 et 6 côte à côte).

Laissant de côté les détails sur la façon de contrôler la largeur de la table et les hauteurs et largeurs individuelles, voici à quoi ressemble le code HTML de base:

Croquis du tableau


 1 


 2 
 3 < 4 


 5 


 6 
 7 


 Un examen attentif de ce fichier montre que les chiffres inclus dans chacune des cases de ce tableau, numérotés de 1 à 7, illustrent le tableau. Au fur et à mesure que vous développez vos propres structures de table, vous pouvez adopter une approche similaire afin de pouvoir voir et comprendre exactement ce que vous faites. 

Essayez d'étiqueter les cases individuelles avec des numéros incrémentiels afin de voir comment l'organisation se joue sur une page Web.

Vous n'avez pas besoin de remplir votre table avec du contenu réel ou de vous tromper avec l'approche de dimensionnement que le fichier contient dans ses sections de style CSS.Comptez le nombre total de cellules dans votre tableau, ajoutez-en un à ce nombre, puis multipliez le résultat par quatre em-largeurs pour obtenir la largeur de la table (20em dans l'exemple).

Utilisez 4em comme largeur de cellule dans les informations de style de l'élément de table (), et vous êtes prêt à partir. Si vous maintenez la largeur de la table globale en synchronisation avec le nombre de cellules, vous ne pouvez pas vous tromper! Une fois que vous avez résolu tous les problèmes liés à l'agencement des cellules individuelles, vous pouvez commencer à peaufiner les attributs de style en fonction du contenu de votre cœur pour rendre la table aussi lisible et attrayante que possible. D'abord, cependant, vous voudrez obtenir l'arrangement juste. Après cela, tout le reste est de la fenêtre.