Table centrale CSS

«Dans cet article, nous examinerons de nombreuses façons diverses dont les attributs de style CSS pourraient être utilisés pour aligner une table dans la langue de balisage hypertexte. La propriété de marge est la propriété la plus courante utilisée pour aligner un tableau. Cette propriété peut être utilisée avec plusieurs valeurs et fonctions différentes comme la fonction automatique. Nous discuterons de plusieurs exemples liés à cette propriété et les implémenterons également dans cet article."

Exemple 01: Création d'une table au centre de la page Web à l'aide de la balise de style CSS dans un fichier HTML

Dans ce cas, nous créerons une table qui sera alignée sur le centre de la page Web. La méthode CSS TAG CSS sera utilisée dans ce cas. La propriété de marge sera utilisée dans cet exemple pour aligner un tableau de manière centralisée sur notre navigateur.

Dans ce script, nous ouvrirons d'abord la balise de tête. Dans la balise de tête, nous ouvrirons la balise de style CSS. Dans la balise de style, nous donnerons la table et ses éléments certaines propriétés de style. Le premier sera la taille, la forme et la couleur de la bordure; Ensuite, nous lui donnerons un rembourrage. À la fin de la balise de style, nous attribuerons la propriété «marge», puis fermerons le style et la balise de tête. Après cela, nous ouvrirons la balise corporelle, dans laquelle nous créerons notre tableau à l'aide de la balise de table. À l'intérieur de la balise de table, nous lui donnerons deux ensembles de lignes. Dans la première ligne, la balise «Th» sera utilisée, qui attribuera le cap de la colonne de la table. Ensuite, nous créerons la deuxième ligne avec la balise «tr» et donnerons à cette ligne des données pour les colonnes en utilisant la balise «TD».

Comme nous pouvons le voir dans la sortie ci-dessus, le tableau est aligné sur le centre de la page en raison de la propriété automatique de marge qui a été attribuée dans l'en-tête du fichier.

Exemple 02: Utilisation de la technique CSS en ligne pour aligner une table au centre d'une page HTML

Dans cet exemple, nous utiliserons la propriété de marge avec la fonction Auto, qui alignera le tableau au centre de la page Web. L'approche CSS en ligne sera utilisée dans cet exemple pour atteindre l'objectif.

Dans ce script, nous commencerons directement à partir de la balise corporelle. Nous allons commencer par la balise H1 pour donner à la page un titre. Ensuite, nous commencerons la balise de table dans laquelle nous allons donner le style et lui donner une bordure avec sa forme, sa taille et sa couleur comme propriété. Ensuite, nous donnerons à la table un rembourrage, et la propriété de marge avec la fonction automatique sera appelée. La balise «tr» sera ensuite utilisée pour ajouter deux lignes à la table. Nous utiliserons la balise «Th» pour donner la colonne des noms de table et la balise «TD» pour attribuer des données à la deuxième ligne de la table. Le mot-clé de style CSS en ligne sera appliqué à la fois aux balises «Th» et «TD» pour fournir des fonctionnalités stylistiques aux composants de la table indépendamment. Les propriétés de style incluent la bordure avec la forme, la taille, la couleur et le rembourrage.

Après avoir enregistré le script précédent et l'ouvrir sur n'importe quel navigateur de votre choix, nous obtiendrons la sortie aérienne. Comme nous pouvons le voir, nous avons réussi à aligner le tableau avec le centre de la page en utilisant l'approche CSS en ligne.

Exemple 03: Utilisation des propriétés CSS de marge-gauche et de marge droite pour aligner une table au centre de la page dans un fichier HTML

Dans cet exemple, l'approche CSS TAG CSS sera utilisée. Ici, nous créerons une table qui sera centrée sur la page. La propriété de marge sera séparée en deux pièces, à gauche et à droite, qui sera ensuite utilisée pour aligner un tableau de manière centralisée sur la page de notre navigateur dans cet exemple.

La balise de tête sera ouverte en premier dans ce script. La balise de style CSS sera ouverte dans la balise de tête. Nous donnerons la table et ses parties certaines caractéristiques stylistiques avec la balise de style. La taille, la forme et la couleur de la bordure viendront en premier, suivis d'un rembourrage. Après la balise de style, nous attribuerons les propriétés «marge-droite» et «marge-gauche» et leur donnerons des valeurs de pourcentage avant de fermer le style et les étiquettes de tête. Après cela, nous ouvrirons la balise corporelle et commencerons par fournir à la page une en-tête en utilisant la balise H1. La balise de table sera ensuite utilisée pour construire notre table. Nous allons lui donner deux ensembles de lignes dans la balise de table.

La balise «Th» sera utilisée dans la première ligne pour attribuer la tête de la colonne de la table. Ensuite, en utilisant la balise «tr», nous allons créer la deuxième ligne et utiliser la balise «TD» pour remplir les colonnes avec des données. Suite à cela, nous fermerons toutes les balises et enregistrerons le fichier pour préserver les modifications qui seront affichées sur notre navigateur, comme vu ci-dessous:

Le tableau est aligné au milieu de la page, comme indiqué dans la sortie ci-dessus, en raison des propriétés de marge-gauche et de marge droite définies dans l'en-tête du fichier.

Exemple 04: Utilisation des propriétés CSS de marge-gauche et de marge droite avec la fonction automatique pour aligner une table au centre de la page

Dans cet exemple, l'approche CSS TAG CSS sera utilisée. Ici, nous ferons une table qui existe au centre de la page. La propriété de marge sera divisée en deux sections, à gauche et à droite, qui sera ensuite utilisée pour aligner un tableau de manière centralisée dans notre exemple en utilisant la fonction AUTO sur la page de notre navigateur.

Dans ce script, la balise de tête sera ouverte en premier. Dans le tag de tête, la balise de style CSS sera ouverte. Avec la balise de style, nous donnerons la table et ses composants quelques qualités stylistiques. Le rembourrage viendra après la taille de la bordure, la forme et la couleur. Avant de fermer les étiquettes de style et de tête, nous ajouterons les propriétés «marge-droite» et «marge-gauche» après l'étiquette de style et leur donner la fonction automatique comme leur valeur. La balise de table sera utilisée pour construire notre table.

Dans l'étiquette de table, nous lui donnerons deux ensembles de lignes. La balise «Th» sera utilisée dans la première ligne pour donner la colonne en tête de la table. Ensuite, en utilisant la balise «tr», nous allons construire la deuxième ligne et la balise «TD» sera utilisée pour remplir les colonnes avec des données. Suite à cela, nous fermerons toutes les balises et enregistrerons le fichier pour préserver les modifications qui seront visibles dans notre navigateur.

Étant donné que les valeurs de marge-gauche et de marge droite dans l'en-tête du fichier sont définies sur Auto, le tableau est aligné sur le centre de la page, comme indiqué dans la sortie ci-dessus.

Conclusion

Nous avons discuté de nombreuses méthodes que CSS fournit pour aligner une table au centre d'une page Web dans cet article. La propriété de marge a été explorée et implémentée dans le langage de balisage hypertexte pour accomplir ce phénomène. Nous avons utilisé la propriété de marge avec plusieurs propriétés différentes attribuées, comme la fonction automatique et les valeurs de pourcentage, pour aligner le tableau au centre. Nous avons mis en œuvre tous les exemples sur le Bloc-notes ++ IDE dans cet article.