CSS - Tableaux

Ce didacticiel vous apprendra comment définir différentes propriétés d'un tableau HTML à l'aide de CSS. Vous pouvez définir les propriétés suivantes d'une table -

le border-collapse spécifie si le navigateur doit contrôler l'apparence des bordures adjacentes qui se touchent ou si chaque cellule doit conserver son style.
le border-spacing spécifie la largeur qui doit apparaître entre les cellules du tableau.
le caption-sideles légendes sont présentées dans l'élément <caption>. Par défaut, ceux-ci sont rendus au-dessus du tableau dans le document. Vous utilisez la propriété côté légende pour contrôler le placement de la légende du tableau.
le empty-cells spécifie si la bordure doit être affichée si une cellule est vide.
le table-layout permet aux navigateurs d'accélérer la mise en page d'un tableau en utilisant les premières propriétés de largeur qu'il rencontre pour le reste d'une colonne plutôt que d'avoir à charger le tableau entier avant de le rendre.

Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.

La propriété border-collapse

Cette propriété peut avoir deux valeurs collapse et séparées . L'exemple suivant utilise à la fois les valeurs -

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

Il produira le résultat suivant -

La propriété border-spacing

La propriété border-spacing spécifie la distance qui sépare les cellules adjacentes '. limites. Il peut prendre une ou deux valeurs; ceux-ci devraient être des unités de longueur.

Si vous fournissez une valeur, elle s'appliquera aux bordures verticales et horizontales. Ou vous pouvez spécifier deux valeurs, auquel cas, la première fait référence à l'espacement horizontal et la seconde à l'espacement vertical -

NOTE - Malheureusement, cette propriété ne fonctionne pas dans Netscape 7 ou IE 6.

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

Modifions maintenant l'exemple précédent et voyons l'effet -

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Il produira le résultat suivant -

La propriété caption-side

La propriété caption-side vous permet de spécifier où le contenu d'un élément <caption> doit être placé par rapport à la table. Le tableau qui suit répertorie les valeurs possibles.

Cette propriété peut avoir l'une des quatre valeurs top, bottom, left ou right . L'exemple suivant utilise chaque valeur.

NOTE - Ces propriétés peuvent ne pas fonctionner avec votre navigateur IE.

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Il produira le résultat suivant -

La propriété empty-cells

La propriété empty-cells indique si une cellule sans contenu doit avoir une bordure affichée.

Cette propriété peut avoir l'une des trois valeurs: afficher, masquer ou hériter .

Voici la propriété empty-cells utilisée pour masquer les bordures des cellules vides dans l'élément <table>.

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Il produira le résultat suivant -

La propriété table-layout

La propriété table-layout est censée vous aider à contrôler la manière dont un navigateur doit rendre ou disposer un tableau.

Cette propriété peut avoir l'une des trois valeurs: fixe, automatique ou hériter .

L'exemple suivant montre la différence entre ces propriétés.

NOTE - Cette propriété n'est pas prise en charge par de nombreux navigateurs, ne vous fiez donc pas à cette propriété.

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

Il produira le résultat suivant -