HTML Tablo Kullanımı

Web sayfasının yapımında en temel kullanılan ögelerden bir tanesi tablolardır. Tablolar birçok etiketten ve parametreden oluşur. Aşağıda bu etiketlerin ve parametrelerin kullanımını inceleyeceğiz.

Temel Tablo Etiketleri

<table> Etiketi

Web sayfası içerisinde bir tablo tanımlar. Table etiketi border parametresi ile kullanılırsa oluşturulan tabloya kenarlık eklenir.

Kullanımı:

<table>   </table>

<table border=”1″> Tablo etrafında bir mm uzunluğunda bir çerçeve oluşur.

<caption> Etiketi

Oluşturulan tablonun başlığını tanımlar. Tablo başlığı tablonun üst ve orta kısmında yer alır.

Kullanımı:

<caption> Tablo başlığı buraya yazılır.  </caption>

<tr> Etiketi

Tablo içerisinde tek bir tablo satırı eklemek için kullanılır.

Kullanımı:

<tr> </tr>

<th> Etiketi

Tablo içerisinde bir başlık hücresi oluşturmaya yarar.Oluşturulan bu başlık hücresi ortalı ve koyu renkte yazılır.

Kullanımı:

<th> İsim </th>

<th> Soyisim </th>

<td> Etiketi

Tablo içerisinde bir hücre tanımlar. Tanımlanan hücre içindeki metinler sola yaslı şekilde tanımlanır.

Kullanımı:

<td> Nazım </td>

<td> BİRCAN </td>

<td> İbrahim  </td>

<td> YANIK </td>

 

Temel Tablo Özellikleri

 

Align Parametresi

Bir hücre içerisinde bulunan verinin hücre içerisindeki konumunu belirler. Left, right, center  parametrelerinden birini kullanır.

Valign Parametresi

Bir hücre içerisinde bulunan verinin düşey konumdaki hizalama işlemlerini gerçekleştirir. Top,middle vya bottom parametlerinden birini kullanır.

Colspan Parametresi

Bir hücrenin tablo içerisinde kullandığı sütun sayısını ifade eder. Colspan belirtilen sayı kadar satırda hücre birleştirip tek bir hücre oluşlurur.

 

Rowspan Parametresi

Bir hücrenin tablo içerisinde kullandığı satır sayısını ifade eder. Rowspan belirtilen sayı kadar satırda hücre birleştirip tek bir hücre oluşturur.

 

Nowrap parametresi

Hücre içerisindeki otomatik veri akışını iptal eder.

 

Aşağıda bir öğrencinin derslerden aldığı notlar tablo şeklinde verilmiştir. Kodları inceleyerek konuyu sonlandıralım.

<html>
   <head>
      <title>
         ÖĞRENCİ BAŞARI TABLOSU
      </title>
   </head>
   <body>
      <table border="1">
         <caption> Öğrenci Notları </caption>
         <tr>
            <th>DERS</th>
            <th>NOT</th>
         </tr>
         <tr>
            <td>TÜRKÇE</td>
            <td>80</td>
         </tr>
         <tr>
            <td>MATEMATİK</td>
            <td>70</td>
         </tr>
      </table>
   </body>
</html>

 

EKRAN ÇIKTISI:

DERS
NOT
TÜRKÇE
80
MATEMATİK
70