HTML ve CSS ile Tablo Örnekleri
HTML ve CSS ile Tablo Örnekleri
Tablolar, web sayfalarında verileri düzenlemek ve görsel olarak sunmak için sıklıkla kullanılan bir HTML elementidir. HTML ve CSS kullanarak tablo oluşturmak oldukça kolaydır ve bunun için farklı seçenekler mevcuttur. Bu makalede, HTML ve CSS ile tablo örneklerini detaylı bir şekilde inceleyeceğiz.
HTML’de tablo oluşturmak için
| etiketi kullanılırken, tablonun içeriğini | etiketi ile oluştururuz. CSS kullanarak tablolara stil vermek ve daha çağdaş görünümler elde etmek mümkündür.
Örneğin, bir kişinin adını, soyadını ve yaşını içeren bir tablo oluşturmak için aşağıdaki HTML kodunu kullanabiliriz: HTML Kodu:
“` Yukarıdaki HTML kodu, basit bir tablo oluşturur. Ad, soyad ve yaş sütunlarının başlıklarını | etiketi ile belirtirken, gerçek verileri | etiketi ile tanımlarız.
Bu temel tablo yapısını kullanarak daha karmaşık tablolar da oluşturabiliriz. Örneğin, bir kişinin adını, soyadını, yaşını ve şehirini içeren bir tablo oluşturmak istediğimizde aşağıdaki gibi bir HTML kodu kullanabiliriz: HTML Kodu:
“` Bu örnekte, tabloya bir sütun daha ekledik ve her bir kişinin şehir bilgisini de ekledik. CSS kullanarak tabloların stilini değiştirmek ve daha estetik bir görünüm elde etmek mümkündür. Örneğin, tablodaki başlıklara farklı bir arka plan ve metin rengi uygulayabiliriz. CSS Kodu: Yukarıdaki CSS kodu, tablodaki başlıklara bir arka plan rengi ve metin rengi uygular. Böylece başlıklar daha belirgin hale gelir. HTML ve CSS kullanarak tablo oluşturmak oldukça basit ve esnek bir işlemdir. Bu sayede verileri düzenli bir şekilde gösterebilir ve istediğimiz özelleştirmeleri yapabiliriz. Bu makalede, HTML ve CSS ile tablo oluşturmanın temel prensiplerini öğrendiniz. Artık bu bilgileri uygulayarak kendi tablolarınızı oluşturabilir ve web sitenizin görünümünü geliştirebilirsiniz. 
|
|---|