HTML Tablolar – Örnek Kodlu Tablo Eğitimi

html tablolar

Verileri görsel olarak temsil etmesi gereken bir proje oluşturduğunuzda, bilgilerin okunması ve anlaşılması kolay olacak şekilde iyi bir şekilde görüntülenmesi için html tablolara ihtiyacınız olacaktır.

Artık veri türüne bağlı olarak HTML öğelerini kullanarak farklı gösterim yöntemleri arasında seçim yapabilirsiniz.

Çoğu durumda tablolar, büyük miktarda yapılandırılmış veriyi güzel bir şekilde görüntülemek için daha uygundur. Bu nedenle bu makalede HTML’de tabloların nasıl kullanılacağını ve ardından onlara nasıl stil verileceğini öğreneceğiz.

HTML Tablolar nedir?

HTML Tablolar, verilerin satırlar ve sütunlar halinde düzenlenmiş bir temsilidir. HTML’de tabloların yardımıyla resimler, metinler, bağlantılar vb. verileri hücre satırları ve sütunları halinde düzenleyebilirsiniz.

HTML tabloların kullanımı, onları oluşturmayı ve tasarlamayı kolaylaştıran muhteşem HTML tablo etiketleriyle son zamanlarda daha popüler hale geldi.

HTML’de bir tablo oluşturmak için etiketleri kullanmanız gerekir. Bunlardan en önemlisi <table> tablonun ana taşıyıcısı olan etikettir. Tablonun nerede başlayacağını ve nerede biteceğini gösterir.

Yaygın HTML Tablosu etiketleri

Diğer etiketler şunları içerir:

  • <tr>– satırları temsil eder
  • <td>– veri hücreleri oluşturmak için kullanılır
  • <th>– tablo başlıkları eklemek için kullanılır
  • <caption>– altyazı eklemek için kullanılır
  • <thead>– tabloya ayrı bir başlık ekler
  • <tbody>– tablonun ana gövdesini gösterir
  • <tfoot>– tablo için ayrı bir altbilgi oluşturur

HTML Tablo Söz Dizimi:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>
Hücre 1Hücre 2Hücre 3
Hücre 4Hücre 5Hücre 6

Artık bir HTML tablosunun neyle ilgili olduğunu ve onu nasıl oluşturabileceğinizi anladığınıza göre, daha fazla özelliğe sahip tablolar oluşturmak için bu etiketleri nasıl kullanabileceğimizi görelim.

HTML’de Tablo Başlığı Nasıl Eklenir?

<th>Tablolara başlık eklemek için kullanılır . <th> Temel tasarımlarda tablo başlığı her zaman en üst sırayı alacaktır; bu , ilk tablo satırımızda beyan edilenleri ve ardından tablodaki gerçek verileri tutacağımız anlamına gelir . Varsayılan olarak Başlıkta aktarılan metin ortalanmış ve Kalındır.

<th> kullanımı için örnek :

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>
İLK ADISOY İSİME-POSTA ADRESİ
HillaryNyakunditablolar@mail.com
LaryMakgeliştirici@mail.com

Yukarıdaki örnekten hangi sütunun hangi bilgiyi içerdiğini anlayabiliyoruz. Bu,  <th> etiket kullanımıyla mümkün olur.

Tabloya Başlık Nasıl Eklenir?

Tabloya başlık eklemenin asıl kullanımı, tabloda temsil edilen veriler hakkında bir açıklama sağlamaktır. Başlık tablonun üstüne veya altına yerleştirilebilir ve varsayılan olarak her zaman ortalanır.

Bir tabloya başlık eklemek için <caption> etiketini kullanın .

Altyazı Sözdizimi

<table>
  <caption></caption>
  <tr> </tr>
</table>

<caption> kullanımı için örnek

<table>
  <caption>Free Coding Resources</caption>
  <tr>
    <th>Sites</th>
    <th>Youtube Channels</th>
    <th>Mobile Appss</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

