Html Kodları Tablo Ekleme

HTML Kodları ile Tablo Ekleme: Kapsamlı Bir Kılavuz

Tablolar, web sayfalarında verileri yapılandırmak ve görüntülemek için güçlü bir araçtır. HTML’de tablolar, <table> etiketi kullanılarak oluşturulur ve her satır <tr> etiketi, her hücre ise <td> etiketi ile tanımlanır.

Bu kapsamlı kılavuz, HTML kodları kullanarak tablo oluşturma, biçimlendirme ve özelleştirme konusunda adım adım talimatlar sağlayacaktır.

Tablo Oluşturma

Temel bir tablo oluşturmak için aşağıdaki HTML kodunu kullanın:

“`html

Veri 1 Veri 2 Veri 3
Veri 4 Veri 5 Veri 6

“`

Bu kod, 2 satır ve 3 sütundan oluşan basit bir tablo oluşturacaktır.

Tablo Biçimlendirme

Tabloların görünümünü özelleştirmek için çeşitli CSS özellikleri kullanılabilir. Örneğin, tablo sınırlarını ayarlamak için border özelliği, hücre dolgusunu ve kenar boşluğunu ayarlamak için padding ve margin özellikleri kullanılabilir.

Aşağıdaki CSS kodunu kullanarak yukarıdaki tabloyu biçimlendirebilirsiniz:

“`css
table {
border: 1px solid black;
padding: 5px;
margin: 10px;
}

td {
border: 1px solid gray;
padding: 5px;
}
“`

Tablo Özelleştirme

Tabloları daha da özelleştirmek için aşağıdaki HTML öznitelikleri kullanılabilir:

  • width: Tablonun genişliğini piksel veya yüzde olarak ayarlar.
  • height: Tablonun yüksekliğini piksel veya yüzde olarak ayarlar.
  • align: Tabloyu sayfada sola, sağa veya ortaya hizalar.
  • cellspacing: Hücreler arasındaki boşluğu piksel olarak ayarlar.
  • cellpadding: Hücre içeriği ile hücre sınırları arasındaki boşluğu piksel olarak ayarlar.

Başlık Satırları ve Alt Satırları

Tablolarda başlık satırları ve alt satırları belirtmek için <thead> ve <tfoot> etiketleri kullanılabilir. Başlık satırı, tablonun üstündeki satırı, alt satırı ise tablonun altındaki satırı tanımlar.

Aşağıdaki HTML kodunu kullanarak başlık satırı ve alt satırı olan bir tablo oluşturabilirsiniz:

“`html

Başlık 1 Başlık 2 Başlık 3
Veri 1 Veri 2 Veri 3
Veri 4 Veri 5 Veri 6
Alt Satır 1 Alt Satır 2 Alt Satır 3

“`

Hücre Birleştirme ve Bölme

colspan ve rowspan öznitelikleri kullanılarak hücreler birleştirilebilir veya bölünebilir. colspan özniteliği, bir hücrenin yatay olarak kaç sütunu kaplayacağını belirtirken, rowspan özniteliği bir hücrenin dikey olarak kaç satırı kaplayacağını belirtir.

Aşağıdaki HTML kodunu kullanarak hücreleri birleştiren bir tablo oluşturabilirsiniz:

“`html

Birleştirilmiş Hücre Veri 3
Veri 4 Veri 5 Veri 6

“`

Faydalı Kaynaklar

Yayımlandı

kategorisi