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.

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>  

Çıktı