Les tableaux

Top page

Utilités

Démonstrations

Exemples

Tutoriels

Lexique

Cours E72b

Utilités

Présentation d'un tableau de données, à la manière d'Excel

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

Mise en page : alignement des images et du texte

Sites intéressants		Icones
MTV
Epicurious

Mise en page complète d'une page (p. ex.: une colonne vide à gauche, et colonne de droite contient les informations). Voir la page des ressources du cours.

Création d'une barre de navigation (comme celle-ci):

Démonstrations

Tableau de Base (TDB) :

Tableau à 3 lignes et 2 colonnes (border = 1; cell spacing=1; cell padding=1)

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : border = 0

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB avec: 100% de la fenêtre; titres de colonnes centrés en largeur

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : largeur de 500 pixels

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : cell spacing=10

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : cell padding=10

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : fond de couleur

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : alignement à droite

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

TDB : alignement horizontal

Sexe (rangée alignée à gauche)	Nombre d'étudiants
Féminin (rangée alignée au centre)	52
Masculin (rangée alignée à droite)	48

TDB : alignement vertical dans la colonne de droite

Voici une cellule avec un peu de blablablabla pour faire en sorte que le texte puisse se placer correctement à la vertical	Alignement vertical: top
Voici une cellule avec un peu de blablablabla pour faire en sorte que le texte puisse se placer correctement à la vertical	Alignement vertical: center
Voici une cellule avec un peu de blablablabla pour faire en sorte que le texte puisse se placer correctement à la vertical	Alignement vertical: bottom

TDB : avec tous les paramètres mélangés

Sexe	Nombre d'étudiants
Féminin	52
Masculin	48

Exemples de mise en page avec tableaux

Page Personnelle de Ph. Lemay

La présentation du site Mémoire du monde

C¦NET : The Computer Network

WebReview: Web Page Design

Tutoriel HTML sur les tableaux

Si vous avez des problèmes d'édition de vos tableaux, peut-etre aurez-vous besoin de travailler les codes HTML directement. C'est un peu de boulot pour apprendre, mais après, cela vous donnera plus de flexibilité pour faire des pages moins standards.

Un premier guide demeure le Manuel HTML du TECFA, et sa partie spécifique sur les tableaux.

Vous pouvez également consulter le tutoriel du TECFA .

Lexique

row : ligne
column : colonne
cell : cellule
border : bordure, cadre
height : hauteur
width : largeur
cell spacing : espacement entre les cellules
cell padding : espacement à l'intérieur des cellules (distance entre le texte et le contour de la cellule)

Philippe Lemay, 3 février 1998