Différences

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

--- prog:html [2024/03/14 07:00] – [Images] : ajout de picture root
+++ prog:html [2024/11/03 23:33] (Version actuelle) – [Paragraphes] : oublie de / pour fermer un tag root
@@ Ligne 148: / Ligne 148: @@
     <ul>
       <li>liste non ordonnée imbriquée</li>
-    <ul>
+    </ul>
   </li>
-<ol>
+</ol>
 </code> | <HTML>
 <ol>
@@ Ligne 156: / Ligne 156: @@
     <ul>
       <li>liste non ordonnée imbriquée</li>
-    <ul>
+    </ul>
   </li>
-<ol>
+</ol>
 </HTML> |
@@ Ligne 168: / Ligne 168: @@
   <dd>Description 1</dd>
   <dd>Description 2</dd>
-<dl>
+</dl>
 </code> | <HTML>
 <dl>
@@ Ligne 174: / Ligne 174: @@
   <dd>Description 1</dd>
   <dd>Description 2</dd>
-<dl>
+</dl>
 </HTML> |
@@ Ligne 376: / Ligne 376: @@
 </picture>
 </code>
+[[https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b|Why You Should Use Picture Tag Instead of Img Tag]] {{ :prog:html:why_you_should_use_picture_tag_instead_of_img_tag_by_chameera_dulanga_bits_and_pieces_14_03_2024_06_56_06_.html |Archive du 25/01/2021 le 14/03/2024}}
   * ''<figure>'' et ''<figcaption>'' : ajoute un texte lié à l'image.
@@ Ligne 572: / Ligne 574: @@
 Il existe aussi ''<embed>'' pour faire la même chose c'est l'ancienne syntaxe.
+=====Données=====
+  * ''<table>'' (tableau) avec ''<tr>'' (ligne / row) et ''<td>'' (cellule / data).
+| <code html>
+<table>
+  <tr>
+    <td>Hi, I'm your first cell.</td>
+    <td>I'm your second cell.</td>
+  </tr>
+  <tr>
+    <td>I'm your third cell.</td>
+    <td>I'm your fourth cell.</td>
+  </tr>
+</table>
+</code> | <HTML>
+<table>
+  <tr>
+    <td>Hi, I'm your first cell.</td>
+    <td>I'm your second cell.</td>
+  </tr>
+  <tr>
+    <td>I'm your third cell.</td>
+    <td>I'm your fourth cell.</td>
+  </tr>
+</table>
+</HTML> |
+Les entêtes ''th'' sont des cellules, pas des lignes ou des colonnes.
+Il est aussi possible de fusionner les cellules et colonnes avec ''rowspan'' et ''colspan''.
+| <code html>
+<table>
+  <tr>
+    <th colspan="2">Animals</th>
+  </tr>
+  <tr>
+    <th colspan="2">Hippopotamus</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th colspan="2">Crocodile</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+</code> | <HTML>
+<table>
+  <tr>
+    <th colspan="2">Animals</th>
+  </tr>
+  <tr>
+    <th colspan="2">Hippopotamus</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th colspan="2">Crocodile</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+</HTML> |
+Enfin, il est possible de changer le style de chaque colonne avec ''colgroup'' et ''col''.
+| <code html>
+<table>
+  <colgroup>
+    <col span="2">
+    <col style="background-color:#97DB9A;">
+    <col style="width:42px;">
+    <col style="background-color:#97DB9A;">
+    <col style="background-color:#DCC48E; border:4px solid #C1437A;">
+    <col span="2" style="width:42px;">
+  </colgroup>
+  <tr>
+    <td>&nbsp;</td>
+    <th>Mon</th>
+    <th>Tues</th>
+    <th>Wed</th>
+    <th>Thurs</th>
+    <th>Fri</th>
+    <th>Sat</th>
+    <th>Sun</th>
+  </tr>
+</table>
+</code> | <HTML>
+<table>
+  <colgroup>
+    <col span="2">
+    <col style="background-color:#97DB9A;">
+    <col style="width:42px;">
+    <col style="background-color:#97DB9A;">
+    <col style="background-color:#DCC48E; border:4px solid #C1437A;">
+    <col span="2" style="width:42px;">
+  </colgroup>
+  <tr>
+    <td>&nbsp;</td>
+    <th>Mon</th>
+    <th>Tues</th>
+    <th>Wed</th>
+    <th>Thurs</th>
+    <th>Fri</th>
+    <th>Sat</th>
+    <th>Sun</th>
+  </tr>
+  <tr>
+    <th>1st period</th>
+    <td>English</td>
+    <td>&nbsp;</td>
+    <td>&nbsp;</td>
+    <td>German</td>
+    <td>Dutch</td>
+    <td>&nbsp;</td>
+    <td>&nbsp;</td>
+  </tr>
+</table>
+</HTML> |
+Utiliser ''<caption>'' pour ajouter un titre à la table.
+Il est aussi possible de mettre les lignes d'entête dans un ''<thead>'', les lignes de bas de tableau dans un ''<tfoot>'' et les lignes restants dans un ''<tbody>''.
+Enfin, il est possible d'expliciter les entêtes des lignes et colonnes avec l'attribut ''scope=%%"col"%%'' ou ''scope=%%"row"%%''. Si des cellules d'entête sont fusionnées avec ''colspan'' ou ''rowspan'', il faut utiliser ''colgroup'' et ''rowgroup''.
+| <code html>
+<table>
+  <caption>Titre</caption>
+  <thead>
+    <tr>
+      <td>&nbsp;</td>
+      <th scope="col">Mon</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1st period</th>
+      <td>English</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Dernier1</td>
+      <th scope="col">Dernier2</th>
+    </tr>
+  </tfoot>
+</table>
+</code> | <HTML>
+<table>
+  <caption>Titre</caption>
+  <thead>
+    <tr>
+      <td>&nbsp;</td>
+      <th scope="col">Mon</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1st period</th>
+      <td>English</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Dernier1</td>
+      <th scope="col">Dernier2</th>
+    </tr>
+  </tfoot>
+</table>
+</HTML> |
 =====Exemples=====