admin

Tuto HTML
Inscription
<Concept des="Tables">

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 :
kikou lol mdr xD
trop kiff gracon pouf
hihihi portable fringue sephora

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 !
Mais regardez, je vole, c'est incroyable ! Hein ? Qui vole ? Lui, la haut :/


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 :
Code :
Resultat :
<table border="3">
   <tr><td>
      Texte
   </td></tr>
</table>
Texte

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 :
Code :
Resultat :
<table border="3">
   <tr><td>
      Texte 1
   </td><td>
      Texte 2
   </td></tr>
</table>
Texte 1 Texte 2
<table border="3">
   <tr><td>
      Texte 1
   </td></tr>
   <tr><td>
      Texte 2
   </td></tr>
</table>
Texte 1
Texte 2
<table border="3">
   <tr><td>
      Texte 1
   </td><td>
      Texte 2
   </td></tr>
   <tr><td>
      Texte 3
   </td><td>
      Texte 4
   </td></tr>
</table>
Texte 1 Texte 2
Texte 3 Texte 4

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 :
Code :
Resultat :
<table border="3">
   <tr><td colspan="2">
      Titre
   </td></tr>
   <tr><td>
      Texte
   </td><td>
      Texte
   </td></tr>
</table>
Titre
Texte Texte
<table border="3">
   <tr><td rowspan="2">
      Titre
   </td><td>
      Texte
   </td></tr>
   <tr><td>
      Texte
   </td></tr>
</table>
Titre Texte
Texte

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 :

  • border : on la vu tout a l'heure il permet de mettre ou non une bordure autour de la table.
  • width : definie la largeur de la table (comme le width pour les images).
  • height : idem que width mais pour la hauteur.
  • cellpadding : ha ! tres interessent, il permet de definir la distance entre la bordure d'une cellule et son contenue. (0 a inf)
  • cellspacing : encore tres interessant, il permet de definir la distance entre les cellules. (0 a inf)
  • background : pour mettre une image en arriere plan d'une table.
  • bgcolor : pour mettre une couleur en arriere plan d'une table.
  • align : comme l'align pour les images.

    Je vais presenter cellpadding et cellspacing car ils sont tres pratique :
    Code :
    Resultat :
    <table cellspacing="0" border="3">
       <tr><td>
          Texte
       </td></tr>
    </table>
    Texte
    <table cellspacing="10" border="3">
       <tr><td>
          Texte
       </td></tr>
    </table>
    Texte
    <table cellpadding="0" border="3">
       <tr><td>
          Texte
       </td></tr>
    </table>
    Texte
    <table cellpadding="10" border="3">
       <tr><td>
          Texte
       </td></tr>
    </table>
    Texte

    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> :
  • align : Permet d'aligner horizontalement le contenu de la cellule, par defaut il est aligné a gauche (left).
  • valign : Permet d'aligner verticalement le contenu de la cellule, par defaut il est centrer (middle).
  • bgcolor : idem que pour la <table>, mais localisé.
  • background : idem que pour la <table>, mais localisé.

    Bon je vais donner encore des exemples :
    Code :
    Resultat :
    <table width="100" height="100" border="3">
       <tr><td>
          Texte
       </td></tr>
    </table>
    Texte
    <table width="100" height="100" border="3">
       <tr><td valign="top">
          Texte
       </td></tr>
    </table>
    Texte
    <table width="100" height="100" border="3">
       <tr><td valign="bottom">
          Texte
       </td></tr>
    </table>
    Texte

    Un dernier pour la route :
    Code :
    Resultat :
    <table bgcolor="#ff000" cellpadding="10" border="1">
       <tr><td valign="top" background="img/image.gif">
          <font color="#ffffff">Texte 1</font>
       </td><td align="right" bgcolor="#00ff00">
          Texte 2
       </td></tr>
       <tr><td valign="bottom" bgcolor="#0000ff">
          <u>Texte 3</u>
       </td><td>
          Texte 4
       </td></tr>
    </table>
    Texte 1 Texte 2
    Texte 3 Texte 4

    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 :) :
    Code :
    Resultat :
    <iframe></iframe>
    Je reconnais qu'elle est tres vide :/, rajoutons lui une page comme base grace a src :)
    <iframe src="wppage.html"></iframe>

    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> :
    Code :
    Resultat :
    <a href="wppage.html" target="ma_frame"> <br> <iframe name="ma_frame"></iframe> Cliquez moi !

    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 :
  • height : comme toujours, defini la hauteur de l'iframe.
  • width : idem pour la largeur.
  • align : alignement horizontal.
  • src : cible au chargement de la frame.
  • id : attribut un ID.
  • name : attribut un nom.
  • marginheight : definie la hauteur de la marge pour le contour de l'iframe.
  • marginwidth : definie la largeur de la marge pour le contour de l'iframe.
  • frameborder : c'est comme border mais pour la frame ^^.
  • scrolling : tres interessant, peut prendre 3 valeurs :
    Code :
    Resultat :
    <iframe src="wppage.html" scrolling="no"></iframe>
    <iframe src="wppage.html" scrolling="yes"></iframe>
    <iframe src="wppage.html" scrolling="auto"></iframe>

    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

    Les Liens         Sommaire         Annexe




  • 11126 visiteurs depuis 03/2005

    Il y a actuellement 1 visiteur
    Dont 0 membre