Wikilivres

« Le langage HTML/Tableaux » : différence entre les versions

Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
→‎Attributs de mise en forme : Avertissement, utiliser CSS
m Amélioration du cours : syntaxe.
Ligne 17 :
 
; Exemple élémentaire
<syntaxhighlight lang="html">
{{rouge|&lt;table}} border="1" {{rouge|&gt;}}
<table> border="1">
{{vert|&lt;<caption&gt;}}>Table simple{{vert|&lt;</caption&gt;}}>
{{vert|&lt;<tr&gt;}}> {{bleu|&lt;<!--}} ligne 1 {{bleu|--&gt;}}>
{{bleu|&lt;<th&gt;}}> a1 {{bleu|&lt;</th&gt;}}> {{bleu|&lt;<!--}} case 1 {{bleu|--&gt;}}>
{{bleu|&lt;<th&gt;}}> a2 {{bleu|&lt;</th&gt;}}> {{bleu|&lt;<!--}} case 2 {{bleu|--&gt;}}>
{{vert|&lt;</tr&gt;}}>
{{vert|&lt;<tr&gt;}}> {{bleu|&lt;<!--}} ligne 2 {{bleu|--&gt;}}>
{{bleu|&lt;<td&gt;}}> b1 {{bleu|&lt;</td&gt;}}> {{bleu|&lt;<!--}} case 1 {{bleu|--&gt;}}>
{{bleu|&lt;<td&gt;}}> b2 {{bleu|&lt;</td&gt;}}> {{bleu|&lt;<!--}} case 2 {{bleu|--&gt;}}>
{{vert|&lt;</tr&gt;}}>
{{rouge|&lt;</table&gt;}}>
</syntaxhighlight>
: donne
 
Ligne 70 ⟶ 72 :
 
; Exemple
<syntaxhighlight lang="html">
&lt;<table
lang="en"
title="Statistics for 2000"
Ligne 76 ⟶ 79 :
rules="all"
frames="border"
width="30%"&gt;>
&lt;<caption&gt;>Statistics for 2000&lt;</caption&gt;>
…
&lt;</table&gt;>
</syntaxhighlight>
 
Notons que ces attributs de mise en forme peuvent être remplacés par du [[Programmation CSS|CSS]].
Ligne 101 ⟶ 105 :
Si l'on a défini une bordure (attribut <code>border</code> ayant une valeur non nulle), on peut choisir de ne pas séparer les cellules du tableau par des traits, mais uniquement les groupes de lignes ou de colonnes. Pour cela, on indique l'attribut <code>rules="groups"</code> dans la balise d'ouverture <code>table</code> :
 
<syntaxhighlight lang="html">
&lt;<table border="1" rules="groups"&gt;>
…
&lt;</table&gt;>
</syntaxhighlight>
 
=== Lignes ===
Ligne 114 ⟶ 120 :
 
; Exemple
<syntaxhighlight lang="html">
&lt;<table border="1" frame="void" rules="all"&gt;>
&lt;<thead&gt;>
&lt;<tr&gt;>
&lt;<th&gt;> a1 &lt;</th&gt;>
&lt;<th&gt;> a2 &lt;</th&gt;>
&lt;</tr&gt;>
&lt;</thead&gt;>
&lt;<tfoot&gt;>
&lt;<tr&gt;>
&lt;<td&gt;> a1 &lt;</td&gt;>
&lt;<td&gt;> a2 &lt;</td&gt;>
&lt;</tr&gt;>
&lt;</tfoot&gt;>
&lt;<tbody&gt;>
&lt;<tr&gt;>
&lt;<td&gt;> b1 &lt;</td&gt;>
&lt;<td&gt;> b2 &lt;</td&gt;>
&lt;</tr&gt;>
&lt;<tr&gt;>
&lt;<td&gt;> c1 &lt;</td&gt;>
&lt;<td&gt;> c2 &lt;</td&gt;>
&lt;</tr&gt;>
&lt;</tbody&gt;>
&lt;</table&gt;>
</syntaxhighlight>
 
: ce qui donne
{{début cadre|bleu}}
Ligne 167 ⟶ 176 :
 
; Exemple
<syntaxhighlight la,g="html">
&lt;<table border="1" rules="groups"&gt;>
&lt;<colgroup span="2" width="40" align="left" /&gt;>
&lt;<colgroup span="2" width="10" align="center" /&gt;>
&lt;<tr&gt;>
&lt;<th&gt;> a &lt;</th&gt;> &lt;<th&gt;> b &lt;</th&gt;> &lt;<th&gt;> c &lt;</th&gt;> &lt;<th&gt;> d &lt;</th&gt;>
&lt;</tr&gt;>
&lt;<tr&gt;>
&lt;<td&gt;> 1 &lt;</td&gt;> &lt;<td&gt;> 2 &lt;</td&gt;> &lt;<td&gt;> 3 &lt;</td&gt;> &lt;<td&gt;> 4 &lt;</td&gt;>
&lt;</tr&gt;>
&lt;</table&gt;>
</syntaxhighlight>
: donne
{{début cadre|bleu}}
Ligne 206 ⟶ 217 :
 
; Exemple
<syntaxhighlight lang="html">
&lt;<table border="1" rules="groups"&gt;>
&lt;<colgroup align="left"&gt;>
&lt;<col width="20" /&gt;>
&lt;<col width="40" /&gt;>
&lt;</colgroup&gt;>
&lt;<colgroup span="2" align="center" width="10" /&gt;>
&lt;<tr&gt;>
&lt;<th&gt;> a &lt;</th&gt;> &lt;<th&gt;> b &lt;</th&gt;> &lt;<th&gt;> c &lt;</th&gt;> &lt;<th&gt;> d &lt;</th&gt;>
&lt;</tr&gt;>
&lt;<tr&gt;>
&lt;<td&gt;> 1 &lt;</td&gt;> &lt;<td&gt;> 2 &lt;</td&gt;> &lt;<td&gt;> 3 &lt;</td&gt;> &lt;<td&gt;> 4 &lt;</td&gt;>
&lt;</tr&gt;>
&lt;</table&gt;>
</syntaxhighlight>
 
: donne
Ligne 256 ⟶ 269 :
; Exemple
: pour fusionner trois cellules d'une colonne :
<syntaxhighlight lang="html">
<pre><nowiki>
<table>
<tr>
Ligne 267 ⟶ 280 :
</tr>
</table>
</syntaxhighlight>
</nowiki></pre>
: Et voilà le résultat :
{{début cadre|bleu}}
Ligne 280 ⟶ 293 :
----
; Note
: Il ne faut pas confondre <code>&lt;<td colspan=…&gt;></code> avec <code>&lt;<col span=…&gt;></code>. Dans le premier cas, on a une fusion, c'est-à-dire que l'on a une seule et unique cellule ; dans le deuxième cas, on a simplement plusieurs colonnes distinctes qui partagent des attributs communs.
----
 
Ligne 286 ⟶ 299 :
 
; Exemple
<syntaxhighlight lang="html">
<pre><nowiki>
<table>
<tr>
Ligne 310 ⟶ 323 :
</tr>
</table>
</syntaxhighlight>
</nowiki></pre>
: ce qui donne
{{début cadre|bleu}}
Récupérée de « https://fr.wikibooks.org/wiki/Le_langage_HTML/Tableaux »