Table des matières
Dans le passé, des tableaux HTML étaient utilisés pour contrôler la mise en page des sites, afin de maintenir les proportions du contenu, créer des sections, diviser les informations, etc. Actuellement, c'est une mauvaise pratique, en fait avec les nouvelles spécifications de l'article tableau En HTML5, tous les efforts ont été faits pour que cela soit utilisé pour son véritable objectif, qui est d'afficher des données dans des tableaux à 2 dimensions.Élément de tableau
L'élément tableau est le grand conteneur et peut être à l'intérieur de n'importe quel élément qui est un flux, tel que le div. Élément intérieur tableau nous aurons les éléments : légende, colgroup, thead, tbody, tfoot, tr, th Oui td, qui sont nécessaires pour donner la constitution à notre table, de plus la nouvelle norme a rendu les attributs suivants obsolètes au sein de tableau et doivent être utilisés exclusivement par CSS : résumé, aligner, largeur, bgcolor, cellpadding, cellspacing, cadre, règles. La convention CSS pour cet élément sera la suivante :
table {affichage : table; border-collapse : séparer; espacement des bordures : 2px ; border-color : gris ; } élément Tr
Comme nous le savons bien, les tableaux sont composés de deux éléments de base, des lignes et des colonnes, où les lignes représentent chaque enregistrement d'information et les colonnes la structure et le type de l'information, voyons l'élément utilisé pour créer les lignes, cet élément est le tr. Il peut s'agir d'un enfant des éléments suivants : table, tête, pied, corpsComme on peut le voir, il peut s'agir d'un enfant direct d'une table ou d'un enfant des éléments qui sont enfants de la table et qui définissent sa structure. Doit contenir 1 ou plusieurs éléments td ou alors e le cas échéant, certains de ses attributs obsolètes ont également été placés dans la nouvelle norme HTML5, à savoir : aligner, char, charoff, valign, bgcolor. Qui doivent être exploités exclusivement par CSS, ledit CSS a la structure suivante comme convention :
tr {affichage : ligne-table; alignement vertical : hériter; couleur de bordure : hériter;} élément Td
Cet élément définit les colonnes au sein de nos lignes dans le tableau, ce qui nous permet de séparer les informations au sein d'un enregistrement et ainsi de pouvoir le classer selon nos besoins, c'est un enfant de l'élément tr, les attributs valides qu'il peut avoir sont : colspan, rowspan, en-têtes et les attributs obsolètes qui doivent maintenant être traités dans le CSS sont : abbr, axe, aligner, largeur, char, charoff, valign, bgcolor, hauteur, nowrap, portée. La convention CSS pour cet élément est la suivante :
td {affichage : cellule-table; alignement vertical : hériter; }Notre premier tableau
Mettons en pratique ce que nous avons vu jusqu'à présent, nous savons déjà que pour notre table, nous avons besoin de lignes et de colonnes dans notre conteneur ou élément parent, voyons comment nous l'intégrons au code HTML :
Exemple
| Pommes | Vert | Moyen |
| Des oranges | Orange | Grande |
Ce code nous donne la structure d'un tableau à 2 lignes avec 3 colonnes, comme on le voit c'est du texte simple, ce qui nous amène à voir ce résultat :
