HTML tabloları: Temel bilgiler

Bu makalede HTML tablolarında satırlar, hücreler ve başlıklar ile birlikte hücrelerin birden çok sütuna ve satıra yayılması gibi temel bilgileri öğreneceğiz. Aynı zamanda tablolarımızı görsel olarak süslemek için kullanacağımız CSS özelliklerine göz atacağız.

Tablo nedir?

Tablo, satırlar ve sütunlardan oluşan yapılandırılmış bir veri kümesidir (tablo verileri). Örneğin bir kişinin yaşı ile ilişkisini veya haftanın hangi günü yerel yüzme havuzunun açık olacağı gibi bilgileri listememizi ve bunları hızlı, kolay bir şekilde sunmamıza olanak tanır.

Tabloları aslında çok yaygın olarak kullanırız. Örneğin 1800’de ABD Nüfus Sayımı belgesinde aşağıdaki tablo kullanılmıştı:

Bu nedenle, HTML yaratıcılarının web üzerinde tablo verilerinin yapılandırılması ve sunulması için bir araç sağlamalarına şaşmamalı.

Tablo nasıl çalışır?

Bir tablonun önemi katı olmasıdır. Satır ve sütunlar arasında görsel ilişkilendirmeler yapılarak bilgiler kolayca yorumlanır. Örneğin aşağıdaki tabloya bakın ve Mars’ın yoğunluğunu (Density) bulun. İlgili satır ve sütun başlıklarını ilişkilendirerek bunu muhtemelen hızlıca yapabildiniz.

Doğru yapıldığında, görme engelli kişiler bile bir HTML tablosundaki tablo verilerini yorumlayabilir; başarılı bir HTML tablosu, tüm kullanıcıların deneyimini geliştirmelidir.

Tablo stili

Bu bağlantıdaki canlı örneğe bakın. Fark edeceğiniz gibi örnekteki tablo biraz daha okunabilir – bunun nedeni, bu sayfada yukarıda gördüğünüz tablonun minimal bir stile sahip olması ve bağlantıdaki sürümde ise daha iyi bir CSS’in uygulanmasıdır.

Tabloların webde etkili olabilmesi için, sağlam bir HTML yapısının yanı sıra CSS ile de bazı bilgileri sağlamanız gerekir. Bu kılavuzda HTML kısmına odaklanıyoruz. 

Bu kılavuzda CSS’ye odaklanmayacağız, ancak tablolarınızı herhangi bir stil olmadan elde ettiğiniz varsayılandan daha okunaklı hale getirecek minimal bir CSS stil sayfası kullanabiliriz. Bu CSS dosyasını burada bulabilirsiniz. Ayrıca CSS’in uygulandığı bir HTML şablonuna da ulaşabilirsiniz – bunlar size HTML tablolarıyla denemeler yapmak için iyi bir başlangıç ​​noktası oluşturacaktır.

HTML tablolarını ne zaman KULLANMAMALISINIZ?

Tablo verileri için HTML tabloları kullanılabilir – bunun için tasarlandılar. Ancak, ne yazık ki, bir çok kişi web sayfalarını düzenlemek için de HTML tablolarını kullanmaya başladı. Bunun temel sebebi tarayıcılar arasında CSS desteğinin önceden çok kötü olmasıydı; tablolar ise tüm tarayıcılarda genellikle uygun sonuçlar verirdi. Bu yöntem her ne kaddar günümüzde çok daha az yaygın olsa da yine de web’in bazı köşelerinde bunları görebilirsiniz.

Kısacası, CSS teknikleri yerine mizanpaj için tabloları kullanmak kötü bir fikirdir. Bunun nedenlerine bakalım:

