Tarayıcı penceresinin ortasında sabit genişlikte bir tablo göstermek istiyorum. Şimdi kullanıyorum
<table width="200" align="center">
Ancak Visual Studio 2008 şu satırda uyarı verir:
"Hizala" niteliği eski kabul edilir. Daha yeni bir yapı önerilir.
Aynı düzeni elde etmek için tabloya hangi CSS stilini uygulamalıyım?
Yanıtlar:
Steven, teoride haklı :
CSS kullanarak bir tabloyu ortalamanın "doğru" yolu. Uyumlu tarayıcılar, sol ve sağ kenar boşlukları eşitse tabloları ortalamalıdır. Bunu başarmanın en basit yolu, sol ve sağ kenar boşluklarını "otomatik" olarak ayarlamaktır. Bu nedenle, bir stil kağıdına yazılabilir:
table
{
margin-left: auto;
margin-right: auto;
}
Ancak bu cevabın başında bahsedilen makale size bir tabloyu ortalamanın diğer tüm yollarını verir.
Zarif bir çapraz tarayıcı çözümü: Bu, hem MSIE 6 (Quirks and Standards), Mozilla, Opera ve hatta Netscape 4.x'te herhangi bir açık genişlik ayarlamadan çalışır:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
Basit. IE6 ve üstü, tablonuzu "margin: 0 auto;" ile mutlu bir şekilde ortalayacaktır. sadece sayfa "standartlar" modunda işliyorsa. Bunun gerçekleşmesi için geçerli bir belge türü bildirimine ihtiyacınız var, örneğin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
veya
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Doğru, IE5.5 ve aşağısı yine de tabloyu ortalamayı reddedecektir, ancak belki de bununla yaşayabilirsiniz, özellikle de sayfa hala tablo sola hizalıyken hala işlevselse. Sanırım şimdiye kadar IE5.5 ve altındaki kullanıcılar bazı tuhaf görünen web sitelerine oldukça alışkınlar - ancak yine de bu görsel aksaklıkların sitenizi kullanılamaz hale getirmediğinden emin olmanız gerekiyor.
Mutlu kodlamalar!
DÜZENLEME: Üzgünüm, belki IE6'yı ve "standartlar" oluşturma moduna geçmek için "katı" bir doküman türüne sahip olmanız gerekmediğini belirtmeliyim. Yukarıda yayınladığım doctype örneklerinden bunun böyle görünebileceğini fark ettim. Örneğin, bu belge türü bildirimi elbette eşit olarak çalışacaktır:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Bugünün dünyasında sapkınlık olsa da - geçmişte aşağıdaki css olmayan kodu yapardınız. Bu, bugünün tarayıcılarına kadar ve dahil her şeyde çalışır, ancak - dediğim gibi - bugünün dünyasında sapkınlıktır:
<center>
<table>
...
</table>
</center>
İhtiyacınız olan şey, bir masayı ortalamak istediğinizi ve kişinin daha eski bir tarayıcı kullandığını söylemenin bir yolu. Sonra tablonun etrafına "<center>" komutlarını ekleyin. Aksi takdirde - css kullanın.
Şaşırtıcı bir şekilde - BODY alanında her şeyi ortalamak istiyorsanız - sadece standardı kullanabilirsiniz
text-align: center;
css komutu ve IE8'de (en azından) tablolar dahil sayfadaki her şeyi ortalayacaktır.
style="text-align:center;"
(bence)
ya da görmezden gelebilirsin, hala çalışıyor
Bu çalışmalı:
<div style="text-align:center;">
<table style="margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
Bunu yeni öğreniyorum ve sonunda benim için işe yarayan şey ilk önce üç sıralı bir masa yapmaktı. Sol ve sağ satırlar için marjı% 50 olarak ayarlayın. Daha sonra, merkez "tablo satırı" nın "tablo verileri" nin içine tek satırlı, sabit genişlikte bir tablo yerleştirin.
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
Temel olarak şu şekilde çalışır:
<table align="center">
...
Ancak bunu CSS kullanarak daha iyi bir şekilde yapabilirsiniz ve bu, bir web sayfasına dinamik davranış sağladığından ve duyarlı olduğundan CSS'yi kullanmak için daha iyi bir yaklaşım olacaktır.
<table style="text-align:center;">
Ayrıca, bir sayfada yalnızca tablo görüntülemeniz gerekiyorsa, gövde etiketi hizalamasını yalnızca aşağıda gösterildiği gibi yapabilirsiniz.
<body style="text-align:center;">
<table>
...
</table>
Başka bir öneri istiyorsanız lütfen bana bildirin. Bu konuda size kesinlikle yardımcı olacaktır. Ayrıca bootstrap özelliklerini kullanmak daha kolay ve etkileşimli olacaktır.
Div stiline ekleyin:
width: fit-content;