logo

Kako centrirati tablicu u CSS-u?

Korištenje tablica u dizajnu web stranica je uzbudljiv zadatak. Prema zadanim postavkama, tablica je poravnata ulijevo, ali korištenjem margina svojstvo u CSS-u, možemo ga poravnati u središte.

Ako postavimo vrijednost margin-lijevo i margin-desno do auto , tada preglednici prikazuju tablicu centriranu. Možemo koristiti svojstvo stenografije margina i postavite ga na auto za poravnavanje stola u sredini umjesto da koristite margin-lijevo i margin-desno vlasništvo.

kontradiktorna pretraga

Umjesto poravnanja stola prema sredini, poravnanje teksta: središte; svojstvo centrira samo sadržaj tablice, kao što je tekst unutar tablice.

Shvatimo ovo pomoću ilustracije.

c kodni niz nizova

Primjer

U ovom primjeru koristimo poravnanje teksta: središte; svojstvo za centriranje sadržaja unutar tablice i margin-lijevo: auto; i margin-desno: automatski; srediti stol.

 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> 
Testirajte sada

Izlaz

Kako centrirati tablicu u CSS-u?