HTML ve CSS ile Tabloya Dış Kenarlık Ekleme
Tablolar, web sayfalarında veri görüntülemek için yaygın olarak kullanılan güçlü bir araçtır. Dış kenarlıklar, tabloyu çevreleyen ve onu sayfanın geri kalanından ayıran bir çizgi ekleyerek tabloyu görsel olarak geliştirebilir ve daha okunabilir hale getirebilir.
Bu makalede, HTML ve CSS kullanarak tabloya dış kenarlık eklemenin adım adım bir kılavuzunu sunacağız. Ayrıca, konuyla ilgili faydalı kaynaklar ve örnekler de sağlayacağız.
HTML ile Dış Kenarlık Ekleme
Tabloya dış kenarlık eklemek için HTML’de border özelliğini kullanabilirsiniz. border özelliği, kenarlığın genişliğini, stilini ve rengini belirlemenize olanak tanır.
“`html
| Başlık 1 | Başlık 2 | Başlık 3 |
|---|---|---|
| Veri 1 | Veri 2 | Veri 3 |
“`
Yukarıdaki HTML kodu, kenarlıkları olmayan basit bir tablo oluşturur. Tabloya dış kenarlık eklemek için border özelliğini table etiketine eklemeniz gerekir:
“`html
| Başlık 1 | Başlık 2 | Başlık 3 |
|---|---|---|
| Veri 1 | Veri 2 | Veri 3 |
“`
Bu kod, tabloyu çevreleyen 1 piksel genişliğinde siyah bir dış kenarlık ekleyecektir.
CSS ile Dış Kenarlık Ekleme
CSS kullanarak tabloya dış kenarlık eklemek daha fazla esneklik sağlar. border özelliğini CSS’de kullanarak kenarlığın genişliğini, stilini, rengini ve yuvarlamasını belirtebilirsiniz.
css
table {
border: 1px solid black;
}
Yukarıdaki CSS kodu, tabloyu çevreleyen 1 piksel genişliğinde siyah bir dış kenarlık ekleyecektir. Kenarlığın genişliğini, stilini ve rengini değiştirmek için border özelliğini aşağıdaki gibi kullanabilirsiniz:
- Genişlik:
border-width - Stil:
border-style - Renk:
border-color
Örneğin, 2 piksel genişliğinde, noktalı, mavi bir dış kenarlık eklemek için aşağıdaki CSS kodunu kullanabilirsiniz:
css
table {
border: 2px dotted blue;
}
Kenarlık Yuvarlama
CSS3, border-radius özelliğini kullanarak kenarlıkları yuvarlamanıza olanak tanır. Bu, tabloya daha modern ve şık bir görünüm kazandırabilir.
css
table {
border: 1px solid black;
border-radius: 5px;
}
Yukarıdaki CSS kodu, tabloyu çevreleyen 1 piksel genişliğinde siyah bir dış kenarlık ekleyecek ve kenarlıkları 5 piksel yuvarlayacaktır.
Faydalı Kaynaklar
Sonuç
HTML ve CSS kullanarak tabloya dış kenarlık eklemek, tabloyu görsel olarak geliştirmenin ve daha okunabilir hale getirmenin kolay bir yoludur. Bu kılavuzu izleyerek, tablonuza istediğiniz dış kenarlığı ekleyebilir ve web sayfanızın genel görünümünü iyileştirebilirsiniz.