HTML Tablolarında Kapsam Özelliği Nasıl Kullanılır?

Kapsam niteliği, belirli bir başlığın bir sütuna mı, satıra mı yoksa her ikisine de yönelik bir grup için mi tasarlandığını tanımlamak için kullanılır. Tanımı anlamanın zor olabileceğini biliyorum ama bekleyin; bir örnek yardımıyla daha iyi anlayacaksınız.

Kapsam öğesinin temel amacı, kullanıcının varsayımlara güvenmek zorunda kalmaması için hedef verileri göstermektir. 

Kapsam Söz Dizimi

<scope> kullanımı için örnek

<table>
  <tr>
    <th></th>
    <th scope="col">Semester</th>
    <th scope="col">Grade</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>

  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

Özelliğin yaptığı şey scope, başlık hücresinin sütuna mı, satıra mı yoksa her ikisine ait bir gruba mı ait olduğunu göstermesidir.

Bu durumda başlıklar sütuna aittir çünkü kodda belirlediğimiz şey budur. Farklı davranışları görmek için özelliği değiştirerek denemeler yapabilirsiniz.

HTML Tablosunda Hücre Yayılımı Nasıl Kullanılır?

Belki bir tabloda iki veya daha fazla sütuna veya satıra yayılan hücrelerle karşılaşmışsınızdır. Buna hücre yayılması denir.

MS Office veya Excel gibi programlarda çalıştıysanız, muhtemelen hücreleri vurgulayıp komuta tıklayarak işlevi kullanmışsınızdır ve işte! Ona sahipsin.

colspan : Aynı özellikler, yatay yayılma ve dikey yayılma için iki hücre özelliği kullanılarak bir HTML tablosuna uygulanabilir. rowspan : İki özelliğe, yaymak istediğiniz hücre sayısını gösteren sıfırdan büyük sayılar atanır.

span kullanımı için örnek

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan = "2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>75</td>
  </tr>
  <tr>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>
İSİMDERSİŞARETLER
HillaryGelişmiş Web75
İşletim Sistemi60
LaryGelişmiş Web80
İşletim Sistemi75
Toplam Ortalama: 72.5

Yukarıdaki örnekte, belirtildiği gibi satırlarda 2 hücre ve sütunda 3 hücreden oluşan bir hücreye sahibiz. Açıklığı hem dikey hem de yatay olarak uygulamayı başardık.

colspan ve niteliklerini kullanırken rowspan, hücrelerin çakışmasını önlemek için atanan değerlerin doğru bildirildiğinden emin olun.

HTML Tablolarına Tablo Üstbilgisi, Gövdesi ve Altbilgisi Nasıl Eklenir?

Tıpkı bir web sitesinin veya başka herhangi bir belgenin üç ana bölümü (üstbilgi, gövde ve altbilgi) olduğu gibi, bir tablo da öyledir.

Bir tabloda bunlar aşağıdaki nitelikler kullanılarak bölünür:

  • <thead>– tablo için ayrı bir başlık sağlar
  • <tbody>– tablonun ana içeriğini içerir
  • <tfoot>– tablo için ayrı bir altbilgi oluşturur

<thead><tbody> & <tfoot> Kullanımına Bir Örnek

<table>
  <thead>
    <tr>
      <th colspan="2">October</th>
      <th colspan="2">November</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Sales</td>
      <td>Profit</td>
      <td>Sales</td>
      <td>Profit</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">November was more produstive</th>
    </tr>
  </tfoot>
</table>
EKİMKASIM
SatışKârSatışKâr
200,00$50,00$300.000$70.000$
KASIM AYI DAHA VERİMLİ GEÇTİ

Yukarıdaki örnekte başlık ayların ismiyle, hem satış hem de kâr rakamlarının yer aldığı kısım tablo gövdesini ve son olarak ifadenin yer aldığı kısım ise tablomuzun altbilgisini temsil etmektedir.

