Sadece beş dakikada CSS tablosu kenarlığı oluşturmayı öğrenin
CSS ve HTML tablolarının karıştırılmamış olduğunu duymuş olabilirsiniz. Bu doğru değil. Evet, düzen için HTML tabloları kullanmak artık bir web tasarım en iyi uygulaması değil, CSS düzen stilleriyle değiştirildi, ancak tablolar hala bir web sayfasına tablo verileri eklemek için kullanılabilecek doğru biçimlendirme.
Ne yazık ki, pek çok web uzmanı zehirli olduklarını düşünen tablolardan uzaklaştıklarından, bu profesyonellerin birçoğu, bu ortak HTML öğesiyle ve bir web sayfasında bunları ele almaları gerektiğinde mücadele ile ilgili çok az deneyime sahipler. Örneğin, bir sayfada bir tablonuz varsa ve tablo hücrelerine dahili çizgiler eklemek istiyorsanız.
CSS Tablo Sınırları
Tablolara kenarlık eklemek için CSS kullandığınızda, yalnızca tablonun etrafındaki kenarlığı ekler. Bu tablonun tek tek hücrelerine dahili çizgiler eklemek istiyorsanız, iç CSS öğelerine kenarlık eklemeniz gerekir. Ayrı ayrı hücrelerin içine satır eklemek için İK etiketini de kullanabilirsiniz.
Bu makalede anlatılan stilleri uygulamak için, web sayfanızda bir tablonun olması gerekir. Daha sonra, belgenizin başlığında bir iç stil sayfası olarak bir stil sayfası oluşturmalısınız (büyük olasılıkla bunu yalnızca "siteniz" tek bir sayfa ise yapacaksınız) veya belgeye harici stil sayfası olarak eklenmiş olmalısınız. Siteniz birden fazla sayfa ise bunu yapar - tüm sayfaları bir dış sayfadan şekillendirmenize izin verir). Stilleri bu stil sayfasına eklemek için stilleri koyacaksınız.
Başlamadan önce
Öncelikle satırların masanızda görünmesini istediğiniz yere karar vermelisiniz. Aşağıdakiler dahil birkaç seçeneğiniz var:
- Bir ızgara oluşturmak için tüm hücreleri çevrelemek;
- Çizgileri sadece sütunlar arasında konumlandırma;
- Sadece satırlar arasında; veya
- Belirli sütunlar veya satırlar arasında.
Çizgileri ayrı ayrı hücrelere veya tek tek hücrelere yerleştirebilirsiniz.
Tablodaki Tüm Hücrelerin Çevresi Nasıl Eklenir
Tablodaki tüm hücrelerin etrafına çizgiler eklemek için, bu ızgara benzeri efekti oluşturarak stil sayfanıza aşağıdakileri ekleyin:
td, th
kenarlık: katı 1px siyah;
}
Tablodaki Sütunlar Arasındaki Satır Nasıl Eklenir
Sütunlar arasında çizgi eklemek için (bu, tablonun sütunlarında yukarıdan aşağıya doğru çalışan dikey çizgiler oluşturur), stil sayfanıza aşağıdakileri ekleyin:
td, th
sınır-sol: katı 1px siyah;
}
Daha sonra, ilk sütunda görünmesini istemiyorsanız, bu th ve td hücrelerine bir sınıf eklemeniz gerekir. Bu örnekte, bu hücreler üzerinde sınırsız bir sınıra sahip olduğumuzu ve bu daha spesifik CSS kuralıyla sınırı kaldırdığımızı varsayıyoruz. İşte burada kullanacağımız HTML sınıfı:
class = "no ötesi">
Ve sonra aşağıdaki stili stil sayfamıza ekleyebiliriz:
.sınır yok {
sınır-sol: yok;
}
Tablodaki Sadece Satır Arası Satır Ekleme
Sütunlar arasında çizgiler eklerken, bunu stil sayfanıza eklenen yalnızca bir basit stil ile yapabilirsiniz. Aşağıdaki CSS, tablonuzun her satırı arasında dikey çizgiler ekleyecektir:
tr {
kenar alt: katı 1px siyah;
}
Kenarlığı tablonun altından kaldırmak için, bir kez daha bu tr etiketine bir sınıf eklersiniz:
class = "no ötesi">
Stil sayfanıza şu stili ekleyin:
.sınır yok {
kenar-dip: yok;
}
Tablodaki Belirli Sütunlar veya Satırlar Arasındaki Satır Ekleme
Yalnızca belirli satırlar veya sütunlar arasında çizgiler istiyorsanız, bu hücrelerde veya satırlarda bir sınıf kullanmanız gerekir. Sütunlar arasında bir çizgi eklemek, satırlar arasında biraz daha zordur, çünkü sınıfı bu sütundaki her hücreye eklemeniz gerekir. Tablonuz bir tür CMS'den otomatik olarak oluşturulmuşsa, bu mümkün olmayabilir, ancak sayfayı kodlamak için elinizdeyseniz, bu efekti elde etmek için gereken uygun sınıfları ekleyebilirsiniz.
class = "Yan ötesi">
Satırlar arasındaki satırları eklemek çok daha kolaydır, çünkü sadece satırı istediğiniz çizgiye ekleyebilirsiniz.
class = "border-bottom">
Ardından CSS'yi stil sayfanıza ekleyin:
.border tarafı {
sınır-sol: katı 1px siyah;
}
.border-bottom {
kenar alt: katı 1px siyah;
}
Tablodaki Bireysel Hücreler Çevresi Çizgileri Ekleme
Tek tek hücrelerin etrafında çizgi eklemek için, etrafınıza kenarlık istediğiniz hücreleri bir sınıf ekleyin:
class = "border">
Sonra stil sayfanıza şu CSS'yi ekleyin:
.border {
kenarlık: katı 1px siyah;
}
Tablodaki Bireysel Hücreler İçindeki Satır Ekleme
Bir hücrenin içeriğinin içine çizgiler eklemek istiyorsanız, bunu yapmanın en kolay yolu yatay kural etiketi ile (
) olur.
Faydalı ipuçları
Kenarlarınızda boşluklar fark ederseniz, kenarlık daraltma stilinin tablonuzda ayarlandığından emin olmalısınız. Stil sayfanıza aşağıdakileri ekleyin:
tablo {
sınır-çöküşü: çöküşü;
}
Yukarıdaki CSS’lerin tümünü engelleyebilir ve tablo etiketinizde kenarlık özelliğini kullanabilirsiniz. Bununla birlikte, kullanımının, kullanımdan kaldırılmamış olsa da, yalnızca sınırın genişliğini tanımlayabileceğiniz ve yalnızca tablonun tüm hücrelerine ya da hiçbir hücresine sahip olamayacağından, CSS'den önemli ölçüde daha az esnektir.