|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Des
images pour faire les coins
On
place tout dans un tableau
Résultat
|
|
1. Des
images pour faire les coins
Pour réaliser un tableau avec des coins
arrondis, on va utiliser des images, 4 au
total, c'est à dire une par coin.
Il faut pour cela utiliser un logiciel graphique
tel que Photoshop, Paint shop pro ou autre.
Dans notre exemple, les 4 images sont au format
gif, pour une taille optimale et pour laisser
passer la transparence.
Voici les 4 images :
   
Il faut égalemenr créer une
image gif transparente de 1x1 pixel.
Vous pouvez les télécharger
en cliquant
ici. |
 |
2. On place
tout dans un tableau
Nous allons voir maintenant le code HTML nécessaire
pour la création du tableau.
Le tableau comprendra 3 lignes et 3 colonnes.
Au final, le tableau doit ressembler à
ceci :
|
 |
|
|
On voit bien
les 3 lignes et les 3 colonnes du tableau
|
|
|
|
|
|
| |
Voci le code HTML du tableau :
<table
width="300" border="0"
cellspacing="0" cellpadding="0"
align="center">
<tr valign="top">
<td width="9"><img src="../img/astuces/coin_h_g.gif"
width="9" height="9" border="0"></td>
<td width="282" bgcolor="#FEDB4E"><img
src="../img/astuces/transparent.gif"
width="1" height="1" border="0"></td>
<td width="9"><img src="../img/astuces/coin_h_d.gif"
width="9" height="9" border="0"></td>
</tr>
<tr valign="top">
<td width="9" bgcolor="#FEDB4E"><img
src="../img/astuces/transparent.gif"
width="1" height="1" border="0"></td>
<td width="282" bgcolor="#FEDB4E"
valign="middle" align="center"><br>
<br>
<span class="noresult">On
voit bien
les 3 lignes et les 3 colonnes du tableau</span><br>
<br>
<br>
</td>
<td width="9" bgcolor="#FEDB4E"><img
src="../img/astuces/transparent.gif"
width="1" height="1" border="0"></td>
</tr>
<tr valign="top">
<td width="9"><img src="../img/astuces/coin_b_g.gif"
width="9" height="9" border="0"></td>
<td width="282" bgcolor="#FEDB4E"><img
src="../img/astuces/transparent.gif"
width="1" height="1" border="0"></td>
<td width="9"><img src="../img/astuces/coin_b_d.gif"
width="9" height="9" border="0"></td>
</tr>
</table> |
|
3. Résultat
|
| |
|
|
|
|
 |
|
 |
|
Et voici le résultat final
avec un effet de biseautage en
prime !
|
|
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
