Recherche
Publicités
Question aléatoire
Comment activer ou désactiver une barre d'outils ?

Publicités
Qui est en ligne
26 Personne(s) en ligne (7 Personne(s) connectée(s) sur Articles)

Utilisateur(s): 0
Invité(s): 26

Plus ...
Tutorial : HTML 5 : Les tableaux.
Publié par Stéphane le 28/02/2005 20:50:00 (32091 lectures)
Tutorial

Voilà le cinquième tutorial html, il concerne les tableaux et leur mise en page.

Bonne lecture.



  1. Les attributs de la balise <table>

    1. align

    2. bgcolor

    3. border

    4. cellpadding

    5. cellspacing

    6. frame

    7. rules

    8. width


  2. Les attributs de la balise <tr>

    1. align

    2. bgcolor

    3. valign



  3. Les attributs des balises <th> et <td>

    1. align

    2. bgcolor

    3. colspan

    4. height

    5. nowrap

    6. rowspan

    7. valign

    8. width



  4. Les attributs de la balise <caption>

    1. align


  5. Exemple


Voici ce que l'on est suceptible de trouver dans un tableau :





<table>
<caption>Mon Titre</caption>
<tr>
<th>En-tête</th>
<td>Contenu de la cellule</td>
</tr>
</table>


Explications:


La création d'un tableau se fait grâce à la balise conteneur <table>.
Cette balise contient le tableau composé de lignes puis de cellules.

Pour créer une ligne, on utilise la balise du type conteneur <tr>. Et c'est à l'intérieur
de cette dernière que ce trouvera les cellules.

Les cellules peuvent être de deux types :

  • D'en-tête, avec la balise du type conteneur <th>. Pour indiquer le titre d'une colonne ou d'une ligne.

  • La balise du type conteneur <td>, qui reçoit les
    données à afficher.


On peut aussi donner un titre au tableau. Il sera contenu dans la balise du type conteneur
<caption>.




<table>
<caption>Quelques images...</caption>
<tr>
<th>Description</th>
<th>url</th>
<th>Aperçu</th>
<tr>
<th>Une autre pinte de bière</th>
<td>http://www.astucesinternet.com/upload ... d4e4c2e742.gif</td>
<td><img src="http://www.astucesinternet.com/uploads/smil3dbd4e4c2e742.gif"></td>
</tr>
<tr>
<th>Lève les bras</th>
<td>http://www.astucesinternet.com/upload ... 27a66a51d3.gif</td>
<td><img src="http://www.astucesinternet.com/uploads/smil42627a66a51d3.gif"></td>
</tr>
<tr>
<th>Frotte son front</th>
<td>http://www.astucesinternet.com/upload ... 27af3a68be.gif</td>
<td><img src="http://www.astucesinternet.com/uploads/smil42627af3a68be.gif"></td>
</tr>
<tr>
<th>Se gausse</th>
<td>http://www.astucesinternet.com/upload ... 2817187d45.gif</td>
<td><img src="http://www.astucesinternet.com/uploads/smil4262817187d45.gif"></td>
</tr>
</table>





Résultat:



























Quelques images...
DescriptionurlAperçu
Une autre pinte de bièrehttp://www.astucesinternet.com/uploads/smil3dbd4e4c2e742.gif
Lève les brashttp://www.astucesinternet.com/uploads/smil42627a66a51d3.gif
Frotte son fronthttp://www.astucesinternet.com/uploads/smil42627af3a68be.gif
Se gaussehttp://www.astucesinternet.com/uploads/smil4262817187d45.gif




Les balises utilisées par les tableaux possèdent plusieurs arguments, dont certains en commun avec les autres balises.




Les attributs de la balise <table>



align (alignement horizontal)


L'attribut align définit l'alignement horizontal du tableau sur le document. Trois valeurs peuvent s'appliquer :

  • left pour le placer à gauche (option par défaut).

  • center pour le centrer.

  • right pour le placer à droite.






