Buradasınız

HTML Etiketleri 4

Tablolar

  • Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli  yapı taşlarındandır.
  • Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz.
  • Elbette HTML tasarım konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.

 

<TABLE> ;  Tablolar <table> belirteci ile başlar.

<TR> ;  Tabloda satır oluşturmayı sağlar.  <tr>…</tr>

<TD> ; Tabloda sütun oluşturmayı sağlar.<td>  …</td>

<TH> ; Sütun başlıklarına oluşturmak için, her bir başlık <th> etiketi ile belirtilir ve <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.

 

Tablonun çerçevesini görmek istiyorsak border=”1” parametresi ile kullanmalıyız.

 

Aşağıdaki örnekleri inceleyelim.

 

Aşağıdaki örneği inceleyelim.

<html>  
<head>
<title> Tablo örnekleri </title>
</head>
<body>
    <table border="1">
    <tr>
        <td>Numara</td>
        <td>İsimler</td>
        <td>Soyisimler</td>
    </tr>
    <tr>
        <td>618</td>
        <td>Samet</td>
        <td>OLGUN</td>
    </tr>
    <tr>
        <td>509</td>
        <td>Ebru</td>
        <td>KARANFİL</td>
    </tr>
    <tr>
        <td>727</td>
        <td>Ahmet</td>
        <td>DURSUN</td>
    </tr>
    </table>
    
</body>
</html>

 

Görüldüğü gibi <table> etiketinin içinde her satır için <tr>, <tr> etiketlerinin içinde de her sütun için <td> etiketi açıyoruz. Bilindiği gibi yatay olanlar satır, dikey olanlar sütun, bunların kesiştiği yerde ise hücre oluşur. Şimdi bu etiketlerin parametrelerine bakalım.

 

<table>

Parametre

Açıklama

border

Tablonun kenarlık kalınlığını belirtir. border="0" kenarlığın gizlenmesini sağlar.

cellpadding

Hücre içindeki yazı, resim ya da nesnenin kenarlık ile arasındaki boşluktur.

cellspacing

Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığıdır.

align

Tabloyu yatay olarak sola, ortaya yada sağa hizalamada kullanılır.

align="left", align="center", align="right"

width ve height

Tablonun genişlik ve yüksekliğini belirtir. Piksel yada % olarak bir değer verilir.

bgcolor

Tablodaki hücrelerin arka planını renklendirmede kullanılır.

background

Tablodaki hücrelere arka plan resmi vermek için kullanılır.

 

<tr>

Parametre

Açıklama

bgcolor

Satırdaki hücreleri renklendirmede kullanılır.

height

Satırdaki hücrenin yüksekliğini belirtir.

align

Satırdaki hücreler içinde yatay hizalama yapar. left, center, right

valign

Satırdaki hücreler içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt)

 

<td>

Parametre

Açıklama

bgcolor

Hücreyi renklendirmede kullanılır.

background

Hücreye arka plan rengi vermek için kullanılır.

width ve height

Hücrenin genişlik ve yüksekliğini belirtir. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde en büyük height değeri tüm satır için geçerli olacaktır.

align

Hücre içinde yatay hizalama yapar. left, center, right

valign

Hücre içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt)

 

Aşağıdaki örneğimizde sütünların genişliği ayarlandı. Örneği inceleyelim.

<html>  
<head>
<title> Tablo örnekleri </title>
</head>
<body>
    <table border="1">
    <tr>
        <td width="50">Numara</td>
        <td width="100">İsimler</td>
        <td width="100">Soyisimler</td>
    </tr>
    <tr>
        <td>618</td>
        <td>Samet</td>
        <td>OLGUN</td>
    </tr>
    <tr>
        <td>509</td>
        <td>Ebru</td>
        <td>KARANFİL</td>
    </tr>
    <tr>
        <td>727</td>
        <td>Ahmet</td>
        <td>DURSUN</td>
    </tr>
    </table>
    
</body>
</html>

 

Aşağıdaki örneğimizde satırların yüksekliğini ayarladık.

