Comment Ca Marche l'informatique ?
 
 Comment Ça Marche - Articles - HTML - Les tableaux
 Accueil
 Forums
 Astuces
 Guide d'achat
 
   
 
 
Livres Comment ça marche?
Tout sur le hardware PC
Tout sur la sécurité
Tout sur le webmastering
Présentation des trois premiers ouvrages de la collection CommentCaMarche.net
Page d'accueil
Ajouter aux favoris
Contribuer à cet article
Ecrire à Jean-Francois Pillou
HyperText Markup Language (HTML)
Introduction
Balises
Structure du document
Caractères spéciaux
Style
Balises de style
Structure
Niveaux de titre
Paragraphes
Listes
Tableaux
Liens hypertextes
Images
Arrière-plan
Table des couleurs
Formulaires
Méta Tags
Cadres (frames)
A lire aussi
Webmastering
Langages du web
Nom de domaine
Hébergement
Référencement
Droit d'auteur
Version 2.0.6
 
Page précédente Page suivante Retour à la page d'accueil

Utilisation de tableaux

Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes.

Un tableau doit respecter les quelques règles suivantes :

  • Le tableau est encadré par les balises <TABLE> et </TABLE>.
  • Le titre du tableau est encadré par <CAPTION> </CAPTION>
  • Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par ligne du tableau).
  • Les cellules d'en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête de tableau)
  • Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau)

Voici un exemple de tableau HTML :

<TABLE BORDER="1">         
  <CAPTION> Voici le titre du tableau </CAPTION>        
  <TR>       
    <TH> Titre A1 </TH> 
    <TH> Titre A2 </TH> 
    <TH> Titre A3 </TH> 
    <TH> Titre A4 </TH> 
  </TR>       
  <TR>       
    <TH> Titre B1 </TH>
    <TD> Valeur B2 </TD> 
    <TD> Valeur B3 </TD> 
    <TD> Valeur B4 </TD> 
  </TR>       
</TABLE> 

Ce code donne le résultat suivant:

Voici le titre du tableau
Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4

Les attributs

Attribut Balises auxquelles il s'applique Valeur Effet Visuel
ALIGN THEAD
TBODY
TH
TR
TD
CENTER

LEFT

RIGHT

JUSTIFY

centré

Gauche

Droite

Justifié

CAPTION TOP

BOTTOM

Au-dessus

En-dessous

VALIGN
(alignement vertical)
THEAD
TBODY
TH
TR
TD
TOP

MIDDLE

BOTTOM

En haut

Au milieu

En bas

BORDER=n TABLE   Taille de la bordure
CELLPADDING=n TABLE   Espacement de n pixels entre le contenu des cellules et la bordure
CELLSPACING=n TABLE   Epaisseur de la grille intérieure
FLOAT TABLE RIGHT

LEFT

Position du texte qui suivra </TABLE>
COLS=n TABLE   Nombre de colonnes
FRAME

(contrôle les éléments individuels d'encadrement du tableau)

TABLE NONE

TOP

BOTTOM

TOPBOT

SIDES

ALL

Aucun

au-dessus

En bas

Tout en haut

Sur les cotés

Tous

RULES

(contrôle les éléments de la grille des cellules)

TABLE NONE

BASIC

ROWS

COLS

ALL

Aucun

basique

Ligne

Colonne

Tous

COLSPAN THEAD
TBODY
TH
TR
TD
  Débordement des cellules sur les colonnes adjacentes
ROWSPAN THEAD
TBODY
TH
TR
TD
  Débordement des cellules sur les lignes adjacentes


Page suivante

  Ce document intitulé « HTML - Les tableaux » issu de Comment Ça Marche est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.