HTML Dilinde HTML Tables Kullanımı

HTML tabloları, verileri satırlar ve sütunlar halinde düzenli bir şekilde sunmak için kullanılan temel yapısal elementlerdir. Bu elementler, istatistiksel verilerden ürün listelerine kadar çeşitli bilgi türlerini okunabilir ve erişilebilir bir formatta görüntülemek için kritik öneme sahiptir. Doğru kullanıldığında, HTML tabloları karmaşık veri setlerinin görselleştirilmesinde güçlü bir araç sunar.

Temel Sözdizimi

Bir HTML tablosu,

etiketi ile tanımlanır. Tablo içindeki her satır (table row) etiketi ile belirtilir. Satırların içindeki her veri hücresi , gövde bölümünü ve altbilgi bölümünü ile gruplamak, tablo yapısını semantik olarak güçlendirir.

(table data) etiketi ile oluşturulur. Başlık hücreleri için ise	(table header) etiketi kullanılır. Tablonun başlık bölümünü

Başlık 1	Başlık 2
Veri 1A	Veri 1B
Veri 2A	Veri 2B
Altbilgi 1	Altbilgi 2

Detaylı Açıklama

HTML tablolarını oluşturan temel etiketler ve bunların rolleri aşağıda açıklanmıştır:

: Bu etiket, tüm tablo içeriğini kapsayan ana kapsayıcıdır. Tarayıcıya içeriğin bir tablo olarak yorumlanması gerektiğini bildirir. Genellikle border, width gibi eski nitelikler yerine CSS ile stil verilir.

: Tablonun başlık (header) bölümünü gruplandırmak için kullanılır. Genellikle tablo sütun başlıklarını içeren bir veya daha fazla etiketi içerir. Semantik olarak, bu bölüm tablonun içeriğini özetler ve genellikle sayfanın üst kısmında veya sabit bir konumda kalabilir.

: Tablonun ana veri (body) bölümünü gruplandırmak için kullanılır. Tablonun gerçek veri satırlarını () içerir. Bir tabloda birden fazla etiketi bulunabilir, bu da veri gruplarını ayırmak için faydalıdır.

: Tablonun altbilgi (footer) bölümünü gruplandırmak için kullanılır. Genellikle toplamlar, özetler veya dipnotlar gibi bilgileri içeren bir veya daha fazla etiketi içerir. elementi, HTML kodu içinde 'den önce tanımlanmış olsa bile tarayıcı tarafından genellikle tablonun en altında görüntülenir.

: Bir tablo satırını (table row) tanımlar. , veya içinde yer almalıdır. Her etiketi, bir veya daha fazla etiketi içinde yer almalıdır.

Tablo hücrelerinin sütunları veya satırları birleştirmesi için colspan ve rowspan nitelikleri kullanılır:

colspan: Bir hücrenin kaç sütunu kapsayacağını belirtir. Örneğin,

veya

etiketi içerebilir.

: Bir tablo başlık hücresini (table header) tanımlar. İçindeki metin genellikle tarayıcılar tarafından varsayılan olarak kalın ve ortalanmış olarak görüntülenir.

etiketleri, ilgili sütunun veya satırın ne anlama geldiğini açıklar ve erişilebilirlik açısından önemlidir.

: Bir tablo veri hücresini (table data) tanımlar. Tablonun gerçek verilerini içerir. Her

etiketi, bir

etiketi, hücrenin iki sütunu genişletmesini sağlar.

rowspan: Bir hücrenin kaç satırı kapsayacağını belirtir. Örneğin,

etiketi, hücrenin iki satır boyunca uzanmasını sağlar.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, HTML tablolarının farklı senaryolarda nasıl kullanılabileceğini göstermektedir.

Basit Bir Tablo Oluşturma

Bu örnek, temel

, , ve etiketlerini de değerlendirin.

Stil Verme: Tabloların görsel görünümünü değiştirmek için CSS kullanın. Eski HTML nitelikleri (örneğin, border, cellpadding, cellspacing, width) yerine CSS özelliklerini (örneğin, border, padding, border-spacing, width) tercih edin.

Duyarlılık: Büyük tablolar mobil cihazlarda sorun yaratabilir. Duyarlı tablolar oluşturmak için CSS ile tabloya overflow-x: auto; ekleyerek yatay kaydırma çubukları sağlayabilir veya daha karmaşık duyarlı tablo tekniklerini uygulayabilirsiniz.

Boş Hücreler: Boş hücreler tarayıcıda boşluk olarak görünebilir. Bir hücrenin içeriği yoksa bile,

veya şeklinde kapatılmış bir etiket kullanmak önemlidir.

Yayınlanma Tarihi: 2025-10-17 11:00:51

Önceki Haber

Python Dilinde Koşullu Mantık: If...Else Kullanımı

Python Makaleleri

Sonraki Haber

SQL Dilinde COUNT Fonksiyonunun Detaylı Kullanımı

SQL Makaleleri

Yorum yap

Yorum yapabilmek için giriş yapmalısınız.

Yorumlar

Bu yazı hakkında henüz yorum yapılmamıştır.

Bu ilginizi çekebilir

HTML Dilinde Sayfa Başlığı (Page Title) Kullanımı

Web belgelerinin temel bileşenlerinden biri olan HTML sayfa başlığı, kullanıcı deneyimi...

etiketlerini kullanarak basit bir öğrenci not tablosu oluşturur.



  
    
      Öğrenci Adı
      Ders
      Not
    
  
  
    
      Ayşe Yılmaz
      Matematik
      95
    
    
      Can Demir
      Türkçe
      88
    
    
      Elif Kaya
      Fizik
      72

`colspan` ve `rowspan` Kullanımı

Bu örnek, hücreleri birleştirmek için colspan ve rowspan niteliklerinin nasıl kullanılacağını gösterir. Bu, daha karmaşık tablo düzenleri oluşturmak için faydalıdır.



  
    
      Ürün
      Miktar
      Fiyat
    
    
      Adet
      Birim
    
  
  
    
      Laptop
      1
      Adet
      1200 TL
    
    
      Mouse
      2
      Adet
      150 TL
    
  
  
    
      Toplam
      1350 TL

Önemli Notlar

HTML tablolarını kullanırken dikkate alınması gereken bazı önemli noktalar şunlardır:

Semantik Kullanım: Tabloları yalnızca tablo verileri (satırlar ve sütunlar halinde ilişkili veriler) için kullanın. Sayfa düzeni oluşturmak için tabloları kullanmaktan kaçının; bunun yerine CSS Grid veya Flexbox gibi modern düzen tekniklerini tercih edin.
Erişilebilirlik: Tabloların erişilebilirliğini artırmak için

etiketlerini doğru kullanın ve scope niteliği ile başlık hücrelerinin kapsamını belirtin (örneğin,