1. Qu'est-ce que c'est ?
Une tables c'est avant tout un cadre dans le quel on peut mettre des lignes et des colones, vous voyez ce que c'est Excel, ben c'est pas ca ! :)
Les tables c'est ce que j'utilise depuis le debut de ce tuto pour afficher le code, aligner du texte, centrer tout dans la page, bref, il y'en a partout. Bien que les deux sujet seront aborder dans ce meme chapitre, il ne faut pas confondre Frame et Table. Une Frame contient avant tout une page HTML, une table contient quand a elle du code HTML, donc vous ne pourrez pas afficher une nouvelle page a l'interieur d'une cellule d'un tableau sans passer par une Frame. Maintenant qu'on sait ce que ca represente qu'est-ce que ca fait ??? Resumer les 12 mots les plus courant du vocabulaire des filles de 14 ans :
Faire des jolies couleur en plein milieu de l'ecran alors qu'on a rien demandé : Faire voler du texte bizarement alors que tout le monde le sait, voler est impossible !
Bon pour resumer si on se debrouille bien on peut faire ce qu'on veut, ou presque, avec les tables. 2. Fonctionnement d'une Table
Je l'ai dit tout a l'heure une table c'est un ensemble de colonnes et de lignes, ce qui forme des cellules, logique :
Et si on regardais ca de plus pres ? La balise pour faire une table est (roulement de tambours...) <table>, pour le moment on ne va pas s'interesser a ses attributs parce que c'est pas la que ca se passe. Pour creer une ligne il faut utiliser a nouveau une balise juste apres ladeclaration de <table>, la balise pour les lignes est <tr>, de la meme maniere pour les colone, la balise en question est <td>. Le truc c'est qu'il faut toujours creer les deux en meme temps, pour que la table sache combien de lignes et combien de colones elle devra gerer. On commence par un exemple simple, le tableau a une cellule :
L'attribut border est volontaire car par defaut la table n'a pas de bordure et on ne verait donc pas sa taille dans la page. Bon toujours est il qu'il y a une declaration de <tr> et une declaration de <td>, ainsi 1 * 1 = 1 donc on aura une cellule :). PS : pensez bien ecrire d'abord <tr> puis <td> et de fermer tout dans l'autre sens. Je vais donner trois autres exemples et la, normalement, vous aurez tout compris sur le principe des cellules :
Bon on passe a quelque chose de bien moin sympa c'est les attributs colspan et rowspan, eux ils sont la pour nous aider a faire ca :
Bon j'explique simplement : pour colspan il s'agit d'un attribut qui va dire a la table que la cellule courante va prendre "n" cellules de large. De la meme manier, rowspan va prendre "n" cellules de haut, a nouveau je vous conseil de faire plein de teste pour comprendre comment ca marche. 3. Attributs des tables
On peut faire plein de chose avec les attributs des tables, je vais donc en presenter quelque un de tres interessant :
Je vais presenter cellpadding et cellspacing car ils sont tres pratique :
Evidemment tout les attributs sont toujours combinables les un avec les autres :). 4. Attributs des lignes et colonnes
Je vais egalement lister quelque attributs pratique pour les balises <td> et <tr> :
Bon je vais donner encore des exemples :
Un dernier pour la route :
Apres toutes ces emotions, une conclusion s'impose: Les tables sont pratiques et doivent etre presente pour tout site qui desire etre presentable, je vous invite des a present de creer vos propre structure de page, sachant qu'en plus, il n'y a pas de limite d'imbrication : dans votre balise <td> vous pouvez a nouveau declarer une nouvelle <table> et ainsi de suite :) 5. Les iframes
On va commencer simple avec les <iframe>. Imaginez avoir votre page Web, et a l'interieur afficher une autre page Web. Quand je clique sur un lien je definis comme cible (target) "main". Pour ce faire, il faut declarer une <iframe> là ou l'on shouaite la voire apparaitre (meme dans une cellule d'un tableau, ce que je ferai pour mes exemples). Exemple :) :
C'est chouette, mais le probleme avec ca c'est qu'on ne peut pas modifier le contenu :/. Pour rendre cela possible il faut attribuer un nom a l'<iframe> grace a l'attribut name puis creer un lien qui aura pour cible (target) notre petite <iframe> :
Bon je pense que le plus important est dit a ce sujet, alors je vais a present decrire les autres attributs qui nous aiderons dans le future :
Vous ne verrez sans doute pas la difference entre "auto" et "yes", par defaut une <iframe> est en "auto", ce qui sert a afficher les barres de scroll seulement si elle sont necessaire, tant dis ce que "yes" les affiches dans tout les cas. Et enfin, quelque trucs et astuces
|