Dikkat edilmesi gereken bir diğer önemli nokta ise bir tablonun birden fazla gövde parçasına sahip olabilmesidir. Bunun gibi bir senaryoda her gövde birbiriyle ilişkili satırları gruplandırır.

CSS kullanarak HTML Tablolarına Stil Verme

Günümüzde tablolar yaygın olarak kullanılsa da, stillendirilmemiş tablo bulmak çok nadirdir. Çoğu, renkler, yazı tipleri, önemli değerlerin vurgulanması vb. gibi farklı stil biçimleri kullanır.

Şekillendirme, tabloların profesyonel ve göze çekici görünmesine yardımcı olur. Sonuçta okuyucunuzun yalnızca tek bir satıra bölünmüş verilere bakmasını istemezsiniz.

Diğer diller veya araçlarla stil oluşturmanın aksine, HTML’de , stillerinizi ekleyeceğiniz ve onu HTML dosyanıza bağlayacağınız, .css ile oluşturulmuş bir uzantıya sahip fazladan bir dosya kullanmanız gerekecektir .

Aşağıda, stilize edilmiş bir tablo örneğini içeren bir kod alanı eklenmiştir. Farklı stillerin ekranı nasıl etkileyeceğini görmek için onunla oynamaktan çekinmeyin.

<table>
  <caption>A summary of top sites with both paid and free course</caption>
  <thead>
    <tr>
      <th class="primary" scope="col">Websites</th>
      <th scope="col">Certification</th>
      <th scope="col">Tuition</th>
      <th scope="col">Top Courses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Freecode Camp</th>
      <td>Yes</td>
      <td>Free</td>
      <td>Web Development and Design</td>
    </tr>
    <tr>
      <th scope="row">Udemy</th>
      <td>Yes</td>
      <td>Paid</td>
      <td>Python and Machine Learning</td>
    </tr>
    <tr>
      <th scope="row">Coursera</th>
      <td>Yes</td>
      <td>Free and Paid</td>
      <td>IoT and AI</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total Courses</th>
      <td colspan="4"><i>What are you waiting for? Get Started now for free</i></td>
    </tr>
  </tfoot>
</table> 
table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
  background-color: #f6f6f6;
}/* Spacing */
td, th {
  border: 1px solid #999;
  padding: 20px;
}
th {
  background: brown;
  color: white;
  border-radius: 0;
  position: sticky;
  top: 0;
  padding: 10px;
}
.primary{
  background-color: #000000
}

tfoot > tr  {
  background: black;
  color: white;
}
tbody > tr:hover {
  background-color: #ffc107;
}

Yukarıdaki kod alanında bir tablo oluşturduk ve makalede ele aldığımız bazı özellikleri kullanarak ona stil verdik.

Daha okunabilir ve güzel hale getirmek için tablomuza renk ve kenarlık eklediğimiz bir CSS dosyası kullanarak stil verdik. Tablonun ayrıca sabit bir başlığı vardır, böylece büyük miktarda veriyi kaydırırken belirli bir sütunun başlığını görmeye devam edebilirsiniz.

Böylece tablonun ne olduğunu gördük, birkaç tane oluşturduk ve hatta bir adım ileri giderek stil uyguladık.

Ancak bilgiye sahip olup, onu nasıl uygulayacağını bilmemenin hiçbir faydası olmayacaktır. Peki tasarımınızda tablolardan nerede ve ne zaman yararlanmanız gerekiyor?

Tablo Ne Zaman Kullanılmalı

Projelerinizi geliştirirken tabloların kullanışlı olabileceği birçok durum vardır:

  • A ve B arasındaki farklar veya X takımının Y takımının skorları gibi ortak özelliklere sahip verileri karşılaştırmak ve karşılaştırmak istediğinizde tabloları kullanabilirsiniz.
  • Sayısal verilere genel bir bakış sunmak istiyorsanız da birini kullanabilirsiniz. Buna iyi bir örnek, öğrencilerin notlarını ve hatta EPL tablosu gibi takımların puanlarını temsil etmeye çalışmanızdır.
  • Ve bir tablo, okuyucuların net bir şekilde ortaya konan belirli bilgileri hızlı bir şekilde bulmasına yardımcı olabilir. Örneğin, uzun bir isim listesi üzerinden geçiyorsanız, listeyi alt bölümlere ayırmak için bir tablo kullanılabilir, bu da okuyucuların işini kolaylaştırır.

Sonuç

Tablolar, tablo halindeki verileri temsil etmenin harika bir yoludur ve bunları <table><tr><td> gibi temel HTML öğelerini kullanarak oluşturabilirsiniz .

Ayrıca, güzel görünmelerini sağlamak ve verileri bir CSS dosyası yardımıyla net bir şekilde sunmak için bazı stiller de ekleyebilirsiniz.

Bitirmeden önce bir görev daha yapalım:

Bugün makalede ele aldıklarımızı özetlemek için öğrendiklerimizi kullanarak bir tablo oluşturun. Bundan sonra tasarımınızı aşağıdaki sabitlenmiş kod alanımla karşılaştırın:

<h1>What We've learned so far</h1>

<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements We've learned so far.</p>

<table>

  <caption>Table elements I've learned</caption>

  <thead>

    <tr>

      <th class="primary">Element</th>

      <th class="primary">Description</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th colspan="2" scope="rowgroup">The root element</th>

    </tr>

    <tr>

      <td>table</td>

      <td>which is the main container.</td>
      
    </tr>
    <tr>

      <td>td</td>

      <td>used to create data cells.</td>
      
    </tr>
    <tr>

      <td>tr</td>

      <td>represents the rows.</td>
      
    </tr>

  </tbody>

  <tbody>

    <tr>

      <th colspan="2" scope="rowgroup">Table Heading</th>

    </tr>

    <tr>

      <td>th</td>

      <td>Add a table heading</td>

    </tr>
    <tr>

      <td>thead</td>

      <td>used to create a separate header for a table</td>

    </tr>

  </tbody>

  <tbody>

    <tr>

      <th colspan="2" scope="rowgroup">Other attributes</th>

    </tr>

    <tr>

      <td>scope</td>

      <td>identifies whether a cell is a header for a column, row, or group of columns or rows</td>

    </tr>
       <tr>

      <td>caption</td>

      <td>provide a description about the data presented in a table</td>

    </tr>
       <tr>

      <td>colspan & rowspan</td>

      <td>stretches two or more cells across a table.</td>

    </tr>
       <tr>

      <td>tbody</td>

      <td>it indicates the main body of the table.</td>

    </tr>
       <tr>

      <td>tfoot</td>

      <td>Used to create separate footer for the table</td>

    </tr>

  </tbody>

</table>
td, th {
  border: 1px solid #999;
  padding: 20px;
}
td{
  background: gray;
  color: white;
}
.primary{
  background-color: brown;
  position: sticky;
}
 th {
  background: #ffc107;
  color: white;
  border-radius: 0;
  top: 0;
  padding: 10px;
}
tbody > tr:hover {
  background-color: #ffc107;
}

Hem colspan hem de rowspan’ı birlikte kullanabilir miyiz?

Evet, birden fazla satır ve sütunu kaplayan hücreler oluşturmak için hem colspan hem de rowspan’ı kullanabiliriz. 

Dikey Başlıklar

Bu eğitimde , <th> üst satırda birden çok kez kullanılan 
tablo başlıklarını gördük . 
Ancak dikey bir başlık oluşturmak için <th> etiketleri sütunlara 
da ekleyebiliriz . 

2 2 tablo yaratan HTML kodu nedir?

<table border align=”center” BGCOLOR=”#00F0F0″> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> <tr> <td>Hücre 3</td> <td>Hücre 4</td> </tr> </table>

Click to rate this post!
[Total: 1 Average: 5]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir