Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Belge Tipi Bildirimi (DOCTYPE) adlı yazımızda HTML için gerekli temel etiketlerin kullanımı öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 5 – Belge Tipi Bildirimi (DOCTYPE) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML’de Tablo kullanımı nasıl olur ? Tablolarla neler yapabiliriz ? Tablolar nerede kullanılırlar ? gibi konuları öğreneceğiz.
Önceki derslerimizde , bir çok HTML etiketinin neler olduğunu ve görevlerini öğrenmiştik. Bu dersimizde ise tablolar konusunu kavrayacağız ve temelini atmış olacağız.
Tablolar 2000'li yıllarda web tasarımda en çok kullanılan teknikti. Sitelerin dizaynı tablolar ile yapılırdı, lakin sonrasında yerini < div >'lere ve HTML 5'in özel etiketlerine bıraktı. Çünkü tablolar ile yapılan sitelerin kullanımı ve kodlaması oldukça zordu. Tablolar, bilim adamlarının verilerini web sitelerinde paylaşabilmeleri için geliştirilmiş bir HTML etiketidir.Günümüzde site tasarımlarında kullanılmasalar bile bir çok makalede bizlere yardımcı olmaktadırlar o yüzden tablo yapısını iyi bir şekilde kavramamız gerekmektedir. Tablolara özel etiketler vardır bunlar , < table > , < tr > , < td > , < th > 'dir. Şimdi bunların ne işe yaradıklarını örneklerle beraber öğrenelim
Tablo oluşturmada kullanılan temel etiketler < table > , < td > ve < tr >'dir. İngilizce'de Table kelimesi tablo anlamına gelmektedir. < tr > etiketi tabloda ki satırı belirtmektedir ve table row kelimesinden gelmektedir. < td > etiketi ise tabloda ki sütunu belirtmektedir ve table data kelimesinden gelmektedir.
Tablolarla ilgili basit bir örnek yapalım , < table > etiketi ile tablomuzun temel taşını oluşturuyoruz , daha sonra içerisine < tr > etiketi ile ilk satırımızı oluşturuyoruz ve satırımızın içerisine de < td > etiketi ile sütunumuzu oluşturuyoruz. Böylece 1x1'lik (1 satır ve sütundan oluşan) bir tablo oluşturmuş oluyoruz.
Table Etiketi Örneği ;
<table border="1">
<tr>
<td>İlk Hücre</td>
</tr>
</table>
Table Etiketi Çıktısı ;
| İlk Hücre |
Border parametresi ile anlayacağınız üzere tablomuzun çerçeve kalınlığını belirttik. Border parametresinin değeri piksel cinsinden ölçülür.
Şimdi ise başka bir örneğe geçelim ve 2x2'lik bir tablo oluşturalım.
<table border="1">
<tr>
<td>1. Hücre</td>
<td>2. Hücre</td>
</tr>
<tr>
<td>3. Hücre</td>
<td>4. Hücre</td>
</tr>
</table>
Kodun Çıktısı ;
| 1. Hücre | 2. Hücre |
| 3. Hücre | 4. Hücre |
Tablolarda ki hiyerarşik yapıyı anladığınız sürece hiç bir sıkıntı çekmezsiniz. Daha iyi anlamak için karışık bir örnek yapalım.
<table border="1">
<tr>
<th>Takım İsmi</th>
<th>Stadı</th>
<th>Yıldızları</th>
</tr>
<tr>
<td>Galatasaray</td>
<td>Türk Telekom Arena</td>
<td>4</td>
</tr>
<tr>
<td>Fenerbahçe</td>
<td>Şükrü Saraçoğlu</td>
<td>3</td>
</tr>
<tr>
<td>Beşiktaş</td>
<td>Vodafone Arena</td>
<td>2</td>
</tr>
<tr>
<td>Trabzonspor</td>
<td>Avni Aker Stadı</td>
<td>1</td>
</tr>
</table>
Kodun Çıktısı ;
| Takım İsmi | Stadı | Yıldızları |
|---|---|---|
| Galatasaray | Türk Telekom Arena | 4 |
| Fenerbahçe | Şükrü Saraçoğlu | 3 |
| Beşiktaş | Vodafone Arena | 2 |
| Trabzonspor | Avni Aker Stadı | 1 |
*Uyarı : Sizde kodun çıktısı farklılık gösterebilir sebebi sitemizde ekstra olarak css kullandığımız için tablo yapısının görselliğini değiştirmemiz.
Gördüğünüz üzere tablo kodumuzda , < th > etiketini kullandık. < th > etiketi table header cümlesinin kısaltması olup tablo başlığı anlamına gelmektedir. < th > etiketi sayesinde tablolarımızda sütunların başlıklarını oluşturabiliriz.
Tebrikler! Bu derste HTML’de Tablo (Table) Kullanımını öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin altıncı kısmı olan dersimizde , HTML’de Tablo (Table) Kullanımını öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !
Bir sonraki derse “HTML Dersleri 7 – Stiller (Styles)” geçmek için tıklayınız !