patrickgross.org

Cours HTML

  Précédent   Suivant    

5.1. Récapitulatif.

Vous venez d'apprendre:

• A utiliser les balises de titres.
• Qu'il y a une balise pour chaque niveau de titres.

5.2. Comment décrire un tableau.

Tout le monde sait ce qu'est un tableau. En voici un. Il est "vide", peu importe, ce qui nous intéresse d'abord est de voir ce qu'il faut pour décrire un tableau, pas de le remplir avec du texte ou d'autres choses.

Si vous deviez décrire la structure du tableau ci-dessus, vous diriez probablement: "C'est un tableau qui a 2 colonnes et 3 lignes."

Et vous auriez raison. C'est tout ce qu'il faut pour le décrire. Disons-le autrement. Il y a le fait que le tableau commence, le tableau à des lignes, les lignes ont des cases (cela fait des colonnes). Les cases ont une fin, les lignes ont une fin, et le tableau finit aussi.

Donc, avec HTML, nous aurons ces balises:

<table> pour dire "voilà un tableau qui commence".

<tr> pour dire "voilà la première ligne du tableau".
<td> pour dire "voilà la première case de la première ligne du tableau".
</td> pour dire "la première case de la première ligne du tableau se termine ici."
<td> pour dire "voilà la première case de la première ligne du tableau".
</td> pour dire "la première case de la première ligne du tableau se termine ici."
<td> pour dire "voilà la deuxième case de la première ligne du tableau".
</td> pour dire "la deuxième case de la première ligne du tableau se termine ici."
</tr> pour dire "la première ligne du tableau est maintenant terminée."

<tr> pour dire "voilà la deuxième ligne du tableau".
<td> pour dire "voilà la première case de la deuxième ligne du tableau".
</td> pour dire "la première case de la deuxième ligne du tableau se termine ici."
<td> pour dire "voilà la première case de la deuxième ligne du tableau".
</td> pour dire "la première case de la deuxième ligne du tableau se termine ici."
<td> pour dire "voilà la deuxième case de la deuxième ligne du tableau".
</td> pour dire "la deuxième case de la deuxième ligne du tableau se termine ici."
</tr> pour dire "la deuxième ligne du tableau est maintenant terminée."

<tr> pour dire "voilà la troisième ligne du tableau".
<td> pour dire "voilà la première case de la troisième ligne du tableau".
</td> pour dire "la première case de la troisième ligne du tableau se termine ici."
<td> pour dire "voilà la première case de la troisième ligne du tableau".
</td> pour dire "la première case de la troisième ligne du tableau se termine ici."
<td> pour dire "voilà la deuxième case de la troisième ligne du tableau".
</td> pour dire "la deuxième case de la troisième ligne du tableau se termine ici."
</tr> pour dire "la troisième ligne du tableau est maintenant terminée."

</table> pour dire "le tableau est maintenant terminé."

Voilà qui doit vous paraître compliqué. Alors voyons la même chose, juste avec HTML, sans les explications:

Est-ce si difficile à maîtriser? Pas tant que cela, n'est-ce pas?

Regardez l'exemple HTML ci-dessus. Vous voyez bien que pour commencer le tableau, on écrit <table>, et à la fin, pour écrire que le tableau finit là, on écrit </table>.

Regardez la première balise <tr>. Elle veut dire qu'ici commence une ligne du tableau.

A la ligne suivante, on définit que dans cette première ligne, il y a une première case. Elle commence par <td> et se termine par </td>.

Il y en a une autre, et alors, la première ligne est terminée avec </tr>.

Il y a encore deux autres lignes de tableau, chacune avec elles aussi deux cases.

Au fait: j'aurais pu créer exactement le même tableau comme cela:

Mais vous vous en doutez, c'est beaucoup moins lisible! Je l'ai déjà dit, il vaut mieux aérer votre code HTML.

Un peu d'entraînement ne fait probablement pas de mal. Regardez les exemples HTML qui suivent, et essayez de répondre pour vous-même aux questions.

Dans le tableau ci-dessus, combien y a-t-il de lignes? Et combien y a-t-il de cases par ligne?

C'est facile. Une ligne commence avec un <tr> et finit avec le </tr> suivant. Vous comptez les <tr>, et vous avez le nombre de lignes du tableau.