1. Düzen tabloları görme engelli kullanıcılar için erişilebilirliği azaltır: ekran okuyucuları HTML sayfası etiketlerini yorumlamada ve kullanıcıya içeriğini okumada görme sorunları olan ziyaretçiler tarafından kullanılır. Tablolar mizanpaj için doğru araç olmadığından ve biçimlendirme CSS mizanpaj tekniklerinden daha karmaşık olduğundan, ekran okuyucuların çıktıları kullanıcıları için kafa karıştırıcı olacaktır.
2. Tablolar etiket çorbası üretir: Yukarıda bahsedildiği gibi, tablo düzenleri genellikle uygun düzen tekniklerinden daha karmaşık biçimlendirme yapıları içerir. Bu, kodun yazılması, bakımı ve hata ayıklamasının daha zor olmasına neden olabilir.
3. Tablolar otomatik olarak duyarlı değildir: Uygun düzen konteynerları ( <header>, <section>, <article>, veya <div>) kullandığınızda, genişlikleri varsayılan olarak üst öğelerinin %100’üne ayarlanır . Öte yandan tablolar, varsayılan olarak içeriklerine göre boyutlandırılır, bu nedenle çeşitli cihazlarda etkin bir şekilde çalışması için tablo düzeni stilinde ekstra önlemler gerekir.

Aktif öğrenme: İlk tablonuzu oluşturma

Tabloların teorisinden yeterince bahsettik, şimdi pratik bir örneğe dalalım ve basit bir tablo oluşturalım.

1. Her şeyden önce, boş şablon.html ve minimal-table.css dosyalarının yerel makinenizde bir kopyasını oluşturun.
2. Her tablonun içeriği: <table></table> etiketleri ile çevrelenir. Bunları HTML’nizin gövdesine ekleyin.
3. Bir tablonun içindeki en küçük konteyner, bir <td> öğesi tarafından oluşturulan tablo hücresidir (‘td’, ‘table data – tablo verileri’ anlamına gelir). Aşağıdakileri tablo etiketlerinizin içine ekleyin:
   <td>Hi, I'm your first cell.</td>
4. Dört hücreli bir satır istiyorsak, bu etiketleri üç kez kopyalamamız gerekir. Tablonuzun içeriğini şu şekilde görünecek şekilde güncelleyin:

  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>

Göreceğiniz gibi hücreler birbirinin altına yerleştirilmez, aynı satırda otomatik olarak hizalanırlar. Her <td> eleman tek bir hücre oluşturur ve birlikte ilk satırı oluştururlar. Eklediğimiz her hücre sıranın uzamasını sağlar.

Bu satırın büyümesini durdurmak ve sonraki hücreleri ikinci bir satıra yerleştirmeye başlamak için <tr> öğesini kullanmamız gerekir (‘tr’, ‘tablo satırı’ anlamına gelir). Şimdi buna bakalım:

1. Önceden oluşturduğunuz dört hücreyi aşağıdaki gibi <tr> etiketlerin içine yerleştirin:

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

2. Şimdi bir satır oluşturdunuz, bir veya iki tane daha yapmayı deneyin – her satırın ek bir <tr> öğesine sarılması gerekir, her hücre de bir <td>‘ye.

Sonuç

Yazdıklarımız aşağıdaki gibi görünen bir tabloyla sonuçlanmalıdır:

<th> öğeleriyle başlık ekleme

Şimdi dikkatimizi tablo başlıklarına çevirelim – bir satırın veya sütunun başına içerdiği veri türünü tanımlayan özel hücreler ekleyebiliriz (örnek olarak, ilk bölümdeki “Kişi” ve “Yaş” hücrelerine bakın). Neden yararlı olduklarını tartışmaya gerek yok. Hemen bir örneğe bakalım. Önce kaynak kodu:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

Ve sonuç:

Böylece neler olup bittiğini bir nebze de anlayabiliyoruz. Ancak, sütun ve satır başlıklarını bir şekilde öne çıkarsak çok daha iyi olurdu.

Aktif öğrenme: tablo başlıkları

Bu tabloyu iyileştirmeye çalışalım.

1. İlk olarak tablo.html ve minimal-table.css dosyalarının yerel bir kopyasını oluşturun. HTML, yukarıda gördüğünüzle aynı şekilde Dogs örneğini içeriyor.
2. Tablo başlıklarını hem görsel hem de anlamsal olarak başlıklar olarak tanımak için <th> öğesini kullanabilirsiniz (‘th’, ‘table header – tablo başlığı’ anlamına gelir). Bu <td> ile tam olarak aynı şekilde çalışır, sadece normal bir hücreyi değil de bir üstbilgiyi belirtir. Şimdi HTML’nize gidin ve tablo başlıklarını çevreleyen tüm <td> öğelerini <th>‘ye dönüştürün.
3. HTML’nizi kaydedin ve bir tarayıcıya yükleyin; başlıklarınız artık başlıklar gibi görünmeli.

Başlıklar neden yararlıdır?

Bu soruyu zaten kısmen yanıtladık – başlıklar açıkça öne çıktığında ve tasarım genellikle daha iyi göründüğünde aradığınız verileri bulmak daha kolay olur.

Not: Tablo başlıkları bazı varsayılan stiller ile gelir – öne çıkmalarına yardımcı olmak için tabloya kendi stilinizi eklemeseniz.

Tablo başlıklarının ek bir avantajı da bulunur – scope özniteliği ile birlikte (bir sonraki makalede öğreneceğiz), her bir başlığı aynı satır veya sütundaki tüm verilerle ilişkilendirebiliriz. Bu nitelik tabloları daha erişilebilir hale getirir. Böylece ekran okuyucular daha sonra tüm bir veri satırını veya sütununu bir kerede okuyabilir, bu da oldukça kullanışlıdır.

Hücrelerin birden çok satır ve sütuna yayılmasına izin verme

Bazen hücrelerin birden çok satıra veya sütuna yayılmasını isteriz. Hayvan adlarını gösteren aşağıdaki basit örneği alın. Diyelim ki hayvan adının yanında erkek ve dişi adlarını da göstermek istiyoruz. Bunu yapamadığımız durumlarda da sadece hayvan adını göstermek, bunun da tüm tabloyu kapsamasını istiyoruz.

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

Ancak bu kodun çıktısı bize tam olarak istediğimizi vermiyor:

“Animals”, “Hippopotamus” ve “Crocodile”ın iki sütuna, “Horse” ve “Chicken”ın ise iki sıra boyunca aşağı doğru yayılmasını istemiştik. Neyse ki, tablo başlıkları ve hücreleri istediğimizi yapmamıza izin veren colspan ve rowspan niteliklerine sahiptir. Her ikisi de, yayılmasını istediğiniz satır veya sütun sayısın verebileceğimiz bir sayı değerini kabul eder. Örneğin, colspan="2" ile bir hücrenin iki sütuna yayılmasını sağlayabiliriz.

Bu tabloyu geliştirmek için colspan ve rowspan‘ı kullanalım.

1. İlk olarak hayvanlar-tablo.html ve minimal-table.css dosyalarının yerel bir kopyasını oluşturun. HTML kodu yukarıda gördüğünüzle aynı örneği içerir.
2. Ardından, colspan ile “Animals”, “Hippopotamus” ve “Crocodile” öğelerini iki sütuna yayalım.
3. Son olarak, rowspan ile de “Horse” ve “Chicken”‘ı iki sıra boyunca yayalım.
4. Kodumuzu kaydedip tarayıcıda açalım.

Aşağıdaki sonucu alacağız:

Sütunlara ortak stil sağlama

<col> olmadan stil oluşturma

Devam etmeden önce bu makalede size anlatacağımız bir özellik daha var. HTML, tüm bir veri sütununu tek bir seferde stilize etmemizi sağlar ( <col> ve <colgroup> öğeleri). Bunların var olma sebebi şu: bazen bazı sütun veya satırlara stil atamak isteriz, ancak bu can sıkıcı ve verimsiz bir yöntemdir. Tek tek <td> veya <th> öğelerine stil bilgisi yazmamız gerekir, ya gibi karmaşık bir CSS seçici kullanırız, :nth-child gibi.

