Web tasarım kursumuzun, CSS derslerinin, 10.bölümünü işlemekteyiz. Herkese başarılar dilerim.
CSS Tablolar
Önceki derslerimizde temel seviyede görmüş olduğumuz tablolara bu dersimizde CSS stilleri vermeyi öğreneceğiz.
Bir HTML tablosunun tasarımı, CSS yardımı ile çok büyük oranda değiştirilebilir.
Tablo Kenarlıkları
CSS’te tablolarımıza kenarlık verebilmek için border özelliği kullanılır.
Aşağıdalki örnekte <table>,<th> ve <td> öğelerine kenarlık verimiştir.
| İsim | Soyisim |
|---|---|
| Peter | Lois |
| Griffin | Griffin |
web tasarım css style tag
Fark ettiyseniz yukarıdaki tablonun çift kenarlığa sahip olduğunu görmüşsüzdür
Bunun sebebi <th> ve <td> etiketlerinin kendilerine ait ayrı birer kenarlıklarının olmasıdır.
Daraltılmış Tablo Kenarlıkları
border-colapse özelliği tablo kenarlıklarının tek kenarlı olup olmamasını ayarlar.
web tasarım css style tag
Eğer sadece tablo etrafında bir kenarlık belirlemek isterseniz border<table> özelliklerini kullanırız.
örnek:
web tasarım css style tag
Tablo Genişliği ve Yüksekliği
Tablomuzun genişlik ve yükseklik ayarlarını belirlemek için width ve height elemanlarını kullanırız.
Aşağıdaki örnel tabonun genişliği 100%,yüksekliği ise 50px olarak belirlenmiştir.
| İsim | Soyisim |
|---|---|
| Peter | Lois |
| Griffin | Griffin |
web tasarım css style tag
Yatay Hizalama
text-align tablolarımızdaki <th> ve <td> etiketleri arasındaki yazıların hepsini istediğim tarafa yaslamamıza olanak sağlar.
Tablolarımızda <th> öğeleri içerisindeki yazıları dafault(varsayılan) olarak ortalanmış biçimde gelir.
<td> öğeleri arasındaki yazılar ise default olarak sol tarafa yaslanmış biçimde gelmektedirler.
Aşağıdaki örnekte hrm <th> hemde <td> öğeleri arasındaki yazılanları sol tarafa yaslanmış hali gösterilmiştir.
web tasarım css style tag
Dikeyde Hizalama
vertica-align Tablo veya <td> <th> içeriklerinin dikey olarak hizalanmasında kullanılır.
Bir tabloda içerikler default(varsayılan) olarak ortalanmış şekilde gelmektedir.
web tasarım css style tag
Tablo Dolgusu(table padding)
Web tasarımlarımızda tablolarımızın daha güzel görünmeleri için tablo içeriği ve tablo kenarlığı arasında bir doğru oluşturmak her zaman küçük ama etkili bir ayrıntıdır.
web tasarım css style tag
Yatay Kenarlıklar
Tasarımlarımıza daha şık bir görünüm vermek ve alışılmış tablolardan biraz farklı bir şey yapmak istiyorsanız tablonuzun kenarlıklarını kaldırıp,sadece alt kenarlık vermeyi denemelisiniz.
web tasarım css style tag
Üzerine Gelince Renk Değiştiren Tablo
Daha önceki derslerimizde Hover elemanının ne işe yaradığını detaylı bir biçimde işlemiştik.
Şimdi bu elemanımızı tablolarımıza stil vermek amacı ile kullanacağız.
| İsim | Soyisim |
|---|---|
| Peter | Lois |
| Griffin | Griffin |
