Partagez
Aller en bas
avatar
Robin
Logiciels : Gimp - Notepad
Disponible : Oui
Rappel : Sauf mentions contraires, toutes mes créations sont placées sous Creative Commons.
Pour de plus amples informations, référez-vous aux Conditions Générales d'Utilisation.
http://libre-service.conceptforum.nethttps://twitter.com/Paradyr

Tableaux

le Mar 23 Aoû - 13:15
IMPORTANT

Les codes présents dans ce sujet contiennent du CSS et du HTML. Si vous n'avez pas l'accès à l'administration du forum et que vous ne savez pas comment intégrer du CSS dans une page HTML, cliquez ici pour lire le tutoriel dédié à cette étape.

Tous droits réservés | par Robin | http://libre-service.conceptforum.net
Parcourir ce site et en utiliser les ressources proposées implique le respect des conditions imposées.


Dernière édition par Robin le Lun 25 Juin - 11:23, édité 3 fois
avatar
Robin
Logiciels : Gimp - Notepad
Disponible : Oui
Rappel : Sauf mentions contraires, toutes mes créations sont placées sous Creative Commons.
Pour de plus amples informations, référez-vous aux Conditions Générales d'Utilisation.
http://libre-service.conceptforum.nethttps://twitter.com/Paradyr

Re: Tableaux

le Mar 23 Aoû - 13:15
CODE HTML :
Code:
<table class="bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Description</th>
          <th>Prix</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Epée en bois</td>
          <td>10 po</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Ecu en bois</td>
          <td>30 po</td>
        </tr>
      </tbody>
    </table><div style="float:right; text-shadow: 1px 1px 10px #000000;"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.fr"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png"></a><br><a href="http://libre-service.conceptforum.net" style="color: #000000;  text-decoration: none!important; font-size:9px;">libre-service.conceptforum.net</a></div>

CODE CSS :
Code:
table {
border-spacing: 0;
width: 500px;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 20px;
webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 3px 3px #ccc;
-moz-box-shadow: 0 3px 3px #ccc;
box-shadow: 0 3px 3px #ccc;
}

.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}

.bordered th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from (#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, .8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255, .8) inset;
box-shadow: 0 1px 0 rgba(255,255,255, .8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255, .5);
}

.bordered td:first-child, .bordered th:first-child {
border-left: none;
}

.bordered th:first-child{
-moz-border-radius: 20px 0 0 0;
-webkit-border-radius: 20px 0 0 0;
border-radius: 20px 0 0 0;
}

.bordered th:last-child{
-moz-border-radius: 0 20px 0 0;
-webkit-border-radius: 0 20px 0 0;
border-radius: 0 20px 0 0;
}

.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 20px;
-webkit-border-radius: 0 0 0 20px;
}

.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 0 20px;
-webkit-border-radius: 0 0 0 20px;
}
.bordered tr:hover {
background: #F9F3DB;}
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum