Python Kod

  1. Anasayfa
  2. »
  3. Genel
  4. »
  5. HTML Tablo Oluşturma

HTML Tablo Oluşturma

admin admin - - 26 dk okuma süresi
249 0

HTML tabloları, bir web sayfası üzerinde verileri düzenlemek ve görselleştirmek için kullanılan önemli bir bileşendir. HTML tablolarını oluşturmak istiyorsanız, basit bir yapıya sahip olan

etiketini kullanabilirsiniz. Bu makalede, HTML tablolarını nasıl oluşturacağınızı ve kullanacağınızı detaylı bir şekilde öğreneceksiniz.

HTML tablolarının yapısı, sütunlar ve satırlar şeklinde düzenlenir. Tablonun başlığı genellikle en üst sırada yer alır ve thead etiketi içine yazılır. Tablo içeriği ise tbody etiketi içine yazılır. Her satırı temsil eden tr etiketi ve her hücreyi temsil eden td etiketi kullanılarak tablonun içeriği oluşturulur.

Ürün Fiyat
iPhone 3000 TL
Samsung Galaxy 2500 TL

Yukarıdaki örnek, bir ürün listesini gösteren basit bir tabloyu temsil etmektedir. Her bir ürün bir satırda, ürünün adı ve fiyatı ise hücrelerde yer almaktadır. Bu şekilde tablolar oluşturarak, verilerinizi daha düzenli ve anlaşılır bir şekilde gösterme imkanına sahip olursunuz.

Tabloların Yapısı

HTML tabloları web sayfalarında veri ve bilgi göstermek için kullanılan önemli bir yapısal elementtir. Tablolar, satır ve sütunlardan oluşur ve her bir hücre içerisinde veri veya içerik bulunur. Tabloların yapısı, başlık, içerik ve stil özelliklerini içerir.

Bir tablo oluşturmak için

etiketi kullanılır. Tablo başlığı için genellikle

etiketi kullanılır ve başlık hücreleri

etiketi kullanılarak oluşturulur ve her bir satır

etiketi ile tanımlanır. Satır içerisindeki hücreler

ve

: Bu etiket, tablonun başlığını tanımlar. Table elemanının içinde kullanılır.
  • etiketi içine

    etiketi kullanılarak bir satır oluşturuldu. Bu satırda

    etiketi ile oluşturulur. Tablonun içeriği

    etiketi ile belirtilir.

    HTML tablolarının yapıları ve elemanları şu şekildedir:

    Ana Etiket Açıklama
    <table> Bir tablonun başlangıç noktasını belirtir.
    <thead> Tablo başlığını gruplandırmak için kullanılır.
    <tbody> Tablo içeriğini gruplandırmak için kullanılır.
    <tr> Bir tablo satırını belirtir.
    <th> Bir tablo başlık hücresini belirtir.
    <td> Bir tablo veri hücresini belirtir.

    Tabloların yapısı ve elemanları hakkında bu temel bilgiler, tabloları daha etkili bir şekilde oluşturmanıza ve düzenlemenize olanak tanır. Tabloların yapısını ve etiketlerini doğru bir şekilde kullanarak, web sayfalarınızda daha düzenli ve anlaşılır tablolar oluşturabilirsiniz.

    Tablo Başlığı Ekleme

    Tablo başlığı, bir HTML tablosunun en üst kısmında yer alır ve tablonun içeriğini anlamaya yardımcı olur. HTML’de tablo başlığı eklemek için

    etiketlerini kullanabiliriz. İşte tablo başlığı eklemenin yöntemleri:

    : Bu etiket ise tablo başlığı hücresini oluşturur. Tablo başlığı bir veya daha fazla hücreden oluşabilir.

    Tablo başlığı hücresi, genellikle kalın, merkezlenmiş ve diğer hücrelerden farklı bir biçimde görüntülenir. Tablo başlıkları, tablonun sütunlarını açıklamak veya verileri kategorize etmek için kullanılır. Örneğin, bir çevrimiçi mağaza tablosunda “Ürün Adı”, “Fiyat” ve “Stok Durumu” gibi sütun başlıkları olabilir.

    Tablo başlığı ekleme işlemi şu şekilde gerçekleştirilir:

    Ürün Adı Fiyat Stok Durumu

    Bu örnekte,

    etiketi ile tablo başlığı hücreleri oluşturuldu. Sütunları içeren hücreler bu şekilde tanımlanır.

    Tablo başlıkları, tabloya anlam katar ve verileri daha anlaşılır hale getirir. Tablo başlığının tasarımını özelleştirmek için CSS kullanabilir veya stil özellikleri kullanarak kalın veya italik gibi formatlamaları uygulayabilirsiniz. İyi bir tablo başlığı, tablonun görselliğini ve kullanıcı deneyimini artırır.

    Thead ve Th Etiketleri

    Tablo başlığını oluşturmak için thead ve th etiketlerini kullanabilirsiniz. Thead etiketi, tablonun başlık bölümünü tanımlar ve th etiketi ise tablo başlığı için kullanılır. Başlık hücreleri th etiketi ile oluşturulur ve genellikle kalın ve merkezlenmiş metin içerir.

    Thead etiketi, tablonun yapısını belirtmek ve başlık hücrelerini gruplamak için kullanılır. Bu etiket, tablonun en üst kısmına yerleştirilir ve th etiketleri içerir. Th etiketi, her başlık hücresi için ayrı ayrı kullanılır.

    Örnek olarak, aşağıdaki HTML kodu kullanarak bir tablo başlığı oluşturabilirsiniz:

    Ürün Fiyat Stok Durumu

    Bu örnekte, thead etiketi tablo başlığını tanımlarken, th etiketleri her bir başlık hücresini temsil eder. Bu şekilde, tabloya başlık eklenmiş olur ve kullanıcılar tablodaki verileri daha iyi anlamaya başlar.

    Çok Sütunlu ve Çok Satırlı Başlık

    HTML tablolarda sadece tek bir satır veya sütunluk bir başlık kullanmak yerine, tabloya çok sütunlu ve çok satırlı başlık eklemek isteyebilirsiniz. Bunun için HTML’de kullanabileceğiniz birkaç yöntem bulunmaktadır.

    Bir yöntem, çeşitli th etiketlerini kullanarak tabloya başlık eklemektir. Her bir th etiketi, tablonun bir sütun başlığını temsil eder. Bu şekilde, istediğiniz kadar sütunlu başlık oluşturabilirsiniz. Aynı şekilde, istediğiniz kadar tr (tablo satırı) ve td (tablo hücresi) etiketlerini kullanarak tabloya çok satırlı başlık ekleyebilirsiniz.

    Başlık 1 Başlık 2 Başlık 3
    Hücre 1 Hücre 2 Hücre 3

    Ayrıca, colspan ve rowspan özelliklerini kullanarak tabloya başlık ekleyebilirsiniz. Bu özellikler, bir hücreyi birden fazla sütuna veya satıra genişletmek için kullanılır. Örneğin, bir sütunu iki veya daha fazla sütuna genişletmek isterseniz, ilgili td veya th etiketinde colspan özelliğini belirtebilirsiniz. Aynı şekilde, bir satırı iki veya daha fazla satıra genişletmek isterseniz, ilgili td veya th etiketinde rowspan özelliğini belirtebilirsiniz.

    Başlık 1 Başlık 2
    Hücre 1 Hücre 2 Hücre 3

    Bu yöntemleri kullanarak tabloya çok sütunlu ve çok satırlı başlık ekleyebilir ve tablonuzun yapısını istediğiniz gibi özelleştirebilirsiniz.

    Stil ve Tasarım

    Tablo başlığının stil ve tasarımı, HTML etiketleri ve CSS kullanılarak özelleştirilebilir. Tablo başlığının görünümünü değiştirmek için style özelliği kullanılabilir. Bu özellik, farklı font boyutları, renkler, arka planlar ve daha fazlası için kullanılabilir.

    Bir tablo başlığında stil ve tasarım öğelerini belirtmek için aşağıdaki yöntemler kullanılabilir:

    • Font Boyutu: Tablo başlığının font boyutunu değiştirmek için CSS’de font-size özelliği kullanılabilir. Örneğin, style="font-size: 20px;" tablo başlığının boyutunu 20 piksel olarak belirler.
    • Renk: Tablo başlığının rengini değiştirmek için color özelliği kullanılabilir. Örneğin, style="color: blue;" tablo başlığını mavi olarak belirler.
    • Arka Plan: Tablo başlığının arka planını değiştirmek için background-color özelliği kullanılabilir. Örneğin, style="background-color: yellow;" tablo başlığının arka planını sarı olarak belirler.

    Bunlar sadece tablo başlığı için bazı örneklerdir ve daha fazla stil ve tasarım öğesi eklemek mümkündür. CSS kullanarak tablo başlıklarını tamamen özelleştirebilir ve istediğiniz görünümü elde edebilirsiniz.

    Açıklama Satırları

    Tablolara açıklama satırları eklemek, tablonun içeriğini daha anlaşılır hale getirmenin etkili bir yoludur. Bu açıklamalar, tablodaki verilerin neyi temsil ettiğini ve nasıl düzenlendiğini açıklamak için kullanılır. Açıklama satırları, tabloya ekstra bir katman ekler ve okuyucuların tabloyu daha kolay anlamalarına yardımcı olur.

    Bir tabloya açıklama satırı eklemek için caption etiketi kullanılır. Caption etiketi, table etiketiyle birlikte kullanılır ve tablonun başına yerleştirilir. Açıklama satırını içeren bir başlık belirtmek için caption etiketi içine yazı yazılır. Örneğin:

    Öğrencilerin Not Ortalaması
    Öğrenci Matematik Fizik Türkçe
    Ahmet 85 90 95
    Ayşe 90 85 80

    Yukarıdaki örnekte, caption etiketi kullanılarak tablonun başına “Öğrencilerin Not Ortalaması” başlığı eklenmiştir. Bu başlık, tablonun içeriğini özetlemekte ve okuyucuların anlamaya yardımcı olmaktadır.

    Ayrıca, tabloya başka açıklamalar eklemek isterseniz, thead ve th etiketlerini kullanabilirsiniz. Bu etiketler, tablonun başlığını oluşturmak için kullanılır ve her hücre için ayrı ayrı başlık belirlemenize olanak sağlar. Örneğin:

    Notlar
    Öğrenci Matematik Fizik Türkçe
    Ahmet 85 90 95
    Ayşe 90 85 80

    Yukarıdaki örnekte, thead ve th etiketleri kullanılarak tablonun başına “Notlar” başlığı eklenmiştir.

    Açıklama satırları, tabloya anlam katan ve okuyucuların tabloyu daha kolay anlamalarına yardımcı olan önemli bir özelliktir.

    Tablo İçeriği

    Tablo İçeriği

    Bir HTML tablosunu oluştururken, tablonun içeriğini belirtmek için çeşitli etiketler ve özellikler kullanılabilir. İşte tablo içeriğini oluşturmak için kullanılan temel etiketler:

    • <tbody>: Bu etiket, tablonun ana içeriğini belirtmek için kullanılır.
    • <tr>: Bu etiket, tablo satırını belirtmek için kullanılır.
    • <td>: Bu etiket, tablo hücresini belirtmek için kullanılır.
    • <th>: Bu etiket, tablo başlığını belirtmek için kullanılır.

    Bu etiketler, tablodaki içeriği yapısallaştırmak ve düzenlemek için kullanılır. Her bir <tr> etiketi bir tablo satırını temsil ederken, her bir <td> etiketi bir hücreyi temsil eder. Eğer bir hücre başlık olarak kullanılacaksa, <th> etiketi kullanılır.

    Tablo içeriği, verileri düzenli bir şekilde göstermek için önemlidir. Örneğin, bir ürün listesi tablosunda her satır bir ürünü temsil eder ve her hücre, ürünün farklı özelliklerini (isim, fiyat, stok durumu, vb.) içerir. Tablo içeriğini oluştururken, hücrelere uygun verileri yerleştirebilir ve isterseniz hücreleri birleştirerek daha karmaşık yapılar oluşturabilirsiniz.

    Bunu yaparken <colspan> ve <rowspan> özelliklerini kullanabilirsiniz. Tablo içeriğini düzenlerken, hücrelerin arkaplan rengini, metin rengini ve diğer stil özelliklerini de özelleştirebilirsiniz. Bu, tablonun daha çekici ve kullanıcı dostu bir şekilde görüntülenmesine yardımcı olur.

    Tbody ve Tr Etiketleri

    Tbody ve Tr Etiketleri, HTML tablolarının içeriğini oluşturmak ve düzenlemek için kullanılan önemli etiketlerdir. Tbody etiketi, tablonun tamamının içerisinde bulunan verileri gruplamak için kullanılır. Tr etiketi ise, tablonun her bir satırını temsil eder.

    Tbody etiketi, tablonun içerisinde yer almalı ve td ya da th etiketleri ile birlikte kullanılmalıdır. Bu etiketler arasına ise tablonun her bir satırı için tr etiketi eklenir. Örneğin;

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

    Yukarıdaki örnekte, tbody etiketiyle birlikte tr etiketi kullanılarak, tablonun içerisine üç satır eklenmiştir. Her satırın içerisinde bulunan td etiketleri ise verileri temsil etmektedir. Bu sayede, tablonun içeriği düzenlenmiş ve okunabilir hale getirilmiştir.

    Tbody ve tr etiketleri, tablonun içeriğini oluştururken kullanılan temel etiketlerdir. Doğru bir şekilde kullanıldığında, tablo daha düzenli ve anlaşılır bir hale gelir. Tbody ve tr etiketlerini kullanarak tablo içeriğinizi kolaylıkla oluşturabilir ve düzenleyebilirsiniz.

    Td ve Th Etiketleri

    Td ve Th Etiketleri:

    HTML tablolarında hücrelerin ve başlıkların oluşturulması için kullanılan td ve th etiketleri oldukça önemlidir. Bu etiketler, tablonun düzenini ve içeriğini belirlemek için kullanılır.

    Anlamlı tablo hücreleri oluşturmak için td etiketi kullanılır. Bir td etiketi, hücre içerisindeki veriyi belirtir. Örneğin, bir tabloda isimlerin ve soyisimlerin gösterildiği hücreler td etiketiyle oluşturulur.

    Aynı şekilde başlıklar için ise th etiketi kullanılır. th etiketi, tablonun başlığını belirtir ve genellikle bold veya strong etiketiyle biçimlendirilir. Bir tablonun sütun başlıkları th etiketiyle oluşturulur.

    • Görsel bir örnek olarak aşağıdaki tabloya bakalım:
    Adı Soyadı Yaş
    Ahmet Yılmaz 25
    Ali Demir 30

    Yukarıdaki örnekte, tablonun başlığı (Adı, Soyadı, Yaş) th etiketiyle oluşturulmuştur ve veriler (Ahmet, Yılmaz, 25), (Ali, Demir, 30) ise td etiketiyle oluşturulmuştur.

    Td ve th etiketleri, tabloların düzenli ve anlaşılır bir şekilde görüntülenmesini sağlar. Bu etiketleri doğru kullanarak tablo içeriğini oluşturmak, sayfanın kullanıcı dostu ve kolay anlaşılır olmasını sağlar.

    Hücre Birleştirme

    Hücre Birleştirme özelliği, tabloları daha düzenli ve anlaşılır hale getirmek için kullanılır. Bu özellik sayesinde tablo içerisindeki hücreleri birleştirip bölebiliriz. Hücre birleştirme işlemi, tablonun yapısını ve görünümünü özelleştirmek, belirli verileri vurgulamak veya daha fazla alan sağlamak için kullanılır.

    HTML’de hücre birleştirme işlemi için colspan ve rowspan özellikleri kullanılır. colspan özelliği, hücreleri yatay olarak birleştirirken, rowspan özelliği ise hücreleri dikey olarak birleştirir. Bu özellikler, tablodaki hücrelerin kaç sütun veya satır boyunca birleştirileceğini belirler.

    Örneğin, bir tabloda “Adı” ve “Soyadı” sütun başlıklarını birleştirmek istiyoruz. Bunun için aşağıdaki kod bloğunu kullanabiliriz:

    <table>  <tr>    <th colspan="2">Adı Soyadı</th>  </tr>  <tr>    <td>John</td>    <td>Doe</td>  </tr></table>

    Bu kod, “Adı” ve “Soyadı” başlıklarını birleştirerek tek bir hücre oluşturur. Aynı şekilde, hücreleri dikey olarak birleştirmek için de rowspan özelliğini kullanabilirsiniz.

    Hücre birleştirme özelliği, tabloların görünümünü ve işlevselliğini artırmak için kullanabileceğiniz önemli bir HTML özelliğidir. Bu özelliği kullanarak tablolarınızı daha etkileyici ve anlaşılır hale getirebilirsiniz.

    Veri Biçimlendirme

    =Tabloda bulunan verilerin biçimlendirilmesi için kullanılan etiketler ve özellikleri.

    Tablo içeriği, bir metin veya veri göstermek için kullanılan hücrelerden oluşur. Bu hücrelerdeki verileri biçimlendirmek, tablonun okunabilirliğini artırmak ve görsel olarak daha çekici hale getirmek için çeşitli HTML etiketleri ve özellikleri kullanılabilir. İşte veri biçimlendirme için sıkça kullanılan etiketler ve özellikler:

    • <th>: Bu etiket, tablo başlıklarını belirtmek için kullanılır. Genellikle ilk satırda kullanılır ve diğer hücre etiketlerinden farklı olarak kalın ve ortalanmış olarak görüntülenir.
    • <td>: Bu etiket, tablo hücrelerini belirtmek için kullanılır. Genellikle tablo içeriğinde kullanılır ve normal metin veya veri içeriğini temsil eder.
    • colspan: Bu özellik, bir hücrenin birden fazla sütuna yayıldığını belirtmek için kullanılır. Örneğin, bir hücreyi iki sütunda birleştirmek için colspan="2" kullanılabilir.
    • rowspan: Bu özellik, bir hücrenin birden fazla satıra yayıldığını belirtmek için kullanılır. Örneğin, bir hücreyi iki satırda birleştirmek için rowspan="2" kullanılabilir.
    • <caption>: Bu etiket, tablonun üzerinde bir başlık göstermek için kullanılır. Genellikle tablonun üstünde yer alır ve tablonun içeriğini açıklar.

    Bu etiketler ve özellikler, tablonun görünümünü geliştirmek için kullanılabilir ve tablodaki verilerin anlaşılmasını kolaylaştırabilir. Tabloda verilerinizi düzenlemek ve biçimlendirmek için bu etiketleri kullanmayı düşünebilirsiniz.

    Renk ve Arka Plan

    Renk ve Arka Plan

    HTML tabloları oluştururken, tablonun renk ve arka planını özelleştirmek isteyebilirsiniz. Bu, tablonuza görsel olarak çekici bir görünüm kazandırmanın harika bir yoludur. İşte HTML kullanarak tablonun renk ve arka planını özelleştirmenin bazı yöntemleri:

    Yöntem Açıklama
    bgcolor Tablonun arka plan rengini belirlemek için kullanılır. Örneğin, kodunu kullanarak tabloya kırmızı bir arka plan rengi verebilirsiniz.
    background Tablonun arka plan resmini belirlemek için kullanılır. Örneğin, kodunu kullanarak tabloya bir resim arka planı ekleyebilirsiniz.
    style Tablonun renk, arka plan ve diğer stil özelliklerini ayrıntılı olarak belirlemek için CSS kullanabilirsiniz. Örneğin, kodunu kullanarak tabloya mavi bir arka plan rengi ve beyaz metin rengi verebilirsiniz.

    Tablonun renk ve arka planını özelleştirirken, kullanıcı deneyimini düşünmek önemlidir. Aşırı parlak veya göz yorucu renk seçimleri yerine, uyumlu ve okunabilir bir renk şeması tercih etmek önemlidir. Ayrıca, tablo içeriği ile arka plan rengi arasında yeterli kontrast sağlamak da önemlidir. Bu şekilde, kullanıcılar tablonun içeriğini kolayca okuyabilir ve anlayabilirler.

    İlgili Yazılar

    Bir yanıt yazın

    E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir