logo

Cum se centrează un tabel în CSS?

Utilizarea tabelelor în proiectarea unui site web este o sarcină interesantă. În mod implicit, alinierea unui tabel este spre stânga, dar folosind marginea proprietate în CSS, o putem alinia la centru.

Dacă setăm valoarea lui margine-stânga și margine-dreapta la auto , apoi browserele arată tabelul centrat. Putem folosi proprietatea stenografie marginea și setați-l la auto pentru a alinia masa la centru, mai degrabă decât pentru a utiliza margine-stânga și margine-dreapta proprietate.

căutarea contradictorie

În loc să aliniați masa la centru, text-align: centru; proprietatea centrează numai conținutul tabelului, cum ar fi textul din interiorul tabelului.

Să înțelegem acest lucru folosind o ilustrație.

prinde și încearcă java

Exemplu

În acest exemplu, folosim text-align: centru; proprietate pentru a centra conținutul în interiorul tabelului și margine-stânga: auto; și margine-dreapta: auto; pentru a centra masa.

 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> 
Testează-l acum

Ieșire

Cum se centrează un tabel în CSS?