est utilisée pour créer des composants traditionnels en HTML appelés tableaux. Lors de la conception de pages Web, il est essentiel de savoir comment améliorer la visualisation globale de votre conception. L'alignement central de la table est l'un des aspects importants. Ce tutoriel va nous apprendre à centrer un tableau en utilisant CSS.
Utilisez les propriétés margin-left et margin-right
Il s'agit d'un moyen populaire d'aligner les éléments d'un tableau en HTML et CSS. Les propriétés CSS margin-left et margin-right sont utilisées pour définir respectivement les marges gauche et droite des éléments. Les marges créent un espace en dehors des frontières d'un élément, éloignant ainsi l'élément des autres éléments de la page.
La valeur de l'attribut peut être définie à l'aide d'une valeur de longueur (par exemple, px, em, cm), d'un pourcentage ou des valeurs prédéfinies auto, héritage ou initiale.
Le code est un fichier HTML qui crée un tableau avec trois colonnes : Nom, identifiant et Salaire. La largeur de la classe « conteneur de table » du tableau correspond à 70 % de la largeur de la fenêtre d'affichage et est centrée sur la page. Les cellules d'en-tête (nom, identifiant et salaire) et les cellules du tableau ont des bordures pleines de 2 pixels avec la couleur RVB (96, 100, 218).
Le tableau contient une ligne de données, qui contient le nom "Suranjan", l'identifiant est 12475142 et le salaire est 32000.
Utiliser l'attribut de grille
Une autre méthode courante consiste à utiliser l'attribut de grille pour centrer le tableau. Les grilles sont des éléments bidimensionnels HTML et CSS que nous pouvons utiliser pour créer des lignes et des colonnes. Si nous déclarons d'abord le tableau comme élément de grille, nous pouvons ensuite centrer le tableau à l'aide de la propriété place-items de la grille. La propriété place-items aligne en fait la grille horizontalement et verticalement par rapport au centre.
Il s'agit d'un code HTML de base pour créer un tableau avec trois colonnes - Nom, Pays et Profession. Le tableau contient une ligne de données contenant des valeurs pour le nom (Tom Holland), le pays (États-Unis) et la profession (développeur de logiciels).
Le style CSS défini dans la section head du HTML définit les bordures du tableau, les cellules du tableau (th, td) et le tableau lui-même (class="table-container") sur une couleur RVB unie de 2 pixels (96, 100, 218) . La largeur du tableau est définie sur 70vw (70 % de la largeur de la fenêtre). La section du corps est configurée pour apparaître sous forme de grille et centrer les éléments sur la page.
Utiliser les propriétés Flexbox
Une autre méthode très populaire consiste à utiliser la propriété flexbox de CSS pour centrer le tableau. Flexbox est un élément réactif pour HTML et CSS. Flexbox possède certaines propriétés telles que les éléments extraterrestres, le contenu justifié, etc. que nous pouvons utiliser pour centrer le tableau. Les programmeurs trouvent souvent cette méthode comme la manière la plus pratique de centrer une table.
Ce code est un fichier HTML qui crée un tableau avec trois colonnes : Nom, identifiant et Salaire. Le tableau a une classe nommée "table-container" avec une largeur de 70 % de la largeur de la fenêtre. Les cellules d'en-tête (Nom, identifiant et Salaire) et les cellules du tableau ont toutes des bordures pleines de 2 pixels avec la couleur RVB (96, 100, 218). Le tableau comporte une ligne de données, comprenant le nom « Suranjan », le numéro 12475142 et le salaire 32 000.
Le corps principal du document HTML a le style d'affichage CSS : flex, faisant du corps principal un conteneur flexible. Style CSS flex-direction : row définit la direction de l'élément du conteneur flex sur row. Les styles CSS alignent les éléments et justifient les éléments du centre de contenu respectivement verticalement et horizontalement.
Conclusion
Dans cet article, nous avons appris à centrer un tableau à l'aide de CSS. Dans ce didacticiel, nous avons vu l'utilisation des propriétés de marge, de grille, de flexbox, etc. Parmi toutes les méthodes discutées, Flexbox doit être utilisée. En effet, les flexbox sont plus pratiques et plus réactives aux éléments de l'interface utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
L'article discute de l'utilisation de CSS pour les effets de texte comme les ombres et les gradients, les optimiser pour les performances et l'amélioration de l'expérience utilisateur. Il répertorie également les ressources pour les débutants (159 caractères)
