logo

CSS'de bir tablo nasıl ortalanır?

Bir web sitesinin tasarımında tabloların kullanılması heyecan verici bir iştir. Varsayılan olarak tablonun hizalaması sola doğru olur ancak marj CSS'deki özellik, onu merkeze hizalayabiliriz.

değerini ayarlarsak kenar boşluğu-sol Ve kenar boşluğu-sağ ile Oto , ardından tarayıcılar tabloyu ortalanmış olarak gösterir. Kısayol özelliğini kullanabiliriz marj ve bunu şu şekilde ayarlayın: Oto kullanmak yerine masayı merkeze hizalamak için kenar boşluğu-sol Ve kenar boşluğu-sağ mülk.

plsql

Tabloyu merkeze hizalamak yerine, metin hizalama: ortala; özelliği yalnızca tablonun içindeki metin gibi tablo içeriğini ortalar.

Bunu bir illüstrasyon kullanarak anlayalım.

Örnek

Bu örnekte, şunu kullanıyoruz: metin hizalama: ortala; İçeriği tablonun içinde ortalamak için özellik ve sol kenar boşluğu: otomatik; Ve sağ kenar boşluğu: otomatik; Masayı ortalamak için.

 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> 
Şimdi Test Edin

Çıktı

makine öğrenimi ve türleri
CSS'de bir tablo nasıl ortalanır?