Menu des cours HTML
Il vous intrigue, il vous interpelle, vous en avez besoin, et pour certains vous l'utilisez sans même vous en rendre compte de par un éditeur. Bref, il est temps de mettre les choses au clair et d'apprendre "enfin" l'HTML ... moins courament appellé l'hypertexte markup language.
Nous verrons ici plus précisemment la version 4 de HTML.

Les tableaux

Un tableaux ne sert pas forcément à ranger des données comme cela pourrait porter à le croire. Alors que l'on pourrait penser qu'il ne servent que dans des situations particulières telles que des bilans, des relevés, ou des présentations de chiffres, les tableaux HTML dépassent de loin l'utilisation d'un simple tableau. Pour prendre exemple, la page dans laquelle vous vous trouvez actuellement n'est constituée que de tableaux, ce texte est dans une de ses cellules.

La propriété que révéle tout l'intérêt d'un tableau, c'est que ses bordures peuvent être transparentes. Ils serviront donc à construire un graphisme ou à répartir des éléments de la page, sans pour autant que ça ne se remarque.

Créer un tableaux :

Un tableaux est défini par la balise <table>. Ensuite vient une arborescence de balises qui vont jusqu'à créer une cellule proprement dîtes. Pour diviser <table> en lignes, on utilisera <tr> et pour diviser enfin en cellules (colonnes), on utilisera <td>. L'arborescence des trois et dans l'ordre donné est obligatoire.

Exemple :
<table>

<tr>
<td>Ligne 1</td>
</tr>

<tr>
<td>Ligne 2</td>
</tr>

</table>


Résultat :
Ligne 1
Ligne 2


Comme vous le constatez, les deux lignes sont présentes ; bien que le résultat soit pour l'instant le même que si l'on avait mis un <br> aprés Ligne 1.
Remarque :
Il existe également la balise <th> qui permet de proposer un entête aux cellules (<td>). Les éléments placés dans celle-ci seront mis en valeur par le navigateur, souvent en passant le tout en gras. Cette option n'est pas indispensable, voir inutile et contraignante.
Pour diviser une ligne en plusieurs colonnes, on considére que <tr> représente une ligne qui va contenir différentes colonnes. Celles-ci sont définies par <td> et sont lues de haut en bas pour les afficher de gauche à droite.

Exemple :
<table>

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis

Faire apparaitre les tableaux :

Pour cela, il suffira d'utiliser logiquement l'attribut border de la balise <table> en lui passant en valeur l'épaisseur de la bordure exprimée en pixels.

Exemple :
<table border="2">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis


Comme vous pouvez le remarquer, le navigateur affiche les bordures comme un relief.

<cellspacing> permet de choisir l'espace entre la bordure externe et la bordure interne. Elle prend l'espace exprimé en pixel comme valeur.
Dans cet exemple, j'ai volontairement défini un espace (trop) important pour que vous puissiez vous rendre compte.

Exemple :
<table border="5" cellspacing="30">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis

Dimensionner un tableau :

Pour donner les dimensions d'un tableau, ce sera par logique height (hauteur) et width (largeur) qui seront employés. Les tailles s'exprimeront en pixels ou en % par rapport à la fenêtre définie du client (visiteur). Le % étant interdit pour le height par le W3C.

Exemple :
<table border="2" height="80" width="270">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis
Remarque :
Si les dimensions d'un tableau ne sont précisées, celui-ci prendra alors la forme de ce qu'il contient et collera donc à l'élément le plus long et à celui le plus haut. S'il ne contient que des éléments extrémements petits, il gardera toujours approximativement un peu moins d'un cm de hauteur.
Remarque :
On peut également définir la taille d'une certaine cellule en utilisant width directement dans le <td> concerné. Attention toutes fois à rester cohérent et à bien surveiller que l'addition du width de la colonne 1 et de celui de la colonne 2 corresponde bien à la taille générale du tableau indiquée dans <table>, ceci en pixel ou en %. Si la taille d'une seule colonne est définie, l'autre prendra comme taille la soustraction logique de la colonne précisée à celle de la taille générale du tableau.

Mise en forme graphique d'un tableau :

Contrôler les ombres, ajouter une couleur de fond, définir celle des bordures...



Ajouter une couleur de fond :

Nous avons vu comment ajouter une couleur d'arrière plan à la page, pour les tableaux, c'est idem ! Faîtes appel à votre mémoire, nous utiliserons bgcolor qui cette fois-ci sera un attribut de <table>.

Exemple :
<table border="2" bgcolor="#00FF00">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis



Définir la couleur des bordures :

Cet attribut peut se deviner : nous souhaitons mettre une bordure en couleur. Ors, pour créer une bordure, nous avons vu border, et pour la couleur color. La fusion des deux donne donc l'attribut bordercolor.

Exemple :
<table border="2" bordercolor="#00FF00">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis



Contrôler les ombres :

Nous souhaitons maintenant définir seulement la bordure d'ombre (la foncée). En sachant que dans la langue de Sakespare, clair se dit "light" et que sombre se dit "dark", si on souhaite mettre en couleur la bordure foncée du tableaux, il est encore simple de deviner... border + color + dark = bordercolordark. C'est donc l'attribut bordercolordark que nous emploirons ainsi que son binôme bordercolorlight pour les bordures claires.

Exemple :
<table border="2" bordercolordark="#FF0000" bordercolorlight="#0000FF">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>


Résultat :
Ligne 1Ligne 1 bis
Ligne 2Ligne 2 bis
Remarque :
Tous les attributs de mise en forme vus sont aussi applicables sur une cellule en particulier. Ainsi, vous pourrez définir la couleur de fond d'une certaine ligne en précisant l'attribut bgcolor au <tr> correspondant. Si c'est à une cellule en particulier, une colonne, ce sera à son <td>.

Maintenant un dernier chapitre sur les formulaires, apprennez à les découvrir comme à les maitriser...



<< Précédent - Sommaire - Suivant >>

Un problème ? Quelque chose que vous n'avez pas saisit ?
Posez vos questions sur les forums(+) !


Toute reproduction interdite - Intégralement écrits par le Webmaster
Valid XHTML 1.0! Valid CSS!
By JSAND [All right reserved] - Windows est une marque de Microsoft Corporation
Toute copie compléte comme partielle sans autorisation est passible d'amende - Avertissements