logo

Jak wyśrodkować tabelę w CSS?

Wykorzystanie tabel w projektowaniu strony internetowej jest ekscytującym zadaniem. Domyślnie wyrównanie tabeli jest skierowane w lewo, ale za pomocą opcji margines właściwość w CSS, możemy wyrównać ją do środka.

Jeżeli ustalimy wartość lewy margines I prawy margines Do automatyczny , przeglądarki pokażą tabelę wyśrodkowaną. Możemy skorzystać z własności skróconej margines i ustaw to automatyczny do wyrównywania stołu na środku zamiast używania lewy margines I prawy margines nieruchomość.

Java przerwała pętlę

Zamiast wyrównywać stół do środka, wyrównanie tekstu: do środka; Właściwość centruje jedynie zawartość tabeli, taką jak tekst wewnątrz tabeli.

Rozumiemy to na podstawie ilustracji.

Przykład

W tym przykładzie używamy wyrównanie tekstu: do środka; właściwość, aby wyśrodkować zawartość wewnątrz tabeli i margines po lewej: auto; I prawy margines: auto; wyśrodkować stół.

 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> 
Przetestuj teraz

Wyjście

obrazy przecen
Jak wyśrodkować tabelę w CSS?