BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 


Tablolar, HTML ilk çıktığı zamanlarda, asıl amacından daha çok web arabirimleri oluşturmak için kullanılıyordu. Tabi bu şekilde yapılan web sayfalarında çok fazla kod olduğu için web tarayıcıların bu sayfaları işlemesi (render) daha uzun sürüyordu. Ayrıca tablolarla oluşturulmuş bir tasarımda değişiklik yapmak şimdiki kadar kolay olmuyordu. Daha sonra devreye CSS girdi. Artık günümüzde modern diyebileceğimiz bütün web siteleri CSS ile oluşturuluyor. Bu sayede tablolar da asıl amacı olan tablosal verileri göstermek için kullanılıyor. Tabi ki biz de bu makalede  tabloların asıl kullanım amacını inceleyeceğiz.

table,tr ve td Etiketleri

Basit olarak tablo oluşturmak için bu 3 etiket işimizi görecektir. İleride diğer tablo etiketlerine de değineceğim. Ama öncelikle bu 3 etiketle nasıl tablo oluşturulacağına bakalım. Tablo oluşturulurken aşağıdaki kurallara uymamız yerinde olacaktır:
  1. Her tablo için bir table etiketi açılır ve tablo bittiğinde bu etiket kapatılır.
  2. Tabloda yer alan her bir satır için tr etiketleri açılır.
  3. O satırda bulunan sütun sayısı kadar td etiketi açılır. (tr içerisinde)
  4. Her satırdaki td sayıları aynı olmalıdır.
  5. Tablonun içinde yer alan veriler sadece td etiketleri arasına yazılmalıdır.
Bu temel kuralları öğrendikten sonra bunu basit bir örnek üzerinde uygulayalım. Diyelim ki 2'ye 2'lik bir tablo oluşturmak istiyoruz. Yani tablomuz iki satır ve iki sütundan oluşacaz. Bunu sağlayan kodlar aşağıdaki gibi olmalıdır:
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Böylece 2x2'lik bir tablo elde etmiş olduk. Bu tablonun içerisinde olmasını istediğimiz verileri (yazı, resim, vs) <td></td> etiketlerinin arasına yazmalıyız.

caption Etiketi

Şimdi yine tablo oluştururken kullandığımız bu etiketten bahsedelim. caption etiketini tablo başlığı oluşturmak için kullanıyoruz ve bu etiketi table etiketinin hemen altına yazıyoruz. 
Şu örneğe inceleyelim:

<table border="1">
<caption>Tablo Başlığımız</caption>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</table>
Bu kodlar sonucunda tablonun en üstünde "Sayfa Başlığımız" şeklinde bir yazı görüntülenecek. Tabi bunun konumunu ve diğer özelliklerini birazdan CSS ile biçimlendireceğiz.
th Etiketi
Şimdi gelelim th etiketine. Bu etiket ile tabloda başlık hücreleri oluşturabiliyoruz. Yani başlık olmasını istediğimiz tablo hücresinde td yerine th kullanmalıyız.  Aşağıdaki örnek kodlara ve ekran görüntüsüne bakalım:
<table border="1">
<tr>
    <th>Adı-Soyadı</th>
    <th>Mesleği</th>    
</tr>
 
<tr>
    <td>Merve Aslan</td>
    <td>Öğretmen</td>   
</tr>
 
<tr>
    <td>Haçer Dinçer</td>
    <td>Mühendis</td>   
</tr>
 
<tr>
    <td>Sevda Dertli</td>
    <td>Doktor</td> 
</tr>
</table>
   
Adı-SoyadıMesleği
Merve Aslan
Öğretmen
Haçer DinçerMühendis
Sevda DertliDoktor
Dikkat ederseniz th etiketleri td'lerden farklı bir şekilde biçimlendirildi. Kalın ve ortalı oldu. Tabi yine bunu da CSS ile değiştireceğiz.

Tablo hücrelerini Biçimlendirme
Tablolarda bulunan hücrelerden bazılarını birleştirmemiz gerekebilir. Bu durumda rowspan ve colspan parametrelerini td veya th etiketine eklemeliyiz. Aşağıdaki tabloya bakalım:
<table border="1">
<tr>
    <td colspan="2">A Proje</td>
    <td colspan="2">B Proje</td>    
</tr>
 
<tr>
    <td>P.Numara</td>
    <td>İsim</td>   
    <td>P.Numara</td>
    <td>İsim</td>   
</tr>
 
<tr>
    <td>11</td>
    <td>AslıDemir</td>  
    <td>94</td>
    <td>Merve Duran</td>    
</tr>
 
<tr>
    <td>19</td>
    <td>Ayşe Turan</td> 
    <td>96</td>
    <td>Cemre Yılmaz</td>   
</tr>
</table>
Burada dikkat edilirse en üstteki satırda bulunan hücreler birleştirilmiş. Sağa doğru bir birleşme olduğu için colspan parametresini kullandık. 2 sayısı ise kaç tane hücrenin birleştiğini gösteriyor. Başka bir örneğe bakalım. Bu kez veri kullanmadan bir şekil üzerinden anlatacağım. Aşağıdaki tablo yapısını oluşturmak istiyoruz:
Bu tablo yapısında dikkat etmemiz gereken şey; ikinci satırdaki ilk sütun aşağıya doğru birleşmiş. O yüzden kullanacağımız parametre rowspan olacak. Tablonun kodu ise şu şekilde olmalı:
<table border="1">
<tr>
    <td colspan="2"></td>
</tr>
<tr>
    <td></td>
    <td rowspan="2"></td>
</tr>
<tr>
    <td></td>
</tr>
</table>
Rowspan ve colspan parametrelerinden hangisi hangisiydi diye bir karışıklığa düşerseniz aşağıdaki resim hatırmanıza yardımcı olacaktır:
Görüldüğü üzere rowspan aşağı doğru, colspan ise sağa doğru hücre birleştiriyor. Birleştirilmiş hücreleri oluştururken aşağıdaki adımları izlerseniz en karmaşık tabloları bile oluşturabilirsiniz.
  1. Tablo için table etiketi açılır.
  2. İlk satır için tr etiketi açılır.
  3. İlk satırda bulunan ilk hücreye bakılır. Eğer birleştirilmiş hücre ise rowspan veya colspan ile td eklenir.
  4. Birleştirilmiş değilse td açılır ve kapatılır.
  5. Aynı şekilde diğer hücrelere de bakılır ve td'ler oluşturulur.
  6. Sona gelindiğinde tr kapatılır.
  7. Aynı işlemler bütün tr'ler için yapılır.
Uygulama: Verilen bilgileri kullanarak aşağıdaki tablo yapısını nasıl oluşturabiliriz?
CSS ile Tabloları Birleştirme

Şimdi sıra geldi CSS ile tabloları biçimlendirmeye. Öncelikle tablolara özgü aşağıdaki CSS özelliklerine bakalım:
table-layout: table etiketine eklenen bu özelliğin karşısına fixed yazarsak bütün sütunlar eşit genişlikte olur.
border-collapse: table etiketine eklenen bu özelliğin karşısına collapse yazarsak hücreleri oluşturan kenarlıklar tek çizgi şeklinde gözükür.
caption-side: Sadece caption etiketine eklenebilecek bu özelliğin karşısına top, left, right ve bottom yazarak tablo başlığının konumunu değiştirebiliriz.
Bu bilgilerden sonra örnek bir tablo oluşturarak bunu biçimlendirmeye çalışalım. Hazırladığım tablonun HTML kodları şu şekilde:
Örnek bir tablo olarak;
HTML Kodları
<table border="1">
<caption>Web Tasarımında Kullanılan Bazı Programlar</caption>
<tr>
    <th>Program</th>
    <th>Üretici</th>
    <th>Açıklama</th>
</tr>
<tr>
    <td>Dreamweaver</td>
    <td>Adobe</td>
    <td>Kod editörü</td>
</tr>
<tr>
    <td>Photoshop</td>
    <td>Adobe</td>
    <td>Resim düzenleme programı</td>
</tr>
<tr>
    <td>Filezilla</td>
    <td>GNU</td>
    <td>FTP istemcisi</td>
</tr>
<tr>
    <td>Notepad++</td>
    <td>GNU</td>
    <td>Kod editörü</td>
</tr>
</table>
Şimdi CSS kodlarını yazalım:


* {
    margin:0;
    padding:0;
}
body {
    font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
    background:#EEE;
}
table {
    width:600px;
    margin:200px auto;
    table-layout:fixed;
    border-collapse:collapse;
}
caption {
    font-size:18px;
    margin-bottom:10px;
    color:#CC0;
    font-weight:bold;
    caption-side:top;
}
tr:nth-child(odd) {
    background:#DDD;
}
td, th {
    padding:8px;
}
th {
    background:#0DD;
}
Bu işlemimiz böylece bitmiş oluyor.Eğer bu bana uzun gelir bununla uğraşamam bana hazır bir tablo html kodu lazım diyorsanız bu tablo işinizi görebilir.
<table width="400" border="1">
  <tr>
    <td width="100" rowspan="2">Google Plus Kodu</td>
    <td colspan="2">Arama</td>
  </tr>
  <tr>
    <td width="150">Resim Kodu</td>
    <td width="150">Arama Kodu</td>
  </tr>
</table>

Görüntü;
Google Plus Kodu Arama
Resim Kodu Arama Kodu

Yorum Gönder Blogger

 
Top