HTML, les tableaux

Suivez FullPress sur Google

Ajoutez-nous à vos sources préférées.

Les « gourous » de la nouvelle informatique ont tendance à organiser et à linéariser un site en utilisant les « Feuilles de style », car c’est ce que veut le W3C… Nous mentionnerons les « Feuilles de style » plus tard, mais je soutiens que l’ordre que donnent les tableaux à un document web est inégalable. Bien, maintenant que vous savez que les tableaux sont à la base de la structure d’une page web, apprenons à les connaître, d’accord ?

Commençons tout de suite par dire que les unités de mesure utilisées pour les tableaux sont deux, à savoir, pixels et les pourcentages. En utilisant la mesure en pixels, le tableau sera de type fixe, c’est-à-dire que, quelle que soit la résolution vidéo de vos utilisateurs, le tableau sera toujours affiché avec les mêmes dimensions. Si vous utilisez une mesure en pourcentage, le tableau deviendra de type fluide, c’est-à-dire qu’il s’adaptera automatiquement à la résolution vidéo de vos utilisateurs. Voici un exemple pour mieux comprendre ce concept.

Supposons que vous réalisiez un tableau de 400 pxl. Vos utilisateurs verront toujours 400 pxl à l’écran, quelle que soit la résolution qu’ils utilisent. Si vous réalisez un tableau de 80%, celui-ci occupera 80% de l’écran de vos utilisateurs… toujours et quoi qu’il arrive.

Nous dirons donc en résumé qu’il existe deux types de tableaux, fixe e fluide qui se distinguent par l’unité de mesure utilisée pour leur création. En conclusion, nous pouvons dire sans hésitation que les tableaux régissent la mise en page d’une page web, c’est-à-dire la représentation graphique à l’écran.

Après avoir vu ce que sont les tableaux et à quoi ils servent, commençons à en créer un. Disons tout de suite que les tableaux peuvent être divisés en lignes e colonnes et l’union de cette division constitue les cellules du tableau. Un tableau doit contenir au moins une ligne pour être valide ! Voyons alors quelques exemples pour mieux comprendre ce qui précède :

Eh bien, cette prémisse importante étant faite, passons à la création d’un tableau de 400 pixels sur une ligne. Pour créer un tableau, on utilise la balise table combinée à d’autres paramètres qui réglent l’apparence du tableau lui-mème. Voici donc notre tableau avec ces paramètres que nous commenterons plus tard :

Dans cet exemple, nous avons défini la bordure du tableau à 1pxl via l’attribut border tout comme nous avons défini la longueur à 400pxl via l’attribut width. Dans cet exemple réalisé, nous n’avons pas inséré de lignes ; mais s’il est vrai qu’un tableau pour étre valide doit comporter au moins une ligne… insérons-la maintenant.

Grâce à l’utilisation de tr nous avons inséré une ligne dans notre tableau. Vous pouvez remarquer qu’avec le seul ajout de tr, bien que valide, rien ne sera montré à l’écran. Le troisième élément de base pour la création d’un tableau est nécessaire, et cet élément est td qui crée une cellule dans le tableau. Voici donc les trois éléments de base pour un tableau, à savoir table, tr et td.

Pour récapituler, nous avons créé un tableau de 400pxl de long, avec une bordure de 1pxl, composé d’une ligne et d’une cellule. Voici notre tableau :

Dans les prochaines leçons, nous verrons comment ajouter des cellules, fusionner des cellules et de nombreux autres éléments de tableaux.