WIK-ICN

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== HTML : Tableaux ======

===== Balises table, thead, tfoot, tbody, tr, th, td =====

<graphviz dot 600x0>
digraph ATN {
rankdir=TB;
table[fontsize=10,label="table", shape=rectangle, fixedsize=true, width=.5, height=.15];
thead[fontsize=10,label="thead", shape=rectangle, fixedsize=true, width=.5, height=.15];
tbody[fontsize=10,label="tbody", shape=rectangle, fixedsize=true, width=.5, height=.15];
tfoot[fontsize=10,label="tfoot", shape=rectangle, fixedsize=true, width=.5, height=.15];
tr1[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
th11[fontsize=10,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15];
th12[fontsize=10,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr2[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td21[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td22[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr3[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td31[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td32[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr4[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td41[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td42[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr5[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td51[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td52[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
table -> thead [fontname="Times-Italic", label=""];
table -> tbody [fontname="Times-Italic", label=""];
table -> tfoot [fontname="Times-Italic", label=""];
thead-> tr1[fontname="Times-Italic", label=""];
tfoot-> tr2[fontname="Times-Italic", label=""];
tbody-> tr3[fontname="Times-Italic", label=""];
tbody-> tr4[fontname="Times-Italic", label=""];
tbody-> tr5[fontname="Times-Italic", label=""];
tr1-> th11[fontname="Times-Italic", label=""];
tr1-> th12[fontname="Times-Italic", label=""];
tr2-> td21[fontname="Times-Italic", label=""];
tr2-> td22[fontname="Times-Italic", label=""];
tr3-> td31[fontname="Times-Italic", label=""];
tr3-> td32[fontname="Times-Italic", label=""];
tr4-> td41[fontname="Times-Italic", label=""];
tr4-> td42[fontname="Times-Italic", label=""];
tr5-> td51[fontname="Times-Italic", label=""];
tr5-> td52[fontname="Times-Italic", label=""];
}
</graphviz>

Les balises utiles :
  * **table** : conteneur global d'un tableau.
  * **thead** : conteneur correspondant à l'entête du tableau : pour y écrire généralement la ligne des titres de colonnes.
  * **tbody** : conteneur correspondant au corps du tableau.
  * **tfoot** : conteneur correspondant au pied de page du tableau : pour y écrire le rappel de la ligne des titres de colonnes ou pour y faire une ou plusieurs lignes 'résumant' les colonnes d'un tableau. 
  * **tr** (//table row//) : pour définir une ligne d'un tableau.
  * **th** (//table header cell//) : pour définir une cellule qui est un en-tête pour un groupe de cellules du tableau. 
  * **td** (//table data cell//) : pour définir une cellule du tableau. 

===== Exemples =====

==== Exemple d'un tableau 4x2, avec entête, mais sans pied de tableau. ====

<graphviz dot 600x0>
digraph ATN {
rankdir=TB;
table[fontsize=10,label="table", shape=rectangle, fixedsize=true, width=.5, height=.15];
thead[fontsize=10,label="thead", shape=rectangle, fixedsize=true, width=.5, height=.15];
tbody[fontsize=10,label="tbody", shape=rectangle, fixedsize=true, width=.5, height=.15];
tr1[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
th11[fontsize=10,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15];
th12[fontsize=10,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr3[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td31[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td32[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr4[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td41[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td42[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr5[fontsize=10,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td51[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td52[fontsize=10,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
table -> thead [fontname="Times-Italic", label=""];
table -> tbody [fontname="Times-Italic", label=""];
thead-> tr1[fontname="Times-Italic", label=""];
tbody-> tr3[fontname="Times-Italic", label=""];
tbody-> tr4[fontname="Times-Italic", label=""];
tbody-> tr5[fontname="Times-Italic", label=""];
tr1-> th11[fontname="Times-Italic", label=""];
tr1-> th12[fontname="Times-Italic", label=""];
tr3-> td31[fontname="Times-Italic", label=""];
tr3-> td32[fontname="Times-Italic", label=""];
tr4-> td41[fontname="Times-Italic", label=""];
tr4-> td42[fontname="Times-Italic", label=""];
tr5-> td51[fontname="Times-Italic", label=""];
tr5-> td52[fontname="Times-Italic", label=""];
}
</graphviz>

<html><iframe width="100%" height="370" src="//jsfiddle.net/noordo/984hs9d7/embedded/html,css,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>

[[http://jsfiddle.net/noordo/984hs9d7]]

A noter dans l'exemple ci-dessus, l'utilisation de la propriété css "//border-collapse//" pour obtenir des cellules sans espace entre elles.
==== Exemple d'un tableau 3x3, sans entête, ni pied de tableau. ====

<graphviz dot 800x0>
digraph ATN {
rankdir=TB;
table[fontsize=8,label="table", shape=rectangle, fixedsize=true, width=.5, height=.15];
tbody[fontsize=8,label="tbody", shape=rectangle, fixedsize=true, width=.5, height=.15];
tr3[fontsize=8,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td31[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td32[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td33[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr4[fontsize=8,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td41[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td42[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td43[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
tr5[fontsize=8,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15];
td51[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td52[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
td53[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15];
table -> tbody [fontname="Times-Italic", label=""];
tbody-> tr3[fontname="Times-Italic", label=""];
tbody-> tr4[fontname="Times-Italic", label=""];
tbody-> tr5[fontname="Times-Italic", label=""];
tr3-> td31[fontname="Times-Italic", label=""];
tr3-> td32[fontname="Times-Italic", label=""];
tr3-> td33[fontname="Times-Italic", label=""];
tr4-> td41[fontname="Times-Italic", label=""];
tr4-> td42[fontname="Times-Italic", label=""];
tr4-> td43[fontname="Times-Italic", label=""];
tr5-> td51[fontname="Times-Italic", label=""];
tr5-> td52[fontname="Times-Italic", label=""];
tr5-> td53[fontname="Times-Italic", label=""];
}
</graphviz>

ATTENTION : quand **thead** et **tfoot** ne sont pas utilisés, on peut omettre de mettre la balise **tbody**, mais on pourra constater avec l'inspecteur d'élément qu'elle est ajoutée automatiquement ! Il va être utile de le savoir car alors le parent d'une balise **tr** sera une balise **tbody** ajoutée implicitement.
WIK-ICN

Outils pour utilisateurs

Outils du site

Outils de la page
