Maison >interface Web >tutoriel CSS >Comment centrer un tableau avec CSS ?
Comment centrer un tableau avec CSS ?
- 王林avant
- 2023-09-13 08:21:022059parcourir
La balise
f5d188ed2c074f8b944552db028f98a1 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 deExemple
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>
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 deExemple
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>
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 deExemple
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>
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!