Comment centrer le tableau HTML

HTML, en tant que langage de balisage, est largement utilisé pour créer des pages Web. Parmi eux, les tableaux sont un élément important pour l’organisation des données et la mise en page. Lors de la conception de tableaux, le centrage est un style couramment utilisé pour rendre la page plus belle et plus lisible. Cet article explique comment obtenir l'effet de centrage des tableaux HTML via des feuilles de style CSS.

1. Connaissance des tableaux HTML

En HTML, la balise table est utilisée pour définir le tableau, la balise tr est utilisée pour définir les lignes du tableau et la balise td est utilisée pour définir les cellules. Nous pouvons utiliser des feuilles de style CSS pour modifier le style des éléments, notamment la disposition du tableau, la couleur, les bordures, etc.

2. Centrage horizontal

1. Utilisez l'attribut text-align

Vous pouvez utiliser l'attribut text-align pour centrer horizontalement le texte. Par exemple :

table{

text-align:center;

}

Cela centrera tout le contenu du texte dans l'étiquette du tableau, quelle que soit la cellule dans laquelle il se trouve.

2. Utilisez l'attribut margin

Nous pouvons également utiliser l'attribut CSS margin pour réaliser un centrage horizontal. Vous pouvez ajouter le style suivant à l'élément extérieur du tableau :

table{

margin: 0 auto;

}

Cela centrera le tableau horizontalement dans son élément conteneur, quelles que soient sa taille et sa position. Cette méthode fonctionne pour centrer une seule table à la fois.

3. Centrage vertical

1. Utilisez l'attribut vertical-align

Nous pouvons également utiliser l'attribut vertical-align de CSS pour réaliser un centrage vertical, qui peut être défini dans le style de la cellule ou du tableau (en-tête), par exemple :

td{

vertical-align: middle;

}

Cela centrera verticalement le contenu de la cellule. S'il est défini dans l'en-tête (th), l'en-tête sera centré verticalement.

Remarque : L'utilisation de l'attribut vertical-align ne peut être définie que dans la cellule, pas sur le tableau lui-même.

2. Utilisez la propriété line-height

Vous pouvez réaliser un centrage vertical en utilisant la propriété line-height de CSS. Par exemple :

td{

line-height: 100px;

}

Définissez la hauteur de la cellule sur 100 px, puis définissez la hauteur de la ligne sur 100 px, ce qui centrera le contenu de la cellule verticalement. Notez que cette méthode ne fonctionne que pour une seule ligne de données.

Conclusion

Grâce aux feuilles de style CSS, nous pouvons facilement obtenir l'effet de centrage des tableaux HTML. Pour la plupart des concepteurs et des développeurs, la méthode de centrage horizontal est relativement simple, tandis que la méthode de centrage vertical peut être plus difficile. Il est recommandé d'essayer différentes méthodes pour trouver celle qui convient le mieux à votre scénario spécifique.

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!