简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Comment centrer un tableau avec CSS ?

王林
Libérer： 2023-09-13 08:21:02
avant
2011 Les gens l'ont consulté

La balise

如何用 CSS 使表格居中？

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.

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
            margin-left: auto;
            margin-right: auto;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>id</th>
         <th>Salary</th>
         <tr>
            <td>Suranjan</td>
            <td>12475142</td>
            <td>32000</td>
         </tr>
      </table>
   </body>
</html>
Copier après la connexion

Instructions

  • 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.

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
         }
         body{
            display: grid;
            place-items: center;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>country</th>
         <th>Occupation</th>
         <tr>
            <td>Tom Holland</td>
            <td>USA</td>
            <td>Software Developer</td>
         </tr>
      </table>
   </body>
</html>
Copier après la connexion

Instructions

  • 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.

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
         }
         body{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>class</th>
         <th>Subject</th>
         <tr>
            <td>Suranjan</td>
            <td>12</td>
            <td>Mathematics</td>
         </tr>
      </table>
   </body>
</html>
Copier après la connexion

Instructions

  • 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!

source：tutorialspoint.com
Article précédent：Comment implémenter une taille d'image adaptative à l'aide des unités CSS Viewport vmin et vw Article suivant：Comment utiliser l'unité CSS Viewport vw pour implémenter une mise en page adaptative horizontale
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1807
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1954
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1659
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1559
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1591
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！