HTML Tablo Oluşturma

Herkese merhaba! Finaller, bütünlemeler derken bir dönemin daha sonuna geldim. Bu yüzden uzun bir süredir yazı paylaşamıyordum. Bugün HTML kullanarak tablo oluşturma ve tabloya CSS ile özellik eklemeye çalışacağız. HTML üzerinde tablo oluşturma etiketleriyle başlayalım ardından örneklerle konuyu pekiştiririz.

HTML’de tablo oluşturmak için beş etiket vardır;

AÇIKLAMAETİKET
Tablo oluşturmak için kullanılan etikettir. Bu etiketlerin arasına satır, sütun, başlık gibi özellikler eklenebilir.<table> </table>
Tablonun altına ya da üstüne başlık eklemek için kullanılır. Belirttiğimiz alt, üst kavramını da “align” özelliğine verilecek
top, bottom ile hizalayabiliriz.
<caption> </caption>
Tabloya genel bir başlık vermek için kullanılır.<thead> </thead>
Açılımı Table Row (tr && row = satır) olan bu etiket tablomuzda satır oluşturmak için kullanılır.<tr> <tr>
Açılımı Table Header olan bu etiket tablomuzda başlık hücresi ekler. Bu hücredeki yazı bold ve ortalı yazılır.<th> </th>
Açılımı Table Data (td) olan bu etiketimizde ise tablonun satırına veri elemanı (hücre) eklemede kullanılır.<td> </td>
HTML Tablo Etikletleri

Tablolar bildiğiniz üzere satır ve sütunlardan oluşur. Tabloya “thead” etiketini kullanarak genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Tablonun sona erdiği satırdan sonraki satıra açıklama olarak “caption” etiketini kullanarak koyabiliriz. Gelin şimdi de bu öğrendiğimiz etiketlerde kullanabileceğimiz özellikleri inceleyelim.


Etiketlerimizin Özellikleri

İlk önce tabloyu oluşturduğumuz <table> etiketinde düzenleyebileceğimiz özelliklere bakalım.

  • Align : Tablonun sayfadaki hizalanmasını kontrol eder. Bu özellik left, center veya right olabilmektedir. Eğer bir değer girilmezse varsayılan olarak left atanır.
  • Width : Tablonun genişliğini sabit olarak belirtmemize yaramaktadır. Ya piksel olarak sayı girilmelidir ya da sayfaya oranlı bir yüzdelik değer yazılmaktadır.
  • Border : Türkçe karşılığı çerçeve olarak çevirebileceğimiz bu özellik tablonun kenar kalınlığını kontrol etmemize yarıyor. Piksel olarak sayı girilmelidir.
  • Cellspacing : Tablodaki hücreler arası çerçevenin kalınlık özelliğidir. Eğer bir değer atanmazsa varsayılan olarak çerçeve kalınlığı 1 dir.
  • Cellpadding : Hücre çerçevesi ile içeriği arasındaki mesafeyi pixel olarak belirler. Varsayılan mesafesi 1 pixeldir.

Şimdi de satır etiketimiz olan <tr> etiketini inceleyelim.

  • Align : Satırdaki hücrelerin içeriğinin yatay hizalanmasını kontrol eder. Bu özelliğe left, right veya center değerleri atanabilmektedir.
  • Valign : Align özelliğimizin dikey versiyonu diyebiliriz. Satırdaki hücrelerin içeriğinin dikey hizalanmasını kontrol eder. Bu özellik align’den farklı olarak top middle veya bottom değerleri alabilmektedir.

Son olarak tablo başlığı etiketimiz <th> ve tablo verisi bir diğer adıyla sütunlarımızın <td> özelliklerine bakalım.

  • Align: Hücre içeriğinin (Burada belirttiğimiz her hücre kavramı satır ve sütunun kesiştiği noktayı temsil etmektedir) yatay hizalanmasını kontrol eder.
  • Valign: Hücre içeriğinin dikey hizalanmasını kontrol eder.
  • Nowrap: Kelime aralarında satır sonu kırmalarını pasif yapar.
  • Rowspan: Bir hücrenin genişletileceği satır sayısını belirtir.
  • Colspan: Bir hücrenin genişletileceği sütun sayısını belirtir.
  • Width: Hücrenin piksel olarak genişliğini belirtir.
  • Height: Hücrenin piksel olarak yüksekliğini belirtir.

Artık etiketlerimizin özelliklerine kadar öğrendiğimize göre şimdi aşama aşama bir tablo örneği yapalım.