Aşağıdaki basit örneğe bakalım:

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

Bu bize aşağıdaki sonucu verir:

Sütundaki üç hücrenin tamamında stil bilgilerini tekrarlamamız gerektiği için bu yöntem pek ideal olmadı (muhtemelen gerçek bir projede class kullanıp stili ayrı bir stil sayfasında belirtirdik ama yine de aynı sorun ile karşılaşırız).

<col> ile stil oluşturma

Yukarıdakini yapmak yerine <col> elemanını kullanabiliriz. <col> öğeleri <colgroup> konteyneri içine yerleştirilir. Bu konteyner da açılış <table> etiketinin hemen altında belirtilir. Tablomuzu aşağıdaki gibi belirleyerek yukarıda gördüğümüz etkiyi yaratabiliriz:

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Burada aslında her sütun için bir <col> elemanı tanımlıyoruz. Dolayısıyla stil bilgilerini belirten iki “stil sütunu” oluşturuyoruz. İlk sütunu şekillendirmiyoruz, ancak yine de boş bir <col> öğesi eklememiz gerekiyor – eklememiş olsaydık, stil yalnızca ilk sütuna uygulanırdı.

Stil bilgisini her iki sütuna da uygulamak istersek, <col> üzerinde span özniteliği olan bir öğeyi şu şekilde de ekleyebiliriz :

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

Tıpkı colspan ve rowspan gibi span da sütun sayısı belirtir. Stil uygulamak istediğiniz sütun sayısının değerini alır.

Aktif öğrenme: colgroup ve col

Şimdi kendinizi deneme zamanı.

Aşağıda bir dil öğretmeninin zaman çizelgesi bulunuyor. Cuma günü tüm gün Felemenkçe öğrenen yeni bir sınıfı var, Salı ve Perşembe günleri de birkaç ders Almanca ve İngilizce öğretiyor. Ders verdiği günleri içeren sütunları vurgulamak istiyoruz.

Aşağıdaki adımları izleyerek tabloyu yeniden oluşturun.

1. İlk olarak zaman çizelgesi.html dosyasının yerel bir kopyasını oluşturun. HTML, yukarıda gördüğünüz tablonun aynısını içeriyor, tabi sütun stili bilgileri bulunmuyor.
2. Bir <colgroup> öğesi ekleyin. Bunu <table>‘ın altına eklemeyi unutmayın. Sonrasında <col> öğelerini ekleyelim (kalan adımları aşağıya bakınız).
3. İlk iki sütunu stilsiz bırakacağız.
4. Üçüncü sütuna bir arka plan rengi ekleyin. style özniteliği ile background-color:#97DB9A; yazın.
5. Dördüncü sütuna bir genişlik ayarlayın. style özniteliği ile width: 42px; yazın.
6. Beşinci sütuna bir arka plan rengi ekleyin. style özniteliği ile background-color: #97DB9A; yazın.
7. Altıncı sütuna, bunun özel bir gün olduğunu ve onun yeni bir sınıfa ders verdiğini belirtmek için farklı bir arka plan rengi ve bir kenarlık ekleyin.  style özniteliği ile background-color:#DCC48E; border:4px solid #C1437A; yazın
8. Son iki gün boş günler, bu yüzden bunlara arka plan rengi değil de belirli bir genişlik verin; width: 42px;

Örnekle nasıl devam ettiğinizi görün. Takılırsanız veya çalışmanızı kontrol etmek isterseniz GitHub’da timetable-fixed.html dosyasına bakabilirsiniz.

Özet

HTML Tablolarının temellerini hemen hemen tamamladık. Bir sonraki makalede, biraz daha gelişmiş tablo özelliklerine bakacağız ve görme engelliler için ne kadar erişilebilir olduklarını düşüneceğiz.