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>


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