~ Tablo Örneği ~

Tablo yapmak için gerekli etiketleri öğrendiğimize göre iki satır ve iki sütundan oluşan bir tablo yapalım. Hücrelere “Laptop, Mouse, Buzdolabı, Çamaşır Makinesi” ürünlerini ekleyelim.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tablolar</title>
</head>
<body>
    <table>
        <tr>
            <td>Laptop</td>
            <td>Buzdolabı</td>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>Çamaşır Makinesi</td>
        </tr>
    </table>
</body>
</html>

Tablomuzu güzelleştirmek için “style.css” dosyası oluşturalım. Eğer isterseniz siz farklı yollarla da CSS kullanabilirsiniz. Bununla ilgili yazımı da inceleyebilirsiniz 🙂 Oluşturduğum CSS dosyası da aşağıdaki şekildedir. Birazdan eklemeler yapacağız.

table
{
 border: 3px solid #ababab;   
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
}

Hadi bakalım tablomuzun ilk hali nasıl görünüyormuş 🙂

Tablomuzun İlk Hali
Tablomuzun İlk Hali

Şimdi de 1. sütun için Bilgisayar 2. sütun için de Beyaz Eşya isimli kategorilerimizi başlık olarak ekleyelim. Ekledikten sonra size CSS’in aslında tablolardaki önemini de göstermek istiyorum. Bunun için style.css dosyası içerisindeki “td” ve “th” için eklediğimiz özellikleri silip nasıl gözüküyor bir bakalım.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tablolar</title>
    <link rel = "stylesheet" type = "text/css" href="style.css">
    
</head>
<body>
    <table>
        <tr>
            <th>Bilgisayar</th>
            <th>Beyaz Eşya</th>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>Çamaşır Makinesi</td>
        </tr>
        <tr>
            <td>Laptop</td>
            <td>Buzdolabı</td>
        </tr>
    </table>
</body>
</html>

Kategorilerimizi index.html içine satırlara bilgi ekliyormuşuz gibi ekliyoruz. Yani önce “tr” etiketlerimizi açıyoruz. Aralarına da “th” etiketlerini kullanarak kategorilerimizi ekliyoruz. Gelin bakalım CSS özelliklerini kaldırınca nasıl oluyor.

Tablomuzun Kategoriler eklenmiş fakat CSS bulunmayan hali
Tablomuzun Kategoriler eklenmiş fakat CSS bulunmayan hali

Gördüğünüz üzere çok biçimsiz duruyor bunun sebebi CSS’te vermiş olduğumuz kenarlık değerlerini kaldırmış olmamız. CSS kodlarımızı tekrar ekleyelim ve çıktımızı kontrol edelim.

table
{
 border: 3px solid #ababab;   
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

Tablomuz CSS kodları eklendikten sonra şu şekilde olacaktır;

Tablomuzun Kategoriler ve CSS eklenmiş hali
Tablomuzun Kategoriler ve CSS eklenmiş hali

Son olarak bu tablomuza “caption” etiketini kullanarak “Ürün Çeşitlerimiz” yazısını yazdıralım.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tablolar</title>
    <link rel = "stylesheet" type = "text/css" href="style.css">
    
</head>
<body>
    <table>
           <caption>Ürün Çeşitlerimiz</caption>
       <tr>
            <th>Bilgisayar</th>
            <th>Beyaz Eşya</th>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>Çamaşır Makinesi</td>
        </tr>
        <tr>
            <td>Laptop</td>
            <td>Buzdolabı</td>
        </tr>
    </table>
</body>
</html>

Şimdi de çıktımıza bakalım ve uygulamamızı sonlandıralım.

Tablomuza Başlık eklenmiş hali
Tablomuza Başlık eklenmiş hali

Bu şekilde adım adım nasıl tablo oluşturduğumuzu öğrenmiş olduk.

Böylece HTML üzerinde nasıl tablo oluşturduğumuzu öğrenmiş olduk. Bunlara ek olarak tablo oluştururken kullandığımız etiketlerde değiştirebileceğimiz özellikleri de öğrenmiş olduk. Bu öğrendiklerimizi örnekle pekiştirmeye çalıştım. Umarım anlaşılmıştır. Eğer anlamadığınız bir kısım olursa bana ulaşabilirsiniz.

Bir sonraki yazıda görüşünceye dek herkese sağlıklı günler dilerim. ❁❀