LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


LES TABLEAUX HTML

SOMMAIRE
  • <table>
  • <tr>
  • <td>
  • Attributs


  • <table...> </table...> : Cette balise encapsule un tableau.
    Le tableau est certainement un des éléments les plus important et des plus utilisé dans le cadre des mises en page des documents.
    Ci-dessous, voyez un exemple de tableau constitué de 2 rangées de 2 cellules.
    Ex :
    <table border="1">
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    <tr...> </tr...> : Cette balise délimite les rangées et encapsule les cellules (colonnes).
    <td...> </td...> : Cette balise délimite les cellules et encapsule le contenu de celle-ci.
    align="..." : Aligne le tableau dans l'espace où il se trouve.
    Pour "tr" et "td", c'est au contenu que l'attribut s'adresse.
    Les valeurs admises sont "left" (par défaut), "center", "right"
    background="..." :
    Affecte une image de fond.
    Applicable à "table", "tr" et "td".
    Ex :
    <table border="1"
      background="images-doc/papier-peint.jpg">
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    bgcolor="..." :
    Affecte une couleur au fond.
    Applicable à "table", "tr" et "td".
    Dans l'exemple ci-dessous, la couleur rouge a été affectée au tableau et le jaune à la cellule 1.
    Ex :
    <table bgcolor="red">
      <tr>
        <td bgcolor="yellow">cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    border="..." : Defini l'épaisseur des bordures et la valeur est exprimée en pixels. Une valeur de "0" suprime les bordures.
    cellpadding="..." :
    Crée un espace entre la bordure et le contenu des cellules.
    Ex :
    <table border="1" cellpadding="10">
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    cellspacing="..." :
    Crée un espace entre les cellules.
    Dans l'exemple ci-dessous, le tableau a une hauteur de 150 et 20% de cette hauteur (soit 30 pixels) a été affecté à la première rangée
    Ex :
    <table border="1" cellspacing="10">
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    colspan="..." :
    Fusionne des cellules horizontalement.
    Ne s'applicable qu'à "td".
    Ex :
    <table border="1">
      <tr>
        <td colspan="2">cellule 1 et cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1 et cellule 2
    cellule 3cellule 4
    height="..." :
    Force la hauteur.
    S'exprime en pixels ou en pourcentage.
    Applicable à "table", "tr" et "td".
    Dans l'exemple ci-dessous, le tableau a une hauteur de 150 et 20% de cette hauteur (soit 30 pixels) a été affecté à la première rangée.
    Ex :
    <table border="1" height="150">
      <tr height="20%">
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    hspace="..." :
    Réserve un espace à droite et à gauche du tableau
    S'exprime en pixels.
    Ne fonctionne qu'avec Firefox.
    Ex :
    <table border="1" hspace="15">
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    rowspan="..." :
    Fusionne des cellules verticalement.
    Ne s'applicable qu'à "td".
    Ex :
    <table border="1">
      <tr>
        <td rowspan="2">cellule 1
          <br>cellule 3</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1
    cellule 3
    cellule 2
    cellule 4
    valign="..." :
    Aligne le tableau dans l'espace où il se trouve.
    Pour "tr" et "td", c'est au contenu que l'attribut s'adresse.
    Les valeurs admises sont "left" (par défaut), "center", "right".
    Ex :
    <table border="1" vspace="15">
      <tr>
        <td valign="top">cellule 1</td>
      </tr>
      <tr>
       <td valign="middle">cellule 2</td>
      </tr>
      <tr>
        <td valign="bottom">cellule 3</td>
      </tr>
      <tr>
        <td valign="baseline">cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1
    cellule 2
    cellule 3
    cellule 4
    vspace="..." :
    Réserve un espace au-dessus et en-dessous du tableau
    S'exprime en pixels.
    Ne fonctionne qu'avec Firefox.
    Ex :
    Text au-dessus<table border="1" vspace="15">
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>Text en-dessous
    Résultat :
    Text au-dessus
    cellule 1cellule 2
    cellule 3cellule 4
    Text en-dessous
    width="..." :
    Force la largeur.
    S'exprime en pixels ou en pourcentage.
    Applicable à "table", "tr" et "td".
    Dans l'exemple ci-dessous, le tableau a une largeur de 210 et 40% de cette largeur (soit 84 pixels) a été affecté à la première colonne.
    Ex :
    <table border="1" width="210">
      <tr>
        <td width="40%">cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td>cellule 3</td>
        <td>cellule 4</td>
      </tr>
    </table>
    Résultat :
    cellule 1cellule 2
    cellule 3cellule 4
    Compatibilité : IE Firefox
    Top of Page
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007 ;© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 10/02/2016
         image