IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Les tableaux>Créer des tableaux Intérêt : Les tableaux en HTML peuvent servir à : - présenter/organiser.

Présentation au sujet: "IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Les tableaux>Créer des tableaux Intérêt : Les tableaux en HTML peuvent servir à : - présenter/organiser."— Transcription de la présentation:

1 IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Les tableaux>Créer des tableaux Intérêt : Les tableaux en HTML peuvent servir à : - présenter/organiser des données - organiser le contenu d'une page web Colonne 1 Colonne 2 Cellule 1 Cellule 2 TableaudeBase.html Syntaxe :

2 IUT SRC Année 2004/2005Antonio Capobianco 2 Explication définit le tableau crée un quadrillageTableauQuadrille.htmlTableauQuadrille.html introduit une nouvelle ligne définit une cellule d'entête (table header) définit une cellule de données (table data) ! Le nombre de cellules pour chaque ligne doit être identique. On peut créer des cellules vides ( ) mais dans ce cas certains navigateurs ne les afficheront pas. TableauCelluleVide0.html Dans ce cas utilisez   TableauCelluleVide1.html HTML>Les tableaux>Créer des tableaux

3 IUT SRC Année 2004/2005Antonio Capobianco 3 Prédéfinir des colonnes Intérêt : diminuer les temps d'affichage Norme introduite par HTML 4.0 Syntaxe 1 : TableauPredef.html Syntaxe 2 : TableauPredef1.html HTML>Les tableaux>Prédéfinir des tableaux

4 IUT SRC Année 2004/2005Antonio Capobianco 4 HTML>Les tableaux>Entêtes, etc... Entêtes de tableaux On peut diviser un tableau en trois parties logiques : Entête : Pied de tableau : (doit être noté avant le corps) Corps : TableauEnTete.html Légendes : L'élément CAPTION permet de placer une légende à gauche, à droite, au-dessus ou au- dessous d'un tableau (selon que l'attribut align a la valeur left, right, top ou bottom). Syntaxe: Légende A B C D

5 IUT SRC Année 2004/2005Antonio Capobianco 5 HTML>Les tableaux> Mise en forme Définitions des espacements : Cellpadding : espace entre le contenu et le bord de cellule Cellspacing : espace entre les cellules Syntaxe :

6 IUT SRC Année 2004/2005Antonio Capobianco 6 HTML>Les tableaux> Mise en forme Définition du quadrillage : rules="none" Pas de traits de séparation rules="basic" Traits entre l'en-tête, le corps et la fin du tableau rules="rows" Traits horizontaux entre chaque lignes rules="cols" Traits verticaux entre chaque colonne rules="all" Quadrillage complet rules="groups"Pas de séparation entre les colonnes Syntaxe : Règles pour la bordure extérieure : frame="box" Bordure entourant le tableau frame="void" Aucune bordure affichée frame="above" Bordure supérieure apparente frame="below" Bordure inférieure apparente frame="hsides" Bordures horizontales apparentes frame="vsides" Bordures verticales apparentes etc... Syntaxe :

7 IUT SRC Année 2004/2005Antonio Capobianco 7 HTML>Les tableaux> Mise en forme Fixer la largeur des cellules : Pour les mentions de taille des tableaux, deux types de notation acceptées : - en nombre de pixel - en % <table width=" " Détermine la largeur du tableau par rapport à l'espace disponible dans l'élément parent (le corps du document, une cellule de tableau…) <table height=" "Détermine la hauteur du tableau par rapport par rapport à l'espace disponible dans l'élément parent <th width=" " <td width=" "Détermine la largeur d'une cellule d'un tableau et par conséquent la largeur de la colonne concernée <th ht=" " <td heieighght=" "Détermine la hauteur d'une cellule d'un tableau et par conséquent la hauteur de la ligne concernée

8 IUT SRC Année 2004/2005Antonio Capobianco 8 Alignement des cellules : Les mentions d'alignement permettent de situer le contenu d'une cellule horizontalement et verticalement Les mentions d'alignement sont applicables sur des cellules individuelles, des lignes, etc... Syntaxe : <th align=" " Commande d'alignement horizontal Valeurs autorisées: left, right, center <th valign=" " Commande d'alignement vertical Valeurs autorisées: top, bottom, middle ! La commande <table align=" " définit l'alignement du tableau dans l'élément parent HTML>Les tableaux> Mise en forme

9 IUT SRC Année 2004/2005Antonio Capobianco 9 Couleurs de fond : <td bgcolor=" " HTML>Les tableaux> Mise en forme

10 IUT SRC Année 2004/2005Antonio Capobianco 10 Fusionner des cellules sur une ligne : On utilise la commande colspan Synatxe: Contenu de la cellule ! La mention n'est valide que si le tableau contient au moins autant de colonne que l'entier entré en argument HTML>Les tableaux> Relier des cellules Fusionner des cellules sur une colonne : On utilise la commande rowspan Synatxe: Contenu de la cellule Définition de la cellule voisine ! En combinant ces deux commandes il est possible d'étendre un cellule sur plusieurs lignes et plusieurs colonnes