logo

Kako centrirati tabelo v CSS?

Uporaba tabel pri oblikovanju spletnega mesta je vznemirljiva naloga. Privzeto je poravnava tabele proti levi, vendar z uporabo marža lastnosti v CSS, ga lahko poravnamo na sredino.

Če nastavimo vrednost rob-levo in margin-desno do avto , potem brskalniki prikažejo tabelo na sredini. Uporabimo lahko lastnost stenografije marža in ga nastavite na avto za poravnavo mize na sredini namesto uporabe rob-levo in margin-desno premoženje.

nespremenljiv seznam

Namesto da bi mizo poravnali na sredino, poravnava besedila: sredina; lastnost centrira samo vsebino tabele, na primer besedilo v tabeli.

Razumejmo to z uporabo ilustracije.

Primer

V tem primeru uporabljamo poravnava besedila: sredina; lastnost za centriranje vsebine znotraj tabele in rob-levo: samodejno; in rob-desno: samodejno; sredinsko mizo.

 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> 
Preizkusite zdaj

Izhod

podčrtaj s css
Kako centrirati tabelo v CSS?