Tableau en CSS3

 

Tableau en CSS3

Depuis que le CSS3 existe, l'aspect des tableaux tant décriés, mais parfois utiles, peuvent avoir un tout autre aspect.
J'ai récemment écrit un tutorial sur l'utilisation d'un tableau auquel on ajoute des fonctionnalités avec le plugin DataTables, et dont la mise forme est faite sans l'utilisation de JQuery UI.
Dans cette page vous trouverez une façon de mise en forme d'un tableau en CSS3 que j'utilise. et vous proposerez un lien de téléchargement d'un autre tableau que j'utilise aussi coté front office.

Le code Html du tableau. Le tableau utilise les balises (thead) ou header ou en-tête du tableau, puis la balise (tbody) pour le corps du tableau, et enfin la balise (tfoot) qui lui confére comme une sorte de pied de page.

                          <table cellpadding="0" cellspacing="0" border="0" class="pretty">
                              <thead>
                                  <tr>
                                      <th>ID</th>
                                      <th>Matricule</th>
                                      <th>Nom</th>
                                      <th>Service</th>
                                      <th>Poste</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  <tr class="odd">
                                      <td>1</td>
                                      <td>6</td>
                                      <td>MACLEOD</td>
                                      <td>A03</td>
                                      <td>DEVELOPPEUR</td>
                                      </tr>
                                      <tr>
                                      <td>2</td>
                                      <td>5 </td>
                                      <td>MARTIN</td>
                                      <td>000</td>
                                      <td>RESEAU</td>
                                      </tr>
                                      <tr class="odd">
                                      <td>3</td>
                                      <td>8</td>
                                      <td>PATRICE</td>
                                      <td>A02</td>
                                      <td>OPERATEUR</td>
                                  </tr>
                              </tbody>
                              <tfoot>
                                  <tr>
                                      <th>ID</th>
                                      <th>Matricule</th>
                                      <th>Nom</th>
                                      <th>Service</th>
                                      <th>Poste</th>
                                  </tr>
                              </tfoot>
                          </table>                  
              

Ci-dessous le code CSS avec différentes couleurs. Le code est muni de commentaire sur l'utilisation des couleurs dans les différentes classes css.
Pour chacune des couleurs plusieurs attributs (background) sont employés pour être compatibles avec les différents navigateurs écrit en commentaire.

                /* Table styles */
                table.pretty {
                    width: 100%;
                    clear: both;
                }
                
                table.pretty td,
                table.pretty th {
                    padding: 5px;
                    border: 1px solid #fff;/*sépare les colonnes et ligne par un trait blanc*/
                }
                
                /* Body cells */
                table.pretty tbody th {
                    text-align: left;
                    background: #91c5d4;
                }
                
                /*
                ci dessous activer les couleurs que vous souhaitez
                Ces couleurs doivent être en accord avec ceux du debut*/	
                table.pretty tbody td {
                    text-align: left;
                    background: #d5eaf0;/*bleu*/
                    /*background:#f1da36;jaune*/
                    /*background:#f8ffe8;vert*/
                    /*background:#fcfff4;gris*/
                }
                        
                table.pretty tbody tr.odd td { 
                    background: #bcd9e1;/*bleu*/
                    /*background: #fefcea;jaune*/
                    /*background: #e3f5ab;vert*/
                    /*background:#dfe5d7;gris*/
                }
                
                /* Footer cells */
                table.pretty tfoot th {
                    /*background: #aed0ea;*/
                    text-align: left;
                }
                    
                table.pretty tfoot td {
                    background: #d7e1c5;
                    text-align: center;
                    font-weight: bold;
                }
                
                /*styling*/
                /*Ici activer les sélecteurs des couleurs que vous souhaitez*/
                /*bleu*/
                table.pretty thead tr, table.pretty tfoot th
                {
                    background: #f1f8ff; 
                    background: -moz-linear-gradient(top,  #f1f8ff 0%, #cbe5ff 47%, #a1d0ff 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f8ff), color-stop(47%,#cbe5ff), color-stop(100%,#a1d0ff)); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top,  #f1f8ff 0%,#cbe5ff 47%,#a1d0ff 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top,  #f1f8ff 0%,#cbe5ff 47%,#a1d0ff 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top,  #f1f8ff 0%,#cbe5ff 47%,#a1d0ff 100%); /* IE10+ */
                    background: linear-gradient(to bottom,  #f1f8ff 0%,#cbe5ff 47%,#a1d0ff 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f8ff', endColorstr='#a1d0ff',GradientType=0 ); /* IE6-9 */
                }
                
                /*vert*/
                /*table.pretty thead tr, table.pretty tfoot th*/
                {
                background: #f8ffe8; /* Old browsers */
                background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
                background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */}
                
                /*gris*/
                /*table.pretty thead tr, table.pretty tfoot th*/
                {
                background: #fcfff4; /* Old browsers */
                background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* IE10+ */
                background: linear-gradient(to bottom, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */	
                }
                
                /*jaune*/
                /*table.pretty thead tr, table.pretty tfoot th*/
                {
                background: #fefcea; /* Old browsers */
                background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
                background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */	
                }
             

La démo utilise les mêmes codes que ceux cités dans les onglets de code.



Ci-dessous le lien vers la démo. Démo



Le lien de téléchargement d'un autre tableau. Télécharger