Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:tableaux [2023/03/19 18:16] – créée jcheron
+++ web:html:tableaux [2023/03/19 21:18] (Version actuelle) – jcheron
@@ Ligne 1: / Ligne 1: @@
-====== HTML - tableaux ======
+====== Tableaux ======
 Les tableaux en HTML permettent de structurer des données tabulaires, et non de disposer du contenu (comme c'était le cas à une époque non flex).
+===== Balises =====
+  * Le tableau est défini par la balise ''table''
+  * Il contient des lignes (ou rangées) ''tr''
+  * qui contiennent des cellules ''td''
+  * Facultativement un en-tête, défini par ''th'' sur la première ligne, en lieu et place des ''td''.
+===== Structure =====
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<table border="1">
+  <tr>
+    <th>&nbsp;</th>
+    <th>Knocky</th>
+    <th>Flor</th>
+    <th>Ella</th>
+    <th>Juan</th>
+  </tr>
+  <tr>
+    <td>Race</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+</table>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-182719.png}}
+<html></div></td></tr></table></html>
+<wrap important>L'attribut border est déprécié et n'est présent ici que pour voir les bordures du tableau sans CSS associé</wrap>
+===== Zones =====
+Il est possible de structurer un tableau en ajoutant un header (**thead**), un body (**tbody**) et un footer (**tfoot**) :
+<sxh html;gutter:false>
+<table>
+    <thead>
+        <tr>
+            <th>Nombre</th>
+            <th>Version texte</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>1</td>
+            <td>Un</td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>Deux</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <td>3</td>
+            <td>Trois</td>
+        </tr>
+    </tfoot>
+</table>
+</sxh>
+===== Fusion de cellules =====
+==== En largeur ====
+L'attribut **colspan** permet de fusionner des cellules en largeur :
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<table border="1" width="100%">
+  <tr>
+    <td>Une cellule</td>
+    <td>Une cellule</td>
+    <td>Une cellule</td>
+  </tr>
+  <tr>
+    <td colspan="2">Une cellule sur deux colonnes</td>
+    <td>Une cellule</td>
+  </tr>
+</table>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-193541.png}}
+<html></div></td></tr></table></html>
+==== En hauteur ====
+L'attribut **rowspan** permet de fusionner des cellules en hauteur :
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<table border="1">
+    <tr>
+        <td>Une cellule</td>
+        <td rowspan="2">Une cellule sur deux lignes</td>
+        <td>Une cellule</td>
+    </tr>
+    <tr>
+        <td>Une cellule</td>
+        <td>Une cellule</td>
+    </tr>
+</table>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-195038.png}}
+<html></div></td></tr></table></html>