<html>  
<head>
<title> Tablo örnekleri </title>
</head>
<body>
    <table border="1">
    <tr>
        <td width=50>Numara</td>
        <td width=100>İsimler</td>
        <td width=100>Soyisimler</td>
    </tr>
    <tr>
        <td height=40>618</td>
        <td>Samet</td>
        <td>OLGUN</td>
    </tr>
    <tr>
        <td height=40>509</td>
        <td >Ebru</td>
        <td>KARANFİL</td>
    </tr>
    <tr>
        <td height=40>727</td>
        <td>Ahmet</td>
        <td>DURSUN</td>
    </tr>
    </table>
    
</body>
</html>

 

Şimdide renklendirme işlemleri yapalım. Tablolarda satırları (TR) ve hücreleri ayrı ayrı renklendirebiliriz. Aşağıdaki Örneği inceleyelim.

<html>  
<head>
<title> Tablo örnekleri </title>
</head>
<body>
    <table border="1" >
    <tr bgcolor="#e8980c">
        <td width=50>Numara</td>
        <td width=100>İsimler</td>
        <td width=100>Soyisimler</td>
    </tr>
    <tr bgcolor="#cdffa3">
        <td height=40>618</td>
        <td>Samet</td>
        <td>OLGUN</td>
    </tr>
    <tr bgcolor="#cdffa3">
        <td height=40>509</td>
        <td >Ebru</td>
        <td bgcolor="#FF485B">KARANFİL</td>
    </tr bgcolor="#cdffa3">
    <tr bgcolor="#cdffa3">
        <td height=40>727</td>
        <td>Ahmet</td>
        <td>DURSUN</td>
    </tr>
    </table>
    
</body>
</html>

 

 

Örnek: Aşağıdaki uygulamayı sizler yapınız. (Sütünların genişliği: 50, Sütünların genişliği: 50, Yazılar ortalı)

 

Örnek: Aşağıdaki uygulamayı sizler yapınız.

  •  İlk satır arkaplan siyah(, yazılar beyaz(#ffffff), ortalı ve kalın şeklinde olacak.
  • Diğerleri araplan #ff9900,  yazılar kırmızı olacak.
  • Tablo çerçeve kalınlığı 2 olacak.
  • Genişlik tümü 100px,yükseklik tümü 40px olacak.


 

Hücreleri Birleştirme

 <td colspan=".." rowspan="..">

  • Aynı satırdaki hücreleri birleştirmek için colspan,
  • aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.

 

 

Aşağıdaki örneğimizi inceleyelim.

 

<html>
    <head>
    <title> Tablo Biçimlendirme</title>    
    </head>
    
    <body >
    <table border=1>
        <tr>
            <td colspan=2>Delphi</td>
            <td> Pascal    </td>
        </tr>
        <tr>
            <td>XML</td>
            <td>Borland C</td>
            <td rowspan=2>HTML</td>
        </tr>
        <tr>
            <td>PHP</td>
            <td>Basic</td>
    </table>
    
    </body>
</html>

 

Örnek: Aşağıdaki uygulamayı sizler yapınız.( Sütun genilşikleri:100)

 

 

 

Aşağıdaki Örnekleri inceleyiniz

hücre

 

<table border="0">
 <tr>   <td>hücre</td>  </tr>
</table>

hücre

 

<table border="2">
 <tr>     <td>hücre</td>   </tr>
</table>

hücre

 

<table border="1" cellpadding="0">
 <tr>
  <td>hücre</td>
 </tr>
</table>

hücre

 

<table border="1" cellpadding="5">
 <tr>
  <td>hücre</td>
 </tr>
</table>

hücre1

hücre2

 

<table border="1" cellspacing="1">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

 

<table border="1" cellspacing="5">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

 

<table border="1" cellspacing="10">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

 

<table border="1" align="left">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

 

<table border="1" align="center">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

 

<table border="1" align="right">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

 

 

 

hücre1

hücre2

 

 

 

<table border="1" width="150" height="200">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

 

 Aşağıdaki uygulamayı yapınız.

 

Yorum ekle

Konuyla İlgili Yazılar

HTML Etiketleri 2

Metin Ve Görünüm Düzenleme Etiketleri <HX>(<h1>..<h6>): Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini... devamı...

HTML Etiketleri 3

HTML Giriş

HTML Etiketleri 1

CSS Giriş