Les Tableaux (1ère partie)

Pour créer un tableau tel que celui-ci :

Titre de la case Texte de la case 2
Titre de la case 3 Texte de la case 4
Titre de la case 5 Texte de la case 6
Titre de la case 7 Texte de la case 8
Titre de la case 9

Texte de la case 10


Nous allons utiliser le code suivant :

<center><table border="1" bordercolor="#888888"> <!--le chiffre en rose : 1 correspond à la taille de votre bord. et le code en orange #888888 à la couleur de votre bordure.-- >

<tbody>
<tr>
<td><span style="color:
#ffffff;">Titre de la case 1</span></td> <!--en vert : Titre/Texte correspond au texte que vous souhaitez y voir inscrit.-- >
<td><span style="color: #ffffff;">Texte de la case 2</span></td> <!--En orange : #FFFFFF correspond au code couleur du texte qui apparaîtras.-- >
</tr>
<tr>
<td><span style="color: #ffffff;">
Titre de la case 3</span></td> <!--en vert : Titre/Texte correspond au texte que vous souhaitez y voir inscrit.-- >
<td><span style="color: #ffffff;">Texte de la case 4</span></td> <!--En orange : #FFFFFF correspond au code couleur du texte qui apparaîtras.-- >
</tr>
<tr>
<td><span style="color: #ffffff;">
Titre de la case 5</span></td> <!--en vert : Titre/Texte correspond au texte que vous souhaitez y voir inscrit.-- >
<td><span style="color: #ffffff;">Texte de la case 6</span></td> <!--En orange : #FFFFFF correspond au code couleur du texte qui apparaîtras.-- >
</tr>
<tr>
<td><span style="color: #ffffff;">
Titre de la case 7</span></td> <!--en vert : Titre/Texte correspond au texte que vous souhaitez y voir inscrit.-- >
<td><span style="color: #ffffff;">Texte de la case 8</span></td> <!--En orange : #FFFFFF correspond au code couleur du texte qui apparaîtras.-- >
</tr>
<tr>
<td><span style="color: #ffffff;">
Titre de la case 9</span></td> <!--en vert : Titre/Texte correspond au texte que vous souhaitez y voir inscrit.-- >
<td>
<p><span style="color: #ffffff;">
Texte de la case 10</span></p> <!--En orange : #FFFFFF correspond au code couleur du texte qui apparaîtras.-- >
</td>
</tr>
</tbody>
</table>
</center>

<!--les paties en bleu ne servent que d'explication, elle ne modifient pas votre code et vous pouvez les effacés-- >

Pour changer le style d'écriture dans vos cases modifier votre script avec la phrase suivante :

<td><span style="font-family: arial,helvetica,sans-serif; color: #ffffff;">Titre de la case</span></td>


font-family: arial,helvetica,sans-serif : correspond au style de famille de l'écriture de votre texte.

color: #ffffff : correspond au code couleur de l'écriture de votre texte.


Pour changer le style et la taille d'écriture dans vos cases modifier votre script avec la phrase suivante :

<td><span style="font-size: small; font-family: arial,helvetica,sans-serif; color: #ffffff;">Titre de la case </span></td>


font-family: arial,helvetica,sans-serif : correspond au style de famille de l'écriture de votre texte.

color: #ffffff : correspond au code couleur de l'écriture de votre texte.

font-size: small : correspond à la taille de votre texte. peut aussi s'ecrire en px font-size: 12px.

  • vous pouvez intégrer à votre texte toute sorte d'effets en entourant vos balises <span> et </span> par les balises des effets que vous souhaitez intégrer.

pour un texte en gras vous ajouterez les balises <b> et </b> de cette façon :

<td><b><span style="font-size: small; font-family: arial,helvetica,sans-serif; color: #ffffff;">Titre de la case </span></b></td>


Autres exemples de tableaux :

Cliquez pour apprendre à créer un tableau comme l'exemple ci-contre :

Case 1 Case 2 Case 3
Case 4 Case 5 Case 6
Case 7 Case 8 Case 9


Voici le code simplifier de ce tableau :

Case 1 Case 2 Case 3
Case 4 Case 5 Case 6
Case 7 Case 8 Case 9

<center>
<table border=2 bordercolor="#ff0066" bordercolordark="#ffaaff" width=300 height=150>
<tr>

<td>
Case 1</td>
<td bgcolor="#ffcc00">Case 2</td>
<td>Case 3</td>
</tr>
<tr>
<td>Case 4</td>
<td bgcolor="#ff8050">Case 5</td>
<td>Case 6</td>
</tr>
<tr>
<td>Case 7</td>
<td bgcolor="#b8b868">Case 8</td>
<td>Case 9</td>
</tr>
</table>

</center>

Pour modifier le tableau changer (les parties en couleurs), expliquées ci dessous :

border= : correspond à la taille du bord de votre tableau.

bordercolor="#ff0066" et bordercolordark="#ffaaff" : correspondent à la couleur des bords de votre tableau.

width=300 : correspond à la hauteur de la case du tableau.

height=150 : correspond à la largeur de la case du tableau.

bgcolor="#ffcc00" : correspond au code couleur du background de votre case.

Case ? : changez cette partie par le texte qui apparaîtras dans la case correspondante

Tableau avec emplacement de textes :

 

case 1 case 2 case 3
case 4 case 5 case 6

 

Voici le code que nous allons utiliser pour ce tableau :


<table width=300 height=150 border=1 bordercolor=#ffcc00>
<tr>
<td ALIGN=left> case 1 </td>
<td ALIGN=middle>case 2</td>
<td ALIGN=right>case 3</td>
</tr>
<tr>
<td VALIGN=BOTTOM>case 4</td>
<td VALIGN=middle>case 5</td>
<td VALIGN=TOP>case 6</td></tr>
</table>


Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site

×