Médiaforma

Guide de survie – Les tableaux

9 janvier 2011
Categories: HTLM5 / CSS3

Bordures autour des cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Bordures autour d'un tableau</title>
    <style>
      table
      {
        border: 4px dashed black;
      }
      th, td
      {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
  <table>
    <tr>
      <th>Titre colonne 1</th>
      <th>Titre colonne 2</th>
      <th>Titre colonne 3</th>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
  </table>
  </body>
</html>

Espacer les cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Espacer les cellules d'un tableau</title>
    <style>
      table
      {
        border: 1px solid black;
        text-align: center;
        border-collapse: separate;
        border-spacing: 10px;
      }
      td
      {
        width: 120px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
  <table>
    <tr>
    <td>Date</td>
    <td>Articles</td>
    <td>Prix</td>
    </tr>
    <tr>
    <td>12/08</td>
    <td>21</td>
    <td>5412</td>
    </tr>
    <tr>
    <td>17/08</td>
    <td>14</td>
    <td>1519</td>
    </tr>
  </table>
  </body>
</html>

Ajouter une légende à un tableau

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Légender un tableau</title>
    <style>
      table
      {
        border: 2px solid red;
      }
      table > caption
      {
        caption-side: bottom;
        font-style: italic;
        text-align: right;
      }
    </style>
  </head>
  <body>
  <table>
    <caption>Titre du tableau</caption>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
    <tr>
      <td>Elément 1 ligne 2</td>
      <td>Elément 2 ligne 2</td>
      <td>Elément 3 ligne 2</td>
    </tr>
  </table>

  </body>
</html>

Mise en forme des cellules vides

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Bordure des cellules vides</title>
    <style>
      table
      {
        border: 2px solid red;
        background-color: #dfd;
      }
      #table1 { empty-cells: show; }
      #table2 { empty-cells: hide; }
      td { border: 1px dashed black;}
    </style>
  </head>
  <body>
    <table id="table1">
      <tr>
        <td>Elément 1 ligne 1</td>
        <td></td>
        <td>Elément 3 ligne 1</td>
      </tr>
      <tr>
        <td></td>
        <td>Elément 2 ligne 2</td>
        <td>Elément 3 ligne 2</td>
      </tr>
    </table>
    <br><table id="table2">
      <tr>
        <td>Elément 1 ligne 1</td>
        <td></td>
        <td>Elément 3 ligne 1</td>
      </tr>
      <tr>
        <td></td>
        <td>Elément 2 ligne 2</td>
        <td>Elément 3 ligne 2</td>
      </tr>
    </table>
  </body>
</html>

Mise en forme des adjacents et enfants

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Adjacents et enfants</title>
    <style>
    body
    {
      font-family: arial;
      color: black;
    }
    #tableau1
    {
      color: blue;
    }
    #tableau1 tr > td
    {
      font-style: italic;
    }
    #tableau1 td:first-child
    {
      font-weight: bolder;
    }
    #tableau1 td:first-child + td
    {
      background: yellow;
    }
    #tableau1 td:first-child + td + td
    {
      background: red;
    }
    </style>
  </head>
  </body>
    <p>Utilisation des opérateurs > et + pour mettre en forme un tableau</p>
    <table id="tableau1">
      <tr>
        <td>Elément 1 ligne 1</td>
        <td>Elément 2 ligne 1</td>
        <td>Elément 3 ligne 1</td>
      </tr>
      <tr>
        <td>Elément 1 ligne 1</td>
        <td>Elément 2 ligne 1</td>
        <td>Elément 3 ligne 1</td>
      </tr>
    </table>
  </body>
</html>

Habillage d’un tableau

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Habillage d'un tableau</title>
    <style>
    table
    {
      border: 1px solid silver;
      background-color: #dfd;
    }
    caption
    {
      text-align: left;
      color: red;
      font-weight: bold;
      font-size: 130%;
      border-bottom: 5px solid blue;
      margin-bottom: 10px;
    }
    th
    {
      border: 1px solid red;
      empty-cells: hide;
      background-color: yellow;
    }
    tr
    {
      text-align: center;
    }
    td
    {
      border: 1px dashed black;
    }
    td:first-child
    {
      color: red;
      font-weight: bold;
      border: 0;
      text-align: right;
    }
    tr#dernier
    {
      background-color: silver;
    }
    </style>
  </head>
  </body>
    <table>
      <caption>Recettes budgétaires par région</caption>
      <th></th>
      <th colspan = 2>En Millions de F</th>
      <th rowspan = 2>1985 en F/hab.</th>
      <tr>
      <th></th>
      <th>1984</th>
      <th>1985</th>
      <tr>
      <td>Ile-de-France</td>
      <td>399258</td>
      <td>415920</td>
      <td>178,8</td>
      </tr>
      <tr>
      <td>Midi-Pyrénnées</td>
      <td>73961</td>
      <td>63826</td>
      <td>219,4</td>
      </tr>
      <tr id=dernier>
      <td>Centre</td>
      <td>43638</td>
      <td>55802</td>
      <td>185,9</td>
      </tr>
    </table>
  </body>
</html>

Arrière-plan des cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Arrière-plan des cellules</title>
    <style>
      table
      {
        border: 1px solid black;
        text-align: center;
        color: blue;
        font-weight: bold;
        font-size: 200%;
      }
      td {width: 200px;}
      td.fond1 { background:url(fond1.jpg); }
      td.fond2 { background:url(fond2.jpg); }
      td.fond3 { background:url(fond3.jpg); }
    </style>
  </head>
  </body>
    <table>
      <tr>
      <td class=fond1>Date</td>
      <td class=fond1>Articles</td>
      <td class=fond1>Prix</td>
      </tr>
      <tr>
      <td class=fond2>12/08</td>
      <td class=fond3>21</td>
      <td class=fond3>5412</td>
      </tr>
      <tr>
      <td class=fond2>14/08</td>
      <td class=fond3>10</td>
      <td class=fond3>2215</td>
      </tr>
      <tr>
      <td class=fond2>16/08</td>
      <td class=fond3>15</td>
      <td class=fond3>3219</td>
      </tr>
      <tr>
      <td class=fond2>19/08</td>
      <td class=fond3>17</td>
      <td class=fond3>2719</td>
      </tr>
    </table>
  </body>
</html>

Différentier les lignes paires des lignes impaires

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Différentiation des lignes paires/impaires</title>
      <style>
        table
        {
          border: 1px solid black;
        }
        tr:nth-child(odd)
        {
          background-color: silver;
        }
        tr:nth-child(even)
        {
          background-color: white;
        }
        td
        {
          width: 200px;
        }
      </style>
  </head>
  </body>
  <table>
    <tr>
    <td>Date</td>
    <td>Articles</td>
    <td>Prix</td>
    </tr>
    <tr>
    <td>12/08</td>
    <td>21</td>
    <td>5412</td>
    </tr>
    <tr>
    <td>14/08</td>
    <td>10</td>
    <td>2215</td>
    </tr>
    <tr>
    <td>16/08</td>
    <td>15</td>
    <td>3219</td>
    </tr>
    <tr>
    <td>19/08</td>
    <td>17</td>
    <td>2719</td>
    </tr>
  </table>
  </body>
</html>

Alignement dans les cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement des cellules</title>
    <style>
      table { border: 1px solid black; }
      td
      {
        border: 1px dashed red;
        width: 200px;
        height: 40px;
      }
      td.c1
      {
        text-align: center;
        vertical-align: middle;
      }
      td.c2
      {
        text-align: left;
        vertical-align: top;
      }
      td.c3
      {
        text-align: right;
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
      <tr>
      <td class="c1">Date</td>
      <td class="c1">Articles</td>
      <td class="c1">Prix</td>
      </tr>
      <tr>
      <td class="c2">12/08</td>
      <td class="c2">21</td>
      <td class="c2">5412</td>
      </tr>
      <tr>
      <td class="c3">17/08</td>
      <td class="c3">14</td>
      <td class="c3">1519</td>
      </tr>
    </table>
  </body>
</html>

Accessibilité des tableaux complexes

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Accessibilité dans un tableau complexe</title>
    <style>
      td
      {
        color:red;
        text-align: center;
      }
    </style>
  </head>
  </body>
    <table border="1">
    <tr>
      <th id="hea1">Nom</th>
      <th id="hea2">Indemnité</th>
      <th id="hea3">Valeur</th>
    </tr>
    <tr>
      <th id="hea1_1" headers="hea1" rowspan="2">Daniel Dumond</th>
      <th id="hea2_1" headers="hea2 hea1_1">Repas</th>
      <td headers="hea3 hea1_1 hea2_1">186</td>
    </tr>
    <tr>
      <th id="hea2_2" headers="hea2 hea1_1">Déplacements</th>
      <td headers="hea3 hea1_1 hea2_2">87</td>
    </tr>
    <tr>
      <th id="hea1_2" headers="hea1" rowspan="2">Pierre PetitJean</th>
      <th id="hea2_4" headers="hea2 hea1_2">Repas</th>
      <td headers="hea3 hea1_2 hea2_4">28</td>
    </tr>
    <tr>
      <th id="hea2_5" headers="hea3 hea1_2">Déplacements</th>
      <td headers="hea3 hea1_2 hea2_5">43</td>
    </tr>
    </table>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Accessibilité dans un tableau complexe</title>
    <style>
      td
      {
        color:red;
        text-align: center;
      }
    </style>
  </head>
  </body>
    <table border="1" summary="Indemnités de déplacement et de repas pour Janvier, Février et Mars">
      <tr>
        <td> </td>
        <th scope="col">Janvier</th>
        <th scope="col">Février</th>
        <th scope="col">Mars</th>
      </tr>
      <tr>
        <th scope="row">Déplacements</th>
        <td>145</td>
        <td>214</td>
        <td>89</td>
      </tr>
      <tr>
        <th scope="row">Repas</th>
        <td>227</td>
        <td>195</td>
        <td>48</td>
      </tr>
    </table>
  </body>
</html>

Des infos-bulles dans un tableau

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des info-bulles dans un tableau</title>
      <style>
        td
        {
          border: 1px solid black;
        }
      </style>
  </head>
  </body>
  <table>
    <tr>
      <th title="infobulle sur la première cellule de titre">Titre colonne 1</th>
      <th>Titre colonne 2</th>
      <th>Titre colonne 3</th>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td title="infobulle sur la deuxième cellule de la première ligne de données">Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
  </table>
  </body>
</html>

Mise en forme sophistiquée CSS3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en forme sphistiquée CSS3</title>
    <style>
      table
      {
        border: 4px double black;
        border-spacing: 0;
        text-align: center;
        color: blue;
        font-weight: bold;
        font-size: 200%;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-box-shadow: gray 5px 5px 6px;
        -webkit-box-shadow: gray 5px 5px 6px;
      }
      th
      {
        color: #fff;
        font-size: 110%;
        text-shadow: gray 2px 2px 2px
      }
      tr:nth-child(odd)
      {
        background-color: silver;
      }
      tr:nth-child(even)
      {
        background-color: white;
      }
      td
      {
        width: 200px;
      }
    </style>
  </head>
  </body>
    <table>
      <tr>
      <th>Date</th>
      <th>Articles</th>
      <th>Prix</th>
      </tr>
      <tr>
      <td>12/08</td>
      <td>21</td>
      <td>5412</td>
      </tr>
      <tr>
      <td>14/08</td>
      <td>10</td>
      <td>2215</td>
      </tr>
      <tr>
      <td>16/08</td>
      <td>15</td>
      <td>3219</td>
      </tr>
      <tr>
      <td>19/08</td>
      <td>17</td>
      <td>2719</td>
      </tr>
    </table>
  </body>
</html>

 
Commentaires

Aucun commentaire pour l'instant.

Laissez un commentaire

Téléchargez gratuitement ce mini-dossier PDF dans votre boîte mail.





 
Mediaforma est une marque déposée - Copyright © 2020 Mediaforma
33 visiteurs connectés sur Mediaforma !