PREVIOUS UP   Technologies Internet et Education, © TECFA
  11. Les Tables

11. Les Tables

Note: On présente ici les tables "simples" [section à refaire]

Exercice

11.1 Utilisation

Il existe des outils et des filtres qui permettent de générer facilement des tables.

Il reste cependant utile de connaître la syntaxe des tables pour être capable de modifier les tables produites à l'aide d'un assistant.

Les tables sont utiles pour:

Exemple 11-1: Une table simple

 

<table border="1">
		<tr>
			<td>options:</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td>-a</td>
			<td>tous les fichiers</td>
		</tr>
			<td></td>
			<td>-l</td>
			<td>taille, date et permissions</td>
		</tr>
		<tr>
			<td></td>
			<td>-r</td>
			<td>affichage du contenu des sous-r&eacute;pertoires</td>
		</tr>
		<tr>
			<td></td>
			<td>-t</td>
			<td>trier selon la date</td>
		<tr>
			<td>exemple:</td>
			<td>(1) ls -lat *.text</td>
			<td>affiche tous les fichiers &quot; *.text &quot; dans 
			un r&eacute;pertoire, tri&eacute;s selon la date.</td>
		</tr>
</table>

Exemple 11-2: une table à cellules occupant plus d'une ligne ou colonne:

 

<table border="2">
   <tr>
    <th rowspan="2"></th>
    <th colspan="2">average</th>
    <th rowspan="2">other<br />category</th>
   </tr>
   <tr>
    <th>height</th>
    <th>weight</th>
   </tr>
   <tr>
    <th align="left">males</th>
    <td>1.9</td>
    <td>0.003</td>
   </tr>
   <tr>
    <th align="left">females</th>
    <td>1.7</td>
    <td>0.002</td>
   </tr>
  </table>

11.2 La spécification d'une table

Une table simple ("table") contient des lignes ("tr") qui contient à son tour des cellules/colonnes ("td"). En XHTML il existe de balises supplémentaires !

Le marqueur "table" définit le début et la fin d'une table

<table> ... </table>

A. Paramètres de <table>:

Le paramètre BORDER

s'insère dans le marqueur de début de table et permet de spécifier la largeur des bordures.

border="n" où n est un nombre de pixels

<table border="4"> ... </table>

Le paramètre CELLSPACING

permet de contrôler l'espacement entre deux cellules

cellspacing="n" où n est un nombre de pixels

<table cellspacing="4"> ... </table>

Le paramètre CELLPADDING

sert à fixer la distance se trouvant entre le bord d'une cellule et le texte qui s'y trouve.

cellpadding="m" où m est un nombre de pixels

<table cellpadding="4"> ... </table>

 

 

Le paramètre WIDTH

permet de forcer la largeur et la hauteur qu'occupe la table sur la page. La valeur n peut être exprimée en pixels ou en pourcentages.

width="k"

<table width="400"> ... </table>

width="l%"

<table width="70%"> ... </table>

Résumé: paramètres du marqueur "table"

 

B. Le marqueur "TR"

<tr> ... </tr>

Paramètres de TR (s'appliquent aussi aux cellules TD et TH)

Le paramètre ALIGN

peut prendre des valeurs. Il contrôle l'alignement horizontal du texte à l'intérieur de toutes les cellules d'une ligne s'il est spécifié dans un marqueur <tr> ou à l'intérieur d'une seule cellule s'il se trouve dans les marqueurs <td> ou <th>.

align="left ou center ou right"

<tr align=left>
(toutes les colonnes contenues dans cette ligne seront alignées à gauche)

Le paramètre VALIGN

contrôle l'alignement vertical du texte à l'intérieur des cellules.

valign="top ou middle ou bottom ou baseline"

<tr align=top> (toutes les colonnes contenues dans cette ligne seront alignées vers le haut)

C. Les marqueurs "TD" et "TH"

Le marqueur "td" (table data en anglais) définit le début et la fin d'une cellule.

Le marqueur "th" s'utilise comme "td" mais le résultat à l'affichage est un texte mis en évidence (apparaissant par exemple en gras)

<td> ... </td>

Paramètres s'appliquant aux cellules:

Le paramètre ROWSPAN

détermine le nombre de lignes qu'une cellule occupe et s'introduit à l'intérieur des marqueurs <td> ou <th>. L'on peut ainsi étirer une cellule vers le bas.

Lorsque vous définissez les cellules de la ligne suivante (dans le prochain marqueur <tr>) il ne sera pas nécessaire de redéfinir cette cellule.

rowspan="n" où n est un nombre de lignes

<td rowspan=2> (pour une cellule qui occupe deux lignes)

Le paramètre COLSPAN

permet de définir une cellule qui occupe plusieurs colonnes. Le résultat est l'étirement de la cellule en largeur.

colspan="m" où m est un nombre de cellules

<td colspan=2>

Voir l'exemple une table à cellules occupant plus d'une ligne ou colonne:


PREVIOUS UP -- TIE