WIK-ICN

Ceci est une ancienne révision du document !

====== HTML : Tableaux ====== ===== Balises table, thead, tfoot, tbody, tr, th, td ===== <graphviz dot 800x0> digraph ATN { rankdir=TB; table[fontsize=8,label="table", shape=rectangle, fixedsize=true, width=.5, height=.15]; thead[fontsize=8,label="thead", shape=rectangle, fixedsize=true, width=.5, height=.15]; tbody[fontsize=8,label="tbody", shape=rectangle, fixedsize=true, width=.5, height=.15]; tfoot[fontsize=8,label="tfoot", shape=rectangle, fixedsize=true, width=.5, height=.15]; tr1[fontsize=8,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15]; th11[fontsize=8,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15]; th12[fontsize=8,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15]; tr2[fontsize=8,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15]; td21[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, height=.15]; td22[fontsize=8,label="td", shape=rectangle, fixedsize=true, width=.3, 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]; 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]; 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]; 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 800x0> digraph ATN { rankdir=TB; table[fontsize=8,label="table", shape=rectangle, fixedsize=true, width=.5, height=.15]; thead[fontsize=8,label="thead", shape=rectangle, fixedsize=true, width=.5, height=.15]; tbody[fontsize=8,label="tbody", shape=rectangle, fixedsize=true, width=.5, height=.15]; tr1[fontsize=8,label="tr", shape=rectangle, fixedsize=true, width=.3, height=.15]; th11[fontsize=8,label="th", shape=rectangle, fixedsize=true, width=.3, height=.15]; th12[fontsize=8,label="th", shape=rectangle, fixedsize=true, width=.3, 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]; 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]; 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]; 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.