HTML TABLO OLUŞTURMA NASIL YAPILIR?

Bu yazımızda html tablo oluşturma işlemi nasıl yapılır ve html tablo oluşturma işlemini yaparken hangi etiketleri kullanacağımızı öğreneceğiz.

Web sayfalarında tablolar <table> etiketi ile tanımlanır. Her tablo satırı <tr> etiketi ile, tablo hücresi ise <td> etiketi ile tanımlanır. Bir tablonun üstbilgi satırı (başlık için) <th> etiketi ile tanımlanır.

trtable rowtablo satırı
tdtable datatablo verisi / hücre
thtable headertablo üstbilgisi (başlık)

Tablo oluştururken ilk <tr> etiketi ilk satırı oluşturur. Her satırdaki <td> etiketleri de sıra ile o satırdaki sütunları (verileri) oluşturur. Oluşturmak istediğimiz satır kadar <tr> etiketi kullanarak tablomuzu oluştururuz. Örnek bir temel tablo oluşturalım. Html de Kod kısmı :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Temel HTML Table</h3>
<table>
  <tr>
    <th>Ders</th>
    <th>Murat</th>
    <th>Mahir</th>
    <th>Elif</th>
    <th>Abuzer</th>
  </tr>
  <tr>
    <td>Türkçe</td>
    <td>70</td>
    <td>80</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Matematik</td>
    <td>100</td>
    <td>90</td>
    <td>80</td>
    <td>70</td>
  </tr>
   <tr>
    <td>Tarih</td>
    <td>100</td>
    <td>90</td>
    <td>80</td>
    <td>70</td>
  </tr> 
</table>
</body>
</html>

Tarayıcıda Görüntüsü :

html tablo olusturma

Yukarıda da gördüğümüz gibi sade bir tablo oluştu. Herhangi bir renklendirme ve dış çizgilere sahip değil. Yani görünüş olarak güzel değil. Dış çizgi ve renklendirme yapmak için html attribute veya css kullanarak yapabiliriz. Bu yazımızda html attribute ile yapacağız. Css derslerimizde de css ile tabloları nasıl şekilledireceğimizi anlatacağız.

“border” ve “bordercolor” attribute özelliğini kullanalım. Yukarıdaki kod kısmında sadece <table> etiketine attribute eklemesi yapacağız. Kod kısmı :

<table border=1 bordercolor="Blue">

Tarayıcıdaki sonucunu görelim:

html tablo olusturma border color

Yukarıda gördüğümüz gibi her bilginin etrafına çizgi oluşturdu ve bütün hepsini de bir kutu içine aldı. “border” attribute özelliği verdiğimiz yerin etrafını bu şekilde kutu içine alır. “bordercolor” da gördüğümüz gibi bu çizgiye rengi vermemizi sağlar.

Tabloya background (arka plan) rengi verelim ve sütunlara genişlik verelim. Background rengi için “bgcolor” attribute kullanıyoruz ve sütunlara genişlik vermek için “width” attribute kullanıyoruz. Örnek kod kısmı:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border=1 bordercolor="Blue" bgcolor="yellow">
  <tr>
    <th width="150">Ders</th>
    <th width="100">Murat</th>
    <th width="100">Mahir</th>
    <th width="100">Elif</th>
    <th width="100">Abuzer</th>
  </tr>
  <tr>
    <td>Türkçe</td>
    <td>70</td>
    <td>80</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Matematik</td>
    <td>100</td>
    <td>90</td>
    <td>80</td>
    <td>70</td>
  </tr>
   <tr>
    <td>Tarih</td>
    <td>100</td>
    <td>90</td>
    <td>80</td>
    <td>70</td>
  </tr> 
</table>
</body>
</html>

Sonucu Görelim:

html ( table ) tablo olusturma bgcolor width

Bazı tablolarda sütunu veya satır birleştirmemiz gerekebilir. Aynı satırda yer alan hücreleri birleştirmek için “colspan” özelliğini kullanınız. Aynı sütunda yer alan hücreleri birleştirmek için “rowspan” özelliğini kullanınız.

Rowspan Özelliğine örnek verelim. Kod kısmı:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Rowspan Özelliği</h2>
<table border=1>
  <tr>
    <th>Adı:</th>
    <td> Murat </td>
  </tr>
  <tr>
    <th rowspan="2">Telefon:</th>
    <td>212 212 12 12</td>
  </tr>
  <tr>
    <td>212 212 12 13</td>
  </tr>
</table>
</body>
</html>

Sonucunu Görelim:

rowspan attribute

Colspan Özelliği için örnek verelim. Kod kısmı:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<h2>Colspan Özelliği</h2>
<table border=1>
  <tr>
    <th>Adınız</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Mahir</td>
    <td>212 212 12 12</td>
    <td>212 212 12 13</td>
  </tr>
</table>
</body>
</html>

Sonucunu Görelim:

colspan attribute

Html Tablo Oluşturma ve Başlık Ekleme ( < caption > Etiketi )

Tabloya başlık eklemek için < caption > etiketi kullanırız. Örnek verelim. Kod kısmı:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table>
<caption>Ögrenci Notları</caption>
  <tr>
    <th>Ders</th>
    <th>Murat</th>
    <th>Mahir</th>
    <th>Elif</th>
    <th>Abuzer</th>
  </tr>
  <tr>
    <td>Türkçe</td>
    <td>70</td>
    <td>80</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Matematik</td>
    <td>100</td>
    <td>90</td>
    <td>80</td>
    <td>70</td>
  </tr>
   <tr>
    <td>Tarih</td>
    <td>100</td>
    <td>90</td>
    <td>80</td>
    <td>70</td>
  </tr> 
</table>
</body>
</html>

Tarayıcıdaki sonucu:

caption etiketi

Başka bir yazımızda görüşmek üzere…

3 Comments

  1. ali 23 Eylül 2021 Reply
  2. Barış 15 Temmuz 2022 Reply
    • admin 26 Temmuz 2022 Reply

Leave a Reply