HTML ve CSS için Başlangıç ​​(Bölüm 08): Tablolar (02)

İlk olarak, hücrelerin bir satır içinde sütun sütun nasıl birleştirileceğini göstereceğim. Bu şekilde ilgili satır içinde bir sütunun birden fazla sütun boyunca uzanmasını sağlayabiliriz.

Bir örnek:

<table border="1">
   <tr>
      <th colspan="2">Randevular</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Burada kullanılan th elementine gelmeden önce bir söz. Bu elementle başlık hücreleri işaretlenir. Tarayıcılar bu hücreleri genellikle kalın ve merkezlenmiş olarak görüntüler. Ve işte tarayıcıda elde edilen sonuç:

th içindeki colspan özelliği ayarlanır. Değer olarak, mevcut hücrenin kaç sütun boyunca uzanması gerektiği beklenir. Mutlaka belirtilen sütun sayısına dikkat edin, aksi takdirde istenmeyen sonuçlar ortaya çıkabilir. Verilen örnekte, th ile belirtilen başlık satırının iki sütun boyunca uzanması gerekiyor. Diğer iki satır içinde sırasıyla yine iki sütun yer almaktadır.

Hücreleri birleştirirken bir ipucu daha. Geliştirme aşamasında tablolara bir çerçeve (border) atayın. Böylece birleştirmenin istenildiği gibi olup olmadığını hemen görebilirsiniz.

Bir sütunda hücreleri satır satır birleştirmek

rowspan özelliği ile bir sütunda birden fazla hücre birleştirilebilir. Bu durumda ilgili hücre, sütun içinde birden fazla satır boyunca uzanır. Bunun için yine bir örnek:

<table border="1">
   <tr>
      <th rowspan="2">Renk</th>
      <td>Mavi</td>
   </tr>
   <tr>
      <td>Yeşil</td>
   </tr>
   <tr>
      <th rowspan="2">Boyut</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

Tarayıcıda, durum şu şekilde görünür:





rowspan özelliğine bir sayısal değer verilir. Bu değer nihayetinde bir hücrenin bir sütun içinde kaç satır boyunca uzanacağını belirler. Burada da belirtilen satır sayısının doğru olması gerektiği tabii ki unutulmamalıdır.

Hücreleri aynı anda satır ve sütun boyunca birleştirmek

rowspan ve colspan özellikleri birlikte de kullanılabilir. Bu sayede bir tabloda birden fazla satır ve sütun boyunca uzanan hücreler tanımlanabilir. Bu da yine bir örnekle en iyi şekilde gösterilebilir.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Daire</th>
      <td>5 Oda</td>
   </tr>
   <tr>
      <td>154 m²</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Araç park yeri</td>
      <td>Zemin Isıtması</td>
   </tr>
</table>

Tarayıcıda sonuç şu şekilde görünür:





İki özelliğin bir araya getirilmesinde sonuç olarak, hücre sayısının doğru olması gerektiği unutulmamalıdır.

Tabloları etiketlemek

Tabloları daha anlaşılır hale getirmenin oldukça ilginç bir yolu, caption elementinin sunmasıdır. Çünkü bu şekilde bir tabloya başlık veya açıklama eklemek mümkün olur. caption içeriği her durumda tablonun dışında gösterilir, ancak tanımı tablo içinde yapılır.

caption için tipik bir uygulamanın bir örneği aşağıda verilmiştir:





Tablo üzerinde bir tablo başlığı görüntülenir. Varsayılan olarak başlık, tablonun üstünde merkezi konumlanır. Bu, tabii ki CSS ile isteğe göre kolayca değiştirilebilir.

caption elementi hemen <table> tanımının ardından belirtilir.

Yukarıda gösterilen örneğin tam sözdizimi aşağıda yer almaktadır:

<table border="1">
   <caption>Ortam-Verileri</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Konu</th>
         <th>Gösterimler</th>
         <th>Eğilim</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Haziran 2014 Durumu</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12.123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Tabloları Biçimlendirme

Tabloları biçimlendirmek için eski HTML sürümlerinde birçok özellik bulunmaktaydı. Attributler aracılığıyla düzenlenebilecek şeylerin bazı örnekleri burada. (Tarayıcılar bu özellikleri halen destekler, ancak HTML5'te artık kullanılmamalıdır).

• Dış Kenarlardır

• İç Tablo Kenarları

• Genişlik ve Yükseklik Bilgileri

• Izgara Çizgileri

• Hücre İçeriği Hizalaması

• Renkler

• Arka Plan Resimleri

Gördüğünüz gibi, gerçekten her şeyin ilgili HTML Öznitelikleri üzerinden kontrol edilebileceğini görebilirsiniz. Aşağıdaki örnek, bu olanakları geniş kapsamlı olarak kullanan bir tabloyu göstermektedir:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Bir</td>
      <td width="200" bgcolor="#00ffff">İki</td>
      <td width="200">Üç</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Dört<</td>
      <td bgcolor="#996666">Beş</td>
      <td bgcolor="#003333">Altı</td>
   </tr>
 </table>

Sonuca bakmak istediğiniz sonucu sunacaktır.

Ancak göründüğü gibi görünmesine rağmen, arkadaki sözdizimi hiç de etkili değildir. Tablo özelliklerini CSS aracılığıyla kontrol etmek çok daha iyidir. Yeni CSS özellikleri sayesinde, sadece eski öznitelikleri modern sözdizimiyle değiştirmekle kalmazsınız. Ayrıca ek fonksiyonellikler de uygulanabilir. Örneğin, tablo satırlarını artık kolayca sıra sıra renklendirebilirsiniz.

Eski HTML ve CSS zamanlarında, böyle bir sonuç elde etmek için bazen karmaşık kodlarla uğraşmak gerekiyordu. Şimdi ise CSS'nin sunmakta olduğu imkanlara tam olarak odaklanır ve benzer sonuçları çok daha kolay bir şekilde elde edebilirsiniz.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Daha önce de belirtildiği gibi, CSS'ye bu seri kapsamında detaylı bir şekilde değineceğim.