HTML, texte et tableaux

Même si elle est colorée à souhait, une table doit contenir quelque chose, sinon elle n’aurait pas de raison d’être. Voyons donc comment combiner et formater correctement une table afin qu’elle contienne du texte.

Alignement du texte Voyons, une fois le texte entré, comment aligner le texte à l’intérieur du tableau avec la commande align. Tout d’abord, créons le tableau.

Voici le tableau :

Insérons du texte :

Voici comment se présente le tableau avec le texte :

Voici mon tableau

Parfait ! Maintenant, si nous voulions aligner le texte au centre de cette façon :

Voici mon tableau

le code sera :

Et bien oui, les paragraphes entrent à nouveau en jeu. Avec l’attribut p nous identifions un paragraphe et avec align nous l’alignons à notre guise, dans notre exemple, au centre. Clairement, pour l’alignement, vous pouvez utiliser les paramètres left et à votre choix. Les marges Si le texte semble trop collé au bord du tableau, il est possible d’augmenter l’espace entre ces deux éléments en utilisant l’attribut cellpadding qui nous permet de créer un espace exprimé en pixels. Comparons deux tableaux, un sans cellpadding et un avec cellpadding : Sans cellpadding :

Voici mon tableau

Avec cellpadding réglé sur 3pxl :

Voici mon tableau

Voici le code avec cellpadding:

La répartition Voyons maintenant comment ajuster la répartition du texte à l’intérieur du tableau. Reprenons notre exemple en ajoutant une ligne de texte :

Voici mon tableau Voici mon tableau

Voyons maintenant comment supprimer l’espace créé entre les deux paragraphes de texte pour obtenir ce résultat :

Voici mon tableau Voici mon tableau

Pour supprimer l’espace, nous avons utilisé la balise  » style« . Avec margin-top » pour la répartition supérieure et  » margin-bottom » pour celle inférieure, nous pouvons régler ces deux marges à zéro pixel, c’est-à-dire, chaque ligne de paragraphe étant une ligne à part entière, nous avons réglé les marges, une supérieure et une inférieure, à chacune d’elles, les supprimant complètement. Essayons de régler la marge supérieure des deux paragraphes à 5 pixels :

Voici mon tableau Voici mon tableau

Comme vous pouvez le voir, un espace de 5pxl est créé entre le premier et le second paragraphe, dans la partie supérieure. Si maintenant je règle également la marge inférieure à 5 pxl, nous obtiendrons ce qui suit :

Voici mon tableau Voici mon tableau

Entraînez-vous à donner différentes mesures aux marges, en essayant ainsi les différentes combinaisons. Cette leçon que nous venons de voir est très importante pour le réglage graphique du texte.

Pubblicato in HTML & CSS