Différences

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

--- web:html:tableaux [2023/03/19 18:28] – 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).
@@ Ligne 43: / Ligne 43: @@
 <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>