Amacım "fotoğraf çerçevesi" benzeri bir HTML sayfası yapmak. Başka bir deyişle, 4 resimle çevrili boş bir sayfa yapmak istiyorum.
Bu benim kodum:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
Ve CSS sınıfları aşağıdaki gibidir:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
Sorunum şu ki, tablonun hücreleri arasında ince beyaz çizgiler alıyorum, yani resimlerin kenarlığı sürekli değil. Bu beyaz boşluklardan nasıl kaçınabilirim?
<table cellspacing="0" cellpadding="0">
Ve css'de:
table {border: none;}
EDIT: iGEL'in belirttiği gibi, bu çözüm resmi olarak kullanımdan kaldırılmıştır (yine de çalışır), bu nedenle sıfırdan başlıyorsanız, jnpcl'nin border-collapse çözümünü kullanmalısınız.
Aslında bu değişiklikten şu ana kadar hiç hoşlanmadım (tablolarla çok sık çalışmıyorum). Bazı görevleri biraz daha karmaşık hale getiriyor. Örneğin, iki farklı kenarlığı aynı yere (görsel olarak) dahil etmek istediğinizde, biri bir satır için ÜST ve ikincisi diğer satır için ALT olurken. Bunlar daralacaktır (= sadece bir tanesi gösterilecektir). O zaman kenarlığın "priority" nasıl hesaplandığını ve hangi kenarlık stillerinin "daha güçlü" olduğunu (çift vs. katı vs.) incelemeniz gerekir.
Bunu sevdim:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Şimdi, kenarlık daraltma ile, her zaman bir kenarlık kaldırıldığı için bu işe yaramayacaktır. Bunu başka bir şekilde yapmak zorundayım (elbette daha fazla çözüm var). Bir olasılık CSS3'ü box-shadow ile kullanmaktır:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
Tek bir kenarlıkla "groove|ridge|inset|outset" kenarlık stili gibi bir şey de kullanabilirsiniz. Ancak benim için bu optimal değil, çünkü her iki rengi de kontrol edemiyorum.
Belki sınırları daraltmak için basit ve güzel bir çözüm vardır, ancak henüz görmedim ve dürüst olmak gerekirse bunun üzerinde fazla zaman harcamadım. Belki burada birisi bana/bize gösterebilir ;)
Benim için tablodaki ve tüm hücrelerdeki kenarlıkları tamamen kaldırmak için böyle bir şey yapmam gerekiyordu. Bu, HTML'de hiçbir değişiklik gerektirmiyor, bu da benim durumumda yardımcı oldu.
table, tr, td {
border: none;
}