HOME HTML ASP PHP JAVASCRIPT C# Makaleler Örnekler Kod Ekle  
 
     
  HTML Nedir
HTML Temel Unsurlar
HTML Başlangıç
HTML Metin Biçimlendirme
HTML Fontlar
HTML Listeler
HTML Linkler
HTML Tablolar

HTML Tablolar (HTML Tables)

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istenilen yerde durmasını sağlamak amacıyla kullanılırlar. HTML'nin en önemli yapıtaşlarıdır. Web sayfası tasarımında en çok kullanılan unsurlardır. Hemen hemen bütün hizalamalar, tasarımlar tablolar kullanılarak yapılmaktadı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.

Tablo etiketleri açılırken "border" parametresi ile tablo sınırlarının gösterilip gösterilmemesi ayarlanır. "1" değerinde görünür, "0" derinde gösterilmez. Eğer bu değer arttırılırsa sınırların kalınlıkları artacaktır.

Tablolar satır ve sütunlardan oluşmaktadır. Tabloya genel bir başlık atanabilir. Her sütun için de kendi başlığını oluşturmak, üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) yapılabilir. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirmek mümkündür

Şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim.

  • Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz.

  • <tr> etiketi ile satırlar,

  • <td> etiketi ile de sütunlar oluşturulur.

  • thead/caption ile tablo başlığı ve tablo alt yazısı yazılabilir.

    Aşağıdaki örnek kodları ve sonucunu görelim.

    View Code    HTML 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

    <html>
<head>
<title>HTML Tablolar</title>
</head>
<body>
<table border="1" bordercolor="#0000FF" width="300px">
<thead>Tablo Başlığı</thead>
<caption align="bottom">
Tablo alt yazısı
<caption>
<tr>
<th>1.Sütun</th>
<th>2.Sütun</th>
<th>3.Sütun</th>
</tr>
<tbody>
<tr>
<td>hücre1</td>
<td>hücre2</td>
<td>hücre3</td>
</tr>
<tr>
<td>hücre4</td>
<td>hücre5</td>
<td>hücre6</td>
</tr>
</tbody>
</table> 
</body>
</html>

    Yukarıdaki kodları çalıştırdığımızda aşağıdaki pencere ekrana gelir.

    Tablolarda satır ve sütunların birleştirilmesi de yapılabilmektedir. Bu işlemler için;

  • Satır Birleştirme : <td> etiketi içerisinde "rowspan" etiketi kullanılır. <td rowspan=3> 3 satırın birleştirilmesi
  • Sütun Birleştirme : <td> etiketi içerisinde "colspan" etiketi kullanılır. <td colspan=2> 2 sütunun birleştirilmesi


    • Ayrıca daha hassas ayarların yapılması için table etiketi içerisinde style parametrelerinden yararlanılır.

    Aşağıdaki örneklerde ayrı ayrı etiketler gösterilmiştir. Farklı olan bölümler kalın olarak yazdırılmış ve örneği yan tarafta gösterilmiştir.

    <table align="center" width="200" border="1">
    <tr>
    <td colspan="2" align="center"><strong> Ad - Soyad</strong></td>
    </tr>
    <tr>
    <td> Kod</td>
    <td> Orneklerim</td>
    </tr>
    </table>
    Ad - Soyad
    Kod Orneklerim
    <table align="center" width="200" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="2" align="center"><strong> Ad - Soyad</strong></td>
    </tr>
    <tr>
    <td> Kod</td>
    <td> Orneklerim</td>
    </tr>
    </table>
    Ad - Soyad
    Kod Orneklerim
    <table align="center" width="200" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
    <tr height="40px">
    <td colspan="2" align="center"><strong> Ad - Soyad</strong></td>
    </tr>
    <tr height="30px">
    <td width="30%"> Kod</td>
    <td width="70%"> Orneklerim</td>
    </tr>
    </table>
    Ad - Soyad
    Kod Orneklerim
    		 
      email : info@kodornekleri.com