bgcolor (couleur d'arrière plan)


L'attribut bgcolor définit la couleur d'arrière plan à utiliser. Reportez-vous à la page des couleurs.





border (bordure du tableau)


L'attribut border permet de spécifier une certaine épaisseur de bordure autour du tableau.
Elle doit être exprimée en pixels.




cellpadding (espacement dans la cellule)


L'attribut cellpadding définit l'espacement entre le contenu d'une cellule et ses bords. La valeur
est exprimée en pixels.




cellspacing (espacement entre les cellules)


cellspacing définit l'espacement à laisser entre chaque cellules d'un tableau. La valeur
est exprimée en pixels.




frame (emplacement de la bordure)


L'attribut frame permet de définir l'emplacement de la bordure. Les valeurs possibles sont :

  • above bordure en haut

  • below bordure en bas

  • box bordure sur les quatres cotés

  • hsides bordure en haut et en bas

  • lhs bordure à gauche

  • rhs bordure à droite

  • void aucune bordure (option par défaut)

  • vsides bordure à gauche et à droite






rules (bordures intérieures)


rules permet de spécfier l'aspect des bordures internes au tableau, c'est à dire les bordures
entre les cellules. Les valeurs possibles sont :

  • all entre les lignes et les colonnes

  • cols entre les colonnes

  • none aucune bordure (option par défaut)

  • rows entre les lignes






width (largeur du tableau)


L'attribut width définit la largeur permise au tableau. La valeur peut être donnée en
pixels ou bien en pourcentage.




Les attributs de la balise <tr>



align


Trois valeurs peuvent s'appliquer :

  • left

  • center

  • right






bgcolor


Même fonction que la balise <table> mais pour une seule ligne.




valign


Les valeurs possibles sont :

  • top alignement en haut

  • middle alignement au centre

  • bottom alignement en bas






Les attributs des balises <th> et <td>



align


align Trois valeurs peuvent s'appliquer :

  • left à gauche

  • center au centre

  • right à droite






bgcolor


L'attribut bgcolor définie la couleur d'arrière plan à utiliser d'une ligne.




colspan (groupement de colonnes)


L'attribut colspan permet de réaliser des groupements de colonnes. Très utile lorsqu'une cellule
est inoccupée. La valeur est composée du nombre de colonnes à regrouper.




height (hauteur de la cellule)


Cet attribut spécifie la hauteur de la cellule en pixels, et ceci pour toutes les cellules d'une ligne.




nowrap (pas de rupture de ligne)


L'attribut nowrap précise qu'il ne doit pas y avoir de rupture de ligne dans la cellule
où il est spécifié.




rowspan (groupent de lignes)


L'attribut rowspan est le complément de colspan. Il permet de grouper des lignes. La
valeur est constituée du nombre de lignes à regrouper.




valign


L'attribut valign définie l'alignement vertical à l'intérieur d'une cellule. Trois valeurs peuvent s'appliquer :

  • top en haut

  • middle au milieu

  • bottom en bas






width (largeur de la cellule)


L'attribut width permet de définir la largeur de la cellule en pixels, et cela pour toute la colonne.




Les attributs de la balise <caption>



align (alignement du titre autour du tableau)


La balise <caption> ne possède que l'attribut align. Cet attribut permet de spécifier l'alignement du titre autour du tableau horizontalement
et verticalement. Quatre valeurs sont utilisables :

  • top centré, au dessus du tableau

  • bottom centré, au dessous du tableau

  • left à gauche, au dessus du tableau

  • right à droite, au dessus du tableau






Exemple



<table border="1">
<caption align="center">Smileys</caption>
<tr bgcolor="#ff0000">
<th rowspan="2">Description</th>
<th rowspan="2">Poids</th>
<th rowspan="2">BBcode</th>
<th colspan="2">Url</th>
<th rowspan="2">Aperçu</th>
</tr>

<tr bgcolor="#ff0000">
<th>Entiere</th>
<th>Courte</th>
</tr>

<tr bgcolor="#ffffff" align="center">
<th bgcolor="#ff0000">Une autre pinte de bière</th>
<td >8368 octets<br></td>
<td>:pint:</td>
<td>http://www.astucesinternet.com/upload ... d4e4c2e742.gif</td>
<td>-</td>
<td align="right"><img src="http://www.astucesinternet.com/uploads/smil3dbd4e4c2e742.gif"></td>
</tr>

<tr bgcolor="#ffffff" align="center">
<th bgcolor="#ff0000">Lève les bras</th>
<td>1936 octets</td>
<td>:banzai:</td>
<td>http://www.astucesinternet.com/upload ... 27a66a51d3.gif</td>
<td>-</td>
<td align="right"><img src="http://www.astucesinternet.com/uploads/smil42627a66a51d3.gif"></td>
</tr>

<tr bgcolor="#ffffff" align="center">
<th bgcolor="#ff0000">Frotte son front</th>
<td>1989 octets</td>
<td>:Teeheehee1:</td>
<td>http://www.astucesinternet.com/upload ... 27af3a68be.gif</td>
<td>-</td>
<td align="right"><img src="http://www.astucesinternet.com/uploads/smil42627af3a68be.gif"></td>
</tr>

<tr bgcolor="#ffffff" align="center">
<th bgcolor="#ff0000">Se gausse</th>
<td>2013 octets</td>
<td>:mdr:</td>
<td>http://www.astucesinternet.com/upload ... 2817187d45.gif</td>
<td>./uploads/smil4262817187d45.gif</td>
<td align="right"><img src="http://www.astucesinternet.com/uploads/smil4262817187d45.gif"></td>
</tr>

<tr bgcolor="#ffffff" align="center">
<th bgcolor="#ff0000">Bou boxe :p</th>
<td>4271 octets</td>
<td>:Boxe:</td>
<td colspan="2">http://www.astucesinternet.com/upload ... 27db1937c4.gif</td>
<td align="right"><img src="http://www.astucesinternet.com/uploads/smil42627db1937c4.gif"></td>
</tr>
</table>




Le tableau.




Autres articles
16/10/2014 20:04:56 - Mise à jour des produits Microsoft (Octobre 2014)
15/10/2014 21:13:08 - Firefox 33 disponible en téléchargement
13/09/2014 21:40:15 - IDPhotoStudio - Imprimez des planches de photos d'identité
10/09/2014 19:00:00 - Mise à jour des produits Microsoft (Septembre 2014)
13/08/2014 20:23:11 - Mise à jour des produits Microsoft (Août 2014)
23/07/2014 21:25:07 - Firefox 31 disponible en téléchargement
17/07/2014 21:26:39 - Google Chrome disponible en version 36
09/07/2014 21:18:47 - Mise à jour des produits Microsoft (Juillet 2014)
11/06/2014 21:18:59 - Mise à jour des produits Microsoft (Juin 2014)
11/06/2014 19:54:04 - Firefox 30 disponible en téléchargement

Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Auteur Commentaire en débat
Publicités
Rejoignez nos forums
Forums de discussionRejoignez notre communauté en vous inscrivant gratuitement sur notre forum de discussion. Vous pourrez participer à la vie du forum et aider les autres membres en répondant à leurs questions.Toute contribution est la bienvenue !
Posez vos questions
Logo entraide informatiqueVous avez une question concernant l'un de nos articles ? Vous avez un problème informatique à nous soumettre ? Rendez-vous dans notre forum de discussion, rubrique Entraide Informatique.

Lien direct : Forum d'entraide informatique