Combien de cases dans une ligne? Regardez une ligne, qui commence par <tr>, et comptez combien il y a de <td> avant la fin de la ligne, avant le </tr>.

Dans le tableau ci-dessus, combien y a-t-il de lignes? Et combien y a-t-il de cases par ligne?

Dans le tableau ci-dessus, combien y a-t-il de lignes? Et combien y a-t-il de cases par ligne?

Dans le tableau ci-dessus, combien y a-t-il de lignes? Et combien y a-t-il de cases par ligne?

Dans le tableau ci-dessus, combien y a-t-il de lignes? Et combien y a-t-il de cases par ligne?

5.3. Tableaux complexes.

HTML permet de créer des tableaux complexes, comme celui-ci par exemple:

Ce qu'il a de particulier, c'est que la deuxième ligne n'a qu'une seule case. Cette case s'étend sur deux colonnes.

Voici la solution en HTML:

Voyez la balise <td colspan="2">. Cette balise <td>, je l'ai nantie de ce que l'on appelle un attribut. C'est la première fois dans ce cours que nous parlons d'attributs d'une balise. On pourrait appeler cela "options d'une balise", mais on l'appelle attribut. Cet attribut, colspan="2", a pour effet de dire que cette cas-là s'étend sur 2 colonnes. "2" est la valeur de l'attribut colspan. (En anglais "span" veut dire s'étendre et "col" veut dire colonnes.)

A retenir: Pour les balises qui ont des attributs, le principe est:

<nom-de-la-balise   un-attribut="sa-valeur"   un-autre-attribut="sa-valeur-à-lui">

Oui, certaines balises peuvent avoir plus d'un attribut. Nous verrons aussi que certaines balises ont des attributs obligatoires.

Voici un autre tableau complexe:

Pour ce tableau-là, vous voyez que la deuxième case de la première ligne s'étend sur deux lignes. Voici comment le faire:

La deuxième case de la première ligne a comme attribut rowspan="2", ce qui signifie: cette case d'étant sur deux lignes. (En anglais, "row" veut dire "rangée", ou "ligne de tableau".)

Vous remarquez que pour la deuxième ligne, je n'ai défini qu'une case. Evidemment, puisque la deuxième est la "continuation" de la deuxième de la ligne au-dessus, qui "déborde" sur la deuxième ligne et prend ainsi la place de ce qui serait autrement la deuxième case de la deuxième ligne./p>

Un dernier exemple de tableau complexe, histoire de faire monter le chiffre d'affaire des marchands d'aspirine:

Ici, la première case de la première ligne s'étend sur les deux colonnes suivantes de cette première ligne (donc rowspan="3"), et la deuxième case de la deuxième ligne s'étend sur la ligne en-dessous (donc colspan="2"). Voici le code HTML correspondant:

5.4. Attributs de la balise <table>.

Puisque nous avons abordé des attributs de balises, parlons des attributs de la balise <table>.

Un tableau, c'est un certain arrangement de cases en lignes et en colonnes, mais c'est aussi une certaine façon de le présenter. Avec bordure? Sans bordure? S'il y a une bordure, quelle épaisseur de bordure? Les cases son-elles collées ensemble, ou bien y a-t-il un certain espacement entre les cases? Le contenu des cases doit-il être collé au bord des cases, ou doit-il y a voir là aussi de l'espacement?

Exemples d'un même tableau, où ces réglages diffèrent:

Ce sont tous des tableaux de deux lignes et de deux colonnes. Mais l'épaisseur de leur bordure, l'espacement entre les cases, l'espacement entre le contenu des cases et le bord intérieur des cases, varie.

Tout cela se fait avec trois attributs de la balise <table>: border, cellspacing, et cellpadding.

• border définit l'épaisseur de la bordure, approximativement en points d'écran. Si border vaut 0, il n'y a pas de bordure.
• cellspacing définit l'espace entre les cases, approximativement en points d'écran. Si cellspacing vaut 0, les cases sont collées ensemble.
• cellpadding définit l'espace entre le contenu des cases et les bords intérieurs des cases, c'est "les marges dans les cases". C'est aussi approximativement en points d'écran. Si cellpadding vaut 0, ce qui est dans la case est collé contre le bord de la case.

