mercredi 3 octobre 2007
[Q] - petite forme...
Petite forme, petit moral, aujourd'hui...
Le ciel est bas et gris... ça n'arrange rien du tout !.... ça m'oppresse.....
J'ai eu tout à l'heure des nouvelles pour mon éventuel "futur" boulot... ce qui a certainement fini de m'achever !... je devrais plutot dire "futur-ex" car les choses me semblent bien compromis pour moi... mais bon... je vais aller chercher autre chose...
Tit bout tourne autour de moi, je voulais faire une après midi bricolage avec elle qui adore ça, j'ai pas le courage... une fatigue m'enveloppe depuis ce matin, c'est dingue.... Elle voudrait aller se balader, mais avec ce temps, aucune envie de sortir....
J'ai froid, j'ai mal à la tête...
J'arrive au terme de ma période d'essai du champix, et au jour où il faut que j'arrete définitivement et je fume de plus en plus et ça m'angoisse énormément...
Enfin... pas le top quoi... vivement que ce jour finisse........
Et demain.... rendez vous à 8h30 pour mon rendez vous ANPE .... super pour commencer une journée ! youpi !................................................
[I] - html 4 - Les tableaux
4ème petite leçon de html - Les tableaux :
Alors là, nous attaquons une partie délicate, un peu plus complexe (qui marche jamais du premier coup !) mais néanmoins importante et fort utile parfois (puisqu'ils peuvent permettre par exemple une meilleure mise en page !)
Structure simple d'un tableau :
<TABLE>
<TR><TD>1ère ligne </TD><TD> 2ème cellule </TD></TR>
<TR><TD>2ème ligne </TD><TD>2/2</TD></TR>
<TR><TD>3ème ligne</TD><TD>2/3</TD></TR>
</TABLE>
explications : lecture de haut en bas et de gauche à droite... logique !
* <TABLE> balise qui annonce l'ouverture d'un tableau.
* <TR> (de "table row" = ligne de tableau) annonce l'ouverture d'une ligne dans le tableau
* et donc </TR> sera la fermeture de la ligne
* <TD> (de "table data" = données de tableau) annonce que nous ouvrons une cellule qui sera du coup une colonne du tableau
* et donc </TD> sera la fermeture de la cellule (après y avoir insérer du texte !)
* après il suffit de recopier ce meme schéma pour avoir autant de ligne et de colonne voulues !
* </TABLE> indique bien évidement que le tableau est fini !
Et voilà ce que ça donne en vrai !
| 1ère ligne | 2ème cellule |
| 2ème ligne | 2/2 |
| 3ème ligne | 2/3 |
Mise en forme du tableau :
Biensur, les balises de texte (cf leçon html 1) pour metre en gras, italique, pour centrer, aligner à droite etc, s'appliquent au tableaux, il ne faut pas oublier de les spécifier, et de les appliquer aux bon endroit ! (à <table> si vous voulez que tout le tableau soit centrer par exemple, à <td><center> si vous voulez que seulement le texte d'une cellule soit centrer etc...)
Il exite une balise particulière <TH> (de "Table Header" = "En tête de tableau") qui peut etre utilisée à la place de la balise <TD>. Cette balise <TH> a exactement la même propriété que <TD> (créer une nouvelle cellule) mais, en plus de cela, elle passe automatiquement le texte contenu entre les balises <TH> et </TH> en gras et centré !
Ainsi, au lieu d'avoir à écrire : <TD><CENTER><B>votre texte</B></CENTER></TD>, on n'écris plus que <TH> votre texte</TH>
Mettre des bordures au tableau :
Le tableau ci-dessus, n'a pas de bordure, ni aucune mise en forme pour
se faire, il faut le préciser par de nouvelles balises ! Logique !
<TABLE BORDER="x"> (à la place de <TABLE> tout court) qui permet de définir une bordure en nombre défini de pixels (épaisseur de la bordure).
Fusionner des colonnes : <TD COLSPAN="x"> x étant le chiffre correspondant au nombre de colonne sur lesquelles fusionnent les cellules.
Fusionner des lignes : <TD ROWSPAN="x" > x étant le chiffre correspondant au nombre de lignesur lesquelles fusionnent les cellules. Attention néanmoins ici. Les cellules des lignes suivantes n'ont plus lieu d'être, ne pas oublier donc de les supprimer dans les lignes suivantes de votre code html !
Pour notre exemple ci dessus, ça nous donne :
code :
|
<TABLE BORDER="2" > |
-->(ma bordure fait ici 2 pixels d'épaisseur) |
|
<TR><TD COLSPAN="2">1ère ligne</TD></TR> |
--> ma cellule est fusionner sur 2 colonnes, comme il n'y a pas d'autre colonne dans le tableau, on peut fermer le tableau (</TR>) après cette cellule fusionner. |
|
<TR><TD>2ème ligne </TD> <TD ROWSPAN="2">2/2</TD></TR> |
--> ma 2ème cellule de cette ligne va fusionner sur 2 lignes |
|
<TR><TD>3ème ligne</TD></TR> |
-> sur cette 3ème ligne, la 2ème cellule ayant fusionner avec celle du dessus, ne pas oublier d'enlever son ouverture et fermeture sur cette ligne. |
| </TABLE> résultat : |
| 1ère ligne | |
| 2ème ligne | 2/2 |
| 3ème ligne | |
Donner une dimension au tableau :
<TABLE WIDTH="x" HEIGHT="y"> définit repectivement la largeur et la hauteur du tableau.
2 solutions :
* définir x et y en pixels ex : <table width="600"> signifie que mon tableau fera une largeur de 600 pixels.
* définir x et y en % ex : <table width="80%"> signifie que mon tableau occupera 80 % de la largeur de la fenêtre (ce qui peut etre plus interessant pour s'adapter à toutes les résolutions d'écran !)
Donner une taille aux cellules :
Les options WIDTH et HEIGHT marchent pour les cellules comme pour le tableau. (à mettre après <TD width...). Attention toutefois, si vous donnez une largeur à votre tableau, l'ensemble des largeurs de vos cellules d'une ligne (et donc l'ensemble des colonnes) doivent être égale à la largeur totale du tableau...
Deux options supplémentaire pour la présentation des tableaux :
CELLSPACING ("espace de cellule" en anglais) et CELLPADDING ("remplissage de cellule")
* <TABLE CELLSPACING="x"> où x représnte l'espace entre les cellules.
* <TABLE CELLPADDING="y"> où y repréente l'espace entre la bordure de la cellule et son contenu.
Mettre de la couleur dans son tableau :
Définir la couleur des bordures :
<TABLE BORDERCOLOR="#0000FF" BORDER="1"> définit la couleur de la bordure. A noter au passage, l'ajout de BORDER="1" (sinon le tableau n'aura pas de bordure !)
On peut aller encore plus loin, en ajoutant un effet de relief :
<TABLE BORDERCOLORLIGHT="#FFFFFF" BORDERCOLORDARK="#0000FF" BORDER="5">
En reprenant notre exemple, cela donne :
code :
<table bordercolorlight="#FFFFFF" bordercolordark="#0000FF" border="5">
<tr><td>1ère ligne </td><td> 2ème cellule </td></tr>
<tr><td>2ème ligne </td><td><center>2/2</center></td></tr>
<tr><td>3ème ligne</td><td><center>2/3</center></td></tr>
</tbody></table>
résultat :
| 1ère ligne | 2ème cellule |
| 2ème ligne | |
| 3ème ligne |
Définir la couleur des cellules :
Ici on utilise le code suivant : BGCOLOR="#0000FF" (BG est la contraction de "Background" = arrière plan)
* <TABLE BGCOLOR="#0000FF"> définir la couleur de fond de tout le tableau
* <TR BGCOLOR="#0000FF"> définit la couleur de fond d'une ligne
* <TD BGCOLOR="#0000FF"> définit la couleur de fond d'une cellule
Ce qui donne dans notre exemple :
code :
<table border="5" bordercolordark="#0000FF" bordercolorlight="#FFFFFF">
<tr><td>1ère ligne </td><td> 2ème cellule </td></tr>
<tr bgcolor="#ff0000><td>2ème ligne </td><td><center>2/2</center></td></tr>
<tr><td>3ème ligne</td><td bgcolor="#0000ff"><center>2/3</center></td></tr>
</tbody></table>
résultat :
| 1ère ligne | 2ème cellule |
| 2ème ligne | |
| 3ème ligne |
Voilà ! tout est là pour faire de jolis tableaux !!!!........
Il faut avant tout beaucoup de patience pour y arriver... Je ne vous dis pas combien de temps j'ai mis pour écrire rien que cette note, puisque toutes les balises mises ici ont été vérifiées au fur et à mesure, et comme je l'ai dis au début de cette note, RIEN NE MARCHE DU PREMIER COUP !!!!.....
Si lorsqu'on pratique le html, tout est important, il ne faut rien oublier, ici pour les tableaux c'est plus vrai que jamais ! Faire attention au moindre signe sinon, tout peut etre décalé ou dans tous les sens !..... pour résumer... il faut être trés RIGOUREUX !
Patient et rigoureux ! Ouais ! ça résume bien !!!!.....
A vos tableaux maintenant !! ^^
-Ce post sera mis à jour au fur et à mesure si besoin... -