L'utilisation de tableaux dans la conception d'un site Web est une tâche passionnante. Par défaut, l'alignement d'un tableau se fait vers la gauche, mais en utilisant le marge propriété en CSS, on peut l'aligner au centre.

Si nous fixons la valeur de marge gauche et marge droite à auto , puis les navigateurs affichent le tableau centré. Nous pouvons utiliser la propriété raccourcie marge et réglez-le sur auto pour aligner la table au centre plutôt que d'utiliser le marge gauche et marge droite propriété.

trouver mon iPhone Android

Au lieu d'aligner la table au centre, le alignement du texte : centre ; La propriété centre uniquement le contenu du tableau, tel que le texte à l’intérieur du tableau.

Comprenons cela à l'aide d'une illustration.

Exemple

Dans cet exemple, nous utilisons le alignement du texte : centre ; propriété pour centrer le contenu à l’intérieur du tableau et marge gauche : auto ; et marge droite : auto ; pour centrer la table.

 table, th, td { border: 1px solid black; margin-left: auto; margin-right: auto; border-collapse: collapse; width: 500px; text-align: center; font-size: 20px; } <table class="table"> <tr> <th>First_Name</th> <th>Last_Name</th> <th>Subject</th> <th>Marks</th> </tr> <tr> <td>James</td><td>Gosling</td><td>Maths</td><td>92</td> </tr> <tr> <td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td> </tr> <tr> <td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td> </tr> </table> 

Sortir

debout