Le Html et la création d'un tableau

Entrez les termes que vous recherchez. Envoyer un formulaire de recherche

Cours création d'un tableau HTML n°1 :
la réalisation d'un tableau HTML n'est pas bien compliqué. La création de l'ossature est invariable, cette ossature commence toujours par le tag table <table>qui est le cadre du tableau HTML, suit la balise tbody <tbody>qui représente le corps du tableau HTML, tr <tr>arrive pour indiquer la création d'un rang de cellule(s), cellule représentée par le tag/balise : th <th> ou td <td>, suivant si c'est une cellule titre ou une cellule de données. Toutes ces balises qui ont été ouvertes doivent être à présent refermées : </th> ou </td> puis </tr> car la ligne de cellule est achevée, fermeture du corps de tableau HTML par </tbody> et enfin la fermeture du tableau </table>. 

Définition attribut : éléments propre à une balise, exemple :  cellspacing est  un attribut de table. Les attributs affectent une valeur à ces tags, pixel ou poucentage pour la taille, une ou des caractéristiques, tels que couleur, écartement, décorations etc, grâce à l'attribut style un ajout de CSS à la volée est permis. Exemple : <table style="border: 1px solid rgb(255, 255, 0); width: 200px; " cellspacing="0" cellpadding="0" border="0"><tbody><tr>...

Attention très important : un tableau HTML est fait pour contenir... Lisez la suite sur la page : Structuration et balisage du dossier Optimisation moteur.

Les dimensions d'un tableau sont exprimable en pixels ou en pourcentage, à vous de voir... L'avantage des % est que le tableau HTML s'ajuste à la taille de l'écran du visiteur, mais apparaissent des problèmes d'interprétation suivant si le navigateur est I.E ou Gecko

La création d'un tableau Html. 

Les balises qui composent un tableau HTML: table, tbody, tr,  th, td, tfoot et leurs fermetures ce qui donne :  <table><tbody><tr><th></th></tr></tbody></table> pour un tableau à cellules unique.

Rappel : en HTML une balise ouverte doit-être refermée, sauf : voir liste des balises HTML

Les attributs de tableau, <table> : style, width, height, class, cellpadding, cellspacing, border, rules, bgcolor, summary, dir, lang, align,  id. Il est préférable pour certains de ces attributs de faire la déclaration en CSS.

Tableau des attributs HTML pour la commandes table

caption	Titre du tableau
style="..."	Déclaration à la volée de type CSS (style interne)
width="x"	Largeur déclarée du tableau en pixel ou en pourcentage (% de la fenêtre, style interne)
height="x"	Hauteur déclarée du tableau en pixel ou en pourcentage (% de la fenêtre, style interne)
class="x"	Attribut qui relie le tableau à la feuille de style (CSS)
cellpadding	Espace entre la bordure et  le contenu des cellules
cellspacing	Espace entre les cellules
border	Épaisseur de la bordure (style interne)
rules	Lignes de séparation du tableau
bgcolor	Couleur de fond du tableau
summary	Résumé de tableau pour systèmes vocaux
dir	Directory :  sens de lecture : ltr (left to right) ou rtl (right to left)
lang	Résumé de tableau pour systèmes vocaux
align	Alignement horizontal du tableau, valeur : left, center, right
id	Élément de type bloc

Exemples  tableau HTML à une cellule:

<table style="border: 1px solid rgb(255, 0, 0); text-align: left; width: 50%;" border="0" cellpadding="0" cellspacing="10"> <tbody> <tr> <td style="border: 1px solid rgb(255, 255, 0); width: 100%; vertical-align: middle; height: 200px;">&nbsp;</td> </tr> </tbody> </table>

<table style="border: 1px ridge rgb(255, 255, 0); text-align: left; width: 50%;" border="0" cellpadding="2" cellspacing="10"> <tbody> <tr> <td style="border: 6px outset rgb(255, 0, 0); width: 100%; height: 200px; text-align: left; vertical-align: middle;">&nbsp;</td> </tr> </tbody> </table>

Les attributs de cellules td, th : 

Tableau des attributs HTML pour les commandes td, th et tfoot

style="..."	Déclaration à la volée de type CSS (style interne)
width="x"	Largeur déclarée de la cellule en pixel ou en pourcentage (% de la fenêtre, style interne)
height="x"	Hauteur déclarée de la cellule en pixel ou en pourcentage (% de la fenêtre, style interne)
class="x"	Attribut qui relie la cellule à la feuille de style
scope	Permet d'établir une relation entre th et td (systèmes vocaux)
rowspan	Regroupement de lignes
colspan	Regroupement de colonnes
bgcolor	Couleur de fond de la cellule
headers	Attribut td qui permet aux systèmes vocaux de faire une correspondance avec th
dir	Directory :  sens de lecture : ltr (left to right) ou rtl (right to left)
lang	Résumé de tableau pour systèmes vocaux
align	Alignement horizontal du contenu de la cellule, valeur : left, center, right
id	Élément de type bloc
char	Alignement sur un caractère
charoff	attribut d'excentrage
valign	Alignement verticale du contenu de la cellule, valeur : top, middle, bottom
nowrap	Style interne qui interdit au navigateur le retour à la ligne
title	Résumé de tableau pour systèmes vocaux
axis	Permet à l'ordinateur de reconnaître une cellule et de fournir une réponse à une question posée

		Contact