Les mêmes exemples, avec les explications:

Nous venons de voir comment utiliser les attributs de la balise <table> pour agir sur certains paramètres de présentation d'un tableau.

En fait, en toute rigueur, la méthode que je viens d'exposer n'est pas la bonne. Elle utilise HTML pour faire de la décoration, alors que j'ai déjà évoqué l'idée de n'utiliser HTML que pour la définition des éléments, et autre chose pour la décoration. Une autre façon de faire, plus rigoureuse, sera donc exposée plus tard, mais j'estime néanmoins indispensable, lorsque l'on débute, de connaître les attributs border, cellpadding, et cellspacing. D'ailleurs, même des auteurs HTML confirmés utilisent encore ces attributs.

5.5. Placer des éléments dans un tableau.

Il va de soi que tout ce que vous voulez mettre dans n'importe quelle case de tableau doit obligatoirement être mis entre un <td> et le </td> qui le suit.

C'est bien dans les cases que l'on met des "choses", comme du texte, des images, voir... un tableau. Oui, on peut mettre un tableau dans un tableau.

Exemple. Pour réaliser cela:

Le code HTML est:

5.7. La balise de cases d'entête.

Nous avons vu que les cases des lignes des tableaux se font avec la balise <td>.

Il existe une balise <th>, qui s'utilise comme la balise <td>. Elle sert aussi à définir des cases des lignes des tableaux.

La différence entre <th> et <td> est que <th> est à utiliser lorsque la case est une case d'entête de tableau. Utiliser <th> au lieu de <td> pour les cases d'entête permettra ensuite de faire différer la présentation des cases d'entête de celle des autres cases:

5.8. La balise de légende de tableau.

Il existe une balise <caption>, qui s'utilise n'importe où entre <table> et </table>, mais toujours en dehors des lignes tr/tr. Caption signifie légende, c'est l'usage de cette balise: donner une légende à un tableau. Cela n'a évidemment rien d'obligatoire.

5.9. Et le reste?

Jusqu'ici, les largeurs des tableaux, et de leurs cases, étaient calculées automatiquement par le logiciel de navigation, en fonction du contenu du tableau et des cases. Tout ceci peut être ajusté, mais ce sera l'objet d'un autre cours, tout simplement parce que ces ajustements de tailles, nous ne les ferons pas avec des attributs HTML.

Il en va de même pour les couleurs. Couleurs de fond des cases, couleurs de la bordure, couleur des textes dans les cases, nous ferons tout cela, mais pas avec des attributs HTML.

Nous ne parlerons pas non plus maintenant de polices de caractères, ni d'alignement à gauche, au centre, à droite, du tableau ou du contenu de cases. Ni nous ne parlerons maintenant d'alignement à gaucge, au centre ou à droite du tableau entier. Tout ceci, nous ne le ferons pas avec HTML, et de plus, la façon dont nous le ferons n'est pas spécifique au tableaux.

5.10. Questions et réponses.

• "Votre cours n'est pas complet! J'ai vu qu'il existait encore d'autres attibuts, comme width, height, align etc. Pourquoi ne pas les expliquer?"
  
  Parce que ces autres attributs poour les balises de tableaux sont "deprecated", démodés, abandonnés. C'est à dire que les logiciels de navigation ne sont plus tenus de les traiter correctement. Nous verrons donc plus tard comment leurs fonctions ont été remplacées.
• "N'est-il pas plus simple d'utiliser un logiciel de création de pages web, dans lequel, pour faire un tableau, on dessine simplement les cases avec la souris?"
  
  Oui, lorsque l'on débute, cela paraît plus simple. Mais cela ne vous apprend rien sur les balises de tableaux, vous restez dépendant de ce logiciel. J'ai choisi la méthode apparemment difficile parce qu'avec un peu d'habitude vous constaterez qu'il est plus rapide de créer vos tableaux directement avec HTML. D'ailleurs, il vous suffira de copier mes exemples et de les modifier selon vos besoins.

Voyons maintenant les listes.

  Précédent    Haut   Suivant    

patrickgross.org
Dimanche, 20 avril 2025