11. Les Tables

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:

• ../../code/hxtml-intro/table_test.html

 

<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>

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"

• définit le début et la fin d'une ligne du tableau.

<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"

• servent à définir des cellules dans une ligne

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: