Différences

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

--- web:html:tableaux [2023/03/19 19:18] – [Structure] 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 45: / Ligne 45: @@
 ===== Zones =====
-Il est possible de structurer un tableau en ajoutant un header, un body et un footer :
+Il est possible de structurer un tableau en ajoutant un header (**thead**), un body (**tbody**) et un footer (**tfoot**) :
 <sxh html;gutter:false>
@@ Ligne 74: / Ligne 74: @@
 </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>