Tasarım Kodlama

HTML – CSS ile Tablo Biçimlendirme

HTML ile temel bir tablo tasarımı yaptıktan sonra tablonun çerçeve verme, çerçeve rengini değiştirme, hücrelere yada tabloya arka plan verme, yazıları hizalama yada yazının biçimini değiştirme gibi işlemleri yapmak isteyebilirsiniz.

İşte bu yazı sizlere tablonun ve hücrelerin biçimini nasıl değiştireceğinizi gösterecektir. Her uygulama kendi içinde ayrı ayrı örnekler barındıracak ve yukarıdaki bütün maddelere cevaplar içerecektir.

CSS Kullanmadan Tablo Ekleme

En temel hali ile bir tabloyu oluşturmak için aşağıdaki gibi <table>, <tr> ve <td> etiketleri kullanılır. Aşağıdaki örneği inceleyelim.

HTML Tablo Biçimlendirme

Yukarıdaki tabloda her hangi bir css kullanılmadığı için HTML kodları aşağıdaki gibi olacaktır.

CSS ile Tabloya Çerçeve Ekleme

Yukarıdaki gibi tablo ekledikten sonra tabloya çerçeve eklemek için CSS border özelliğini kullanıyoruz. Aşağıdaki örneği ve HTML/CSS kodlarını inceleyelim.

HTML CSS Tablo Biçimlendirme

<head> etiketi arasına yazılan <style> etiketi içine table border ekleme kodunu renk kodu ve çerçeve kalınlığı ile ekledik. Bu işlemi tek satırda yapmak için border: 3px solid #CF000F; özelliğini tanımladık.

Tablo İçindeki Hücrelerin Çerçevelerini Düzenleme

Tablo içindeki çerçevelerin hücrelerini düzenlemek için yine border özelliği ile table td seçicisini bir arada kullanmak gerekiyor. Aşağıdaki görseli ve HTML kodlarını inceleyelim.

HTML CSS Tablo Biçimlendirme

Yukarıdaki turuncu alanlar <td> hücrelerini ifade etmektedir. CSS’de bunu seçmek için table td şeklinde kullanmak gerekiyor. Seçim yaptıktan sonra border ile renklendirme yaptık.

CSS ile Tabloya Genişlik ve Yükseklik Verme

CSS ile bir nesneye genişlik ve yükseklik vermek için width ve height nitelikleri kullanılır. Tablolarda birer nesne olduğu için width ve height kullanarak genişlik ve yükseklik değerlerini değiştirebiliriz.

Aşağıdaki örnekte tablonun yüksekliği 250px, genişliği 500px olarak düzenlenmiştir.

HTML CSS Tablo Biçimlendirme

Genişlik ve yükseklik özelliklerini table etiketine tanımlıyoruz.

CSS ile Tablo içindeki Öğleri Hizalama

Bazı durumarda tablo içindeki öğeleri ortalama(center), sola(left) hizlama, sağa(right) hizalama yada her iki yana yaslama(justify) yapmak isteyebilirsiniz.

Hizlama işlemi için text-align özelliğini kullanarak tablodaki öğeleri istediğini duruma göre hizalama yapabilirsiniz. Aşağıdaki örnekte tüm öğeler ortalanmış durumda görünecektir.

HTML CSS Tablo Biçimlendirme

CSS ile Tablodaki ilk Satırı Kalın Gösterme

tablo içindeki öğeleri kalın göstermek için <th> etiketi kullanılabileceği gibi CSS ile de görününde kalın göstermek mümkündür.

Öncelikli olarak sadece bir satırın kalın olacağını ifade ettiğimiz için ilk <tr> etiketine bir tane id tanımlaması yapıyorum. Birinci satırdaki tr etiketini şu şekilde değiştirdim. <tr id=”tablo-baslik”>

Ardından id değeri tablo-baslik olan öğeyi CSS ile biçimlendirmek için #tablo-baslik seçicisini tanımlayarak yazıyı kalın yapmak için font-weigth özelliğine 100-900 arasında bir değer girdim.(100 en ince, 900 en kalın)

HTML CSS Tablo Biçimlendirme

CSS ile Tablo içindeki Metnin fontunu değiştirme

Tablodaki fontun biçimini değiştirmek için font-family özelliğini kullanarak istediğiniz fontu verebilirsiniz. Ayrıca google font ile aldığınız fontlarda da aynı yöntemi kullanabilirsiniz.

Aşağıdaki örnekte tablonun fontunu comic sans olarak değiştirdim.

HTML CSS Tablo Biçimlendirme

Tablonun Arkaplan Rengini Değiştirme

Tablonun arkaplan rengini CSS ile değiştirmek için background yada background-color özelliğini kullanabilrisiniz. Aşağıdaki örnekte tablonun arkaplan rengi değiştirilmiştir.

HTML CSS Tablo Biçimlendirme

Tablodaki Yazıların Rengini Değiştirme

CSS ile bir yazının rengini değiştirmek için color özelliği kullanılır. Aşağıdaki örnekte yazı rengi beyaz (#fff) yapılmıştır.

1 yorum