logo

Wie zentriere ich eine Tabelle in CSS?

Die Verwendung von Tabellen bei der Gestaltung einer Website ist eine spannende Aufgabe. Standardmäßig ist die Ausrichtung einer Tabelle nach links gerichtet, aber durch die Verwendung von Marge Wenn wir die Eigenschaft in CSS verwenden, können wir sie in der Mitte ausrichten.

Wenn wir den Wert von festlegen Rand links Und Rand rechts Zu Auto , dann zeigen die Browser die Tabelle zentriert an. Wir können die Abkürzungseigenschaft verwenden Marge und stellen Sie es ein Auto zum Ausrichten des Tisches in der Mitte, anstatt die zu verwenden Rand links Und Rand rechts Eigentum.

plsql

Anstatt den Tisch in der Mitte auszurichten, wird der Textausrichtung: Mitte; Die Eigenschaft zentriert lediglich den Tabelleninhalt, beispielsweise den Text innerhalb der Tabelle.

Lassen Sie uns dies anhand einer Illustration verstehen.

Java-Punkt

Beispiel

In diesem Beispiel verwenden wir die Textausrichtung: Mitte; Eigenschaft, um den Inhalt innerhalb der Tabelle zu zentrieren und Rand links: auto; Und Rand rechts: auto; um den Tisch zu zentrieren.

 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> 
Testen Sie es jetzt

Ausgabe

Wie zentriere ich eine Tabelle in CSS?