Web sayfalarında içeriği organize etmek ve okunabilirliği artırmak, kullanıcı deneyiminin temel taşlarından biridir. HTML, bu organizasyonu sağlamak için iki güçlü yapı sunar: listeler ve tablolar. Listeler, maddeler halinde sıralanması gereken bilgileri (örneğin bir tarifin adımları veya bir alışveriş listesi) sunmak için idealken; tablolar, satır ve sütunlardan oluşan karmaşık verileri (örneğin finansal raporlar veya ürün karşılaştırmaları) düzenli bir grid yapısında göstermek için kullanılır. Bu yazıda, HTML’in temel veri yapılandırma araçları olan listelerin ve tabloların derinliklerine ineceğiz. Sıralı ve sırasız listelerin nasıl oluşturulduğunu, iç içe listelerle nasıl hiyerarşi kurulduğunu ve tabloların temel yapısından hücre birleştirme gibi gelişmiş tekniklere kadar tüm detayları pratik örneklerle ele alacağız.
HTML’de listelerle verileri organize etme
Listeler, birbiriyle ilişkili öğeleri gruplamanın en yaygın ve semantik olarak en doğru yoludur. HTML, öğelerin sırasının önemli olup olmamasına göre iki ana liste türü sunar: sırasız listeler (<ul>) ve sıralı listeler (<ol>). Her iki liste türünde de her bir liste öğesi <li> (list item) etiketi içine yazılır.
Sırasız listeler
Öğelerin sırasının bir anlam ifade etmediği durumlar için kullanılır. Tarayıcılar varsayılan olarak bu liste öğelerini içi dolu daire (bullet point) gibi işaretçilerle gösterir. Örneğin, bir pazar alışverişi listesi oluşturmak için idealdir.
Örnek Kullanım:
<h4>Alışveriş Listesi</h4>
<ul>
<li>Elma</li>
<li>Süt</li>
<li>Ekmek</li>
<li>Yumurta</li>
</ul>
Sıralı listeler
Öğelerin belirli bir sırayı takip etmesi gerektiğinde kullanılır. Bir tarifin adımları, bir yarışmanın ilk üç sıralaması veya bir işlemdeki prosedürler gibi durumlar için mükemmeldir. Tarayıcılar bu öğeleri varsayılan olarak sayılarla (1, 2, 3…) numaralandırır.
Örnek Kullanım:
<h4>Çay Demleme Adımları</h4>
<ol>
<li>Suyu kaynatın.</li>
<li>Kaynamış suyu demliğe dökün.</li>
<li>Demliğe çayı ekleyin.</li>
<li>10-15 dakika demlenmesini bekleyin.</li>
</ol>
İç içe listelerle hiyerarşik yapılar oluşturma
Bazen listeler daha karmaşık ve hiyerarşik bir yapı gerektirebilir. HTML, listeleri iç içe kullanarak bu ihtiyacı karşılar. İç içe bir liste oluşturmak için, yeni bir <ul> veya <ol> listesini, üst listenin bir <li> etiketinin içine yerleştirmeniz yeterlidir. Bu, ana başlıklar ve alt maddelerden oluşan yapılar oluşturmanıza olanak tanır. Tarayıcılar, iç içe geçmiş listeleri genellikle farklı girintiler ve madde işaretleriyle görsel olarak ayırt eder, bu da okunabilirliği artırır.
Örnek Kullanım:
<h4>Web Geliştirme Konuları</h4>
<ol>
<li>Frontend Teknolojileri
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Teknolojileri
<ul>
<li>Node.js</li>
<li>Python (Django)</li>
<li>PHP</li>
</ul>
</li>
</ol>
Tablolarla yapısal verileri sunma: Temel yapı
Listelerin yetersiz kaldığı, verilerin satır ve sütunlar halinde düzenlenmesi gereken durumlarda tablolar devreye girer. Tablolar, istatistiksel veriler, fiyat listeleri veya kullanıcı bilgileri gibi ilişkisel verileri sunmak için kullanılır. Bir HTML tablosu temel olarak şu etiketlerden oluşur:
- <table>: Tablonun tamamını kapsayan ana etikettir.
- <tr>: (Table Row) Tablo içindeki her bir satırı tanımlar.
- <th>: (Table Header) Başlık hücresini tanımlar. İçindeki metin varsayılan olarak kalın ve ortalanmış görünür ve hem görsel hem de anlamsal olarak başlık olduğunu belirtir.
- <td>: (Table Data) Standart veri hücresini tanımlar.
Bu etiketler bir araya geldiğinde düzenli ve anlaşılır bir veri gridi oluşturur.
Örnek Kullanım:
<table border="1">
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Departman</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>Pazarlama</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Kaya</td>
<td>İnsan Kaynakları</td>
</tr>
</table>
Gelişmiş tablo teknikleri: Hücre birleştirme
Basit tabloların ötesine geçerek daha karmaşık veri düzenleri oluşturmak için hücreleri birleştirmek gerekebilir. HTML, bu işlevsellik için colspan ve rowspan niteliklerini sunar. Bu nitelikler, bir hücrenin birden fazla sütun veya satır boyunca uzanmasını sağlar.
Sütunları birleştirme (colspan)
colspan niteliği, bir hücrenin yatay olarak birden fazla sütuna yayılmasını sağlar. Değer olarak kaç sütunu kaplayacağı belirtilir. Örneğin, bir kişinin adını ve soyadını tek bir “Tam Ad” başlığı altında birleştirmek için kullanılabilir.
Örnek Kullanım:
<table border="1">
<tr>
<th colspan="2">Kişisel Bilgiler</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>30</td>
</tr>
</table>
Satırları birleştirme (rowspan)
rowspan niteliği ise bir hücrenin dikey olarak birden fazla satıra yayılmasını sağlar. Bu, özellikle birden fazla satırda tekrar eden verileri gruplamak için kullanışlıdır. Örneğin, bir kişinin birden fazla telefon numarası varsa, adının bulunduğu hücre tüm telefon numarası satırlarını kapsayacak şekilde birleştirilebilir.
Örnek Kullanım:
<table border="1">
<tr>
<th>Ad</th>
<th>İletişim Türü</th>
<th>Numara</th>
</tr>
<tr>
<td rowspan="2">Zeynep</td>
<td>Ev Telefonu</td>
<td>0212 123 45 67</td>
</tr>
<tr>
<td>Cep Telefonu</td>
<td>0555 987 65 43</td>
</tr>
</table>
Sonuç olarak, HTML’de listeler ve tablolar, web içeriğini yapılandırmak ve sunmak için vazgeçilmez araçlardır. Bu makalede, <ul> ve <ol> etiketleriyle oluşturulan basit listelerden, iç içe listelerle kurulan karmaşık hiyerarşilere kadar liste kullanımını inceledik. Benzer şekilde, <table>, <tr>, <th> ve <td> etiketleriyle temel tablo yapısını öğrendik ve colspan ile rowspan niteliklerini kullanarak hücreleri birleştirip gelişmiş veri düzenleri oluşturmayı gördük. Bu yapıları doğru ve anlamsal bir şekilde kullanmak, yalnızca içeriğin görsel olarak düzenli görünmesini sağlamakla kalmaz, aynı zamanda ekran okuyucular gibi yardımcı teknolojiler için erişilebilirliği de artırır. Bu temel bilgi, temiz, okunabilir ve profesyonel web sayfaları oluşturmanın temelini oluşturur.
Resim Sahibi: Kevin Ku
https://www.pexels.com/@kevin-ku-92347