LG

Outils pour utilisateurs

Outils du site

Piste :
prog:html

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
prog:html [2024/03/14 07:06] – [Images] : ajout de la source rootprog:html [2024/11/03 23:33] (Version actuelle) – [Paragraphes] : oublie de / pour fermer un tag root
Ligne 148: Ligne 148:
     <ul>     <ul>
       <li>liste non ordonnée imbriquée</li>       <li>liste non ordonnée imbriquée</li>
-    <ul>+    </ul>
   </li>   </li>
-<ol>+</ol>
 </code> | <HTML> </code> | <HTML>
 <ol> <ol>
Ligne 156: Ligne 156:
     <ul>     <ul>
       <li>liste non ordonnée imbriquée</li>       <li>liste non ordonnée imbriquée</li>
-    <ul>+    </ul>
   </li>   </li>
-<ol>+</ol>
 </HTML> | </HTML> |
  
Ligne 168: Ligne 168:
   <dd>Description 1</dd>   <dd>Description 1</dd>
   <dd>Description 2</dd>   <dd>Description 2</dd>
-<dl>+</dl>
 </code> | <HTML> </code> | <HTML>
 <dl> <dl>
Ligne 174: Ligne 174:
   <dd>Description 1</dd>   <dd>Description 1</dd>
   <dd>Description 2</dd>   <dd>Description 2</dd>
-<dl>+</dl>
 </HTML> | </HTML> |
  
Ligne 574: Ligne 574:
  
 Il existe aussi ''<embed>'' pour faire la même chose c'est l'ancienne syntaxe. 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===== =====Exemples=====
  
prog/html.1710396380.txt.gz · Dernière modification : 2024/03/14 07:06 de root