ALL HTML - Thèmes - Atelier pratique : Tableau aux coins arrondis

Focus - 30 Août 2008
Devenez "membre" de ALL HTML et faites partie d'une vraie communauté de passionnés et/ou de professionnels du développement sur Internet.
L'accès membre est gratuit et vous permet d'accéder à des fonctionnalités complémentaires :
- accéder à l'annuaire des 44 000 membres,
- poster des messages dans les forums,
- utiliser la messagerie interne,
- bénéficier d'offres négociées...).
Alors n'attendez-plus!

Inscrivez-vous dès à présent !

Atelier pratique

Tableau aux coins arrondis

cette astuce se déroule en plusieurs parties :
- Création de quatre demi-cercle (pour réaliser les coins arrondis) et d'un pixel dit de transparence (1 pixel sur 1 pixel)
- Création d'un tableau

a) Création de quatre demi-cercle
Lancez votre logiciel graphique préféré et créé un cercle

, puis découpez le afin d'obtenir un quart de cercle

. Faite alors pivotez ce quart de cercle (rotation horizontale et verticale), vous obtiendrez alors 4 demi cercle égaux

. Enfin enregistrer les en les nommant coin1.gif, coin2.gif, coin3.gif et coin4.gif. crééz également un pixel d'une taille de 1 x 1 et transparent

que l'on nommera pixel.gif.

Explications

b) création du tableau ci-dessous Attention tout de même à ne pas oublier le "cellpadding=0 cellspacing=0 border=0" dans la balise table.

<table width=280 cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=12><img src="coin1.gif" border=0 width=12 height=12></td>
<td width=256 bgcolor="#000084"><img src="pixel.gif"border=0 width=1 height=1></td>
<td width=12><img src="coin2.gif" border=0 width=12 height=12></td>
</tr>
<tr>
<td width=12 bgcolor="#000084"><img src="pixel.gif" border=0 width=1 height=1></td>
<td width=256 bgcolor="#000084" align=center><font size=2 face="arial, verdanal" color="#FFFFFF">ALL HTML</font></td>
<td width=12 bgcolorr="#000084"><img src="pixel.gif" border=0 width=1 height=1></td>
</tr>
<tr>
<td width=12><img src="coin3.gif" border=0 width=12 height=12></td>
<td width=280 bgcolor="#000084"><img src="pixel.gif" border=0 width=1 height=1></td>
<td width=12><img src="coin4.gif" border=0 width=12 height=12></td>
</tr>
</table>

Résultat final


	ALL HTML

Résultat avec border=1 (pour observer le découpage des cellules)


	ALL HTML

Quelques pécautions
- Bien spécifier border=0 sur toutes vos images
- Attention le code <td>...</td> est différent de
<td>
...
</td>
- Le pixel transparent est présent avant tout, pour que ce tableau soit compatible avec Netscape
- Spécifier les longueurs par l'intermédiaire de width (et hauteurs height, si vous le pouvez) de vos cellules

Recommander ALL HTML
Si vous appréciez ce site,
n'hésitez pas à le faire
découvrir à vos ami(e)s...

Cliquez ici