Tableaux
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.
Parcourir ce site et en utiliser les ressources proposées implique le respect des conditions imposées.
Re: Tableaux
Mar 23 Aoû - 13:15
CODE HTML :
CODE CSS :
- 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.1fr1.net" style="color: #000000; text-decoration: none!important; font-size:9px;">libre-service.1fr1.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;}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum