De jolies tableaux

0/5 (3 avis)

Snippet vu 11 714 fois - Téléchargée 28 fois

Contenu du snippet

Comment faire un tableau avec des angles bien ronds ??
Sa se complique, vous avez pu remarqué que j'aime faire simple, mais il est tellement plus simple de faire compliqué alors voilà pour vous une petite astuce simpathique.
Sachez que j'utilise ce script pour mon site perso que vous pouvez voir sur
http://www.chez.com/beerman

Pour faire simple ;-), créé un répertoire du nom de Tableau, comme sa vous comprendrez, ensuite créé un autre Répertoire Images, il faut respecter les minuscules et les MAJUSCULES. Dans ce répertoire vous mettrez 6 images différentes en bmp de tailles qui sont identiques 8x8 pixels.

Les images seront nommés comme suite:
bordhautgauche.bmp
bordhaut.bmp
bordhautdroit.bmp
bordbasgauche.bmp
bordbas.bmp
bordbasdroit.bmp
Chaque image doit faire exactement 8x8 pixels. Une fois ceci fait, il faut créer un autre fichier dans le répertoire Tableau, le nom du fichier est index.htm

Source / Exemple :


<img src="Images/bordhautgauche.bmp" align="left" hspace=0>
<script language="javascript" type="text/javascript">
<!--
var a, b, c;
a="480"; //doit être égal à la largeur du tableau
b=(a/8)-2;
c=0;
while(c<b){
document.write("<img src='Images/bordhaut.bmp' align='left' hspace='0'>");
c++
}
//-->
</script>
<img src="Images/bordhautdroit.bmp" hspace=0><BR>
<table bgcolor="white" width="480" style="border-left:thin ridge black; border-right:thin ridge black"> // width="480", c'est la largeur du tableau
	<tr>
		<td>
                                Ici votre texte qui est dans le tableau
		</td>

	</tr>
</table>
<img src="Images/bordbasgauche.bmp" align="left" hspace=0>
<script language="javascript" type="text/javascript">
<!--
var a, b, c;
a="480"; //doit être égal à la largeur du tableau
b=(a/8)-2;
c=0;
while(c<b){
document.write("<img src='Images/bordbas.bmp' align='left' hspace='0'>");
c++
}
//-->
</script>
<img src="Images/bordbasdroit.bmp" hspace=0>

Conclusion :


A LIRE ATTENTIVEMENT !!
Les fichiers :
bordhautgauche.bmp
bordhaut.bmp
bordhautdroit.bmp
bordbasgauche.bmp
bordbas.bmp
bordbasdroit.bmp
Doivent être fais en niveau de gris, sinon il faut changer la couleur du tableau:
<table bgcolor="white" width="480" style="border-left:thin ridge couleurachanger; border-right:thin ridge black">
Pour changer la taille du tableau, enfin la largeur il faut changer plusieurs éléments tout d'abord dans les script il faut changer les valeurs de a:
a="480"; // Il faut changer cette valeur
Dans Table il y a width="480", c'est la largeur du tableau.

Je n'ai pas fais de script, peut-être que j'aurais dû ...

A voir également

Ajouter un commentaire

Commentaires

Messages postés
31
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
7 octobre 2004

T uas raison c'est sur que c'est plus simple comme tu le dis, mais je n'y avait pas penser, les feuilles de style CSS, je ne connais pas trop le CSS, donc j'ai résolu le problème comme je le pouvais.

Merci de ton aide
Messages postés
133
Date d'inscription
mercredi 22 janvier 2003
Statut
Membre
Dernière intervention
18 avril 2013

ton script est extrémement compliqué pour faire ce que tu annonces ..
heureusement les CSS existent et sont bcp plus puissant pour ce genre de chose...
De plus pourquoi répéter ton image comme tu le fais ??
il suffit simplement de jouer sur la largeur de l'image ...
pour ton : bordhaut.bmp et bordbas.bmp
tu fais une image de 8px de haut apr 1px de largeur et ensuite il suffit de l'afficher comme ceci :
Messages postés
31
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
7 octobre 2004

La dernière phrase, je me suis trompé c'est je n'ai pas fait de zip, peut-être que j'aurais du. Voilà

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.