HTML Tablolar [Ders 7]

1 dk okuma süresi


0
7 Paylaşım
HTML Tablo Oluşturma Kodları
HTML Tablo Oluşturma Kodları

Tablolar <table> ……. </table> etiketleri ile belirtilir. Yatay hücre (satır) oluşturmak için <tr> ve dikey hücre (sütun) oluşturmak için <td> etiketlerini kullanırız. <tr> table row ve <td> table data anlamına gelmektedir. Tablolar metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler vb komutlar içerebilir. Örnek olarak 2 satır ve 3 sütundan oluşan bir tablo oluşturalım:

<table border="1">      //hücre kenarlığı 1
 <tr>
 <td>1.sırada Hücre1</td>
 <td>1.sırada Hücre2</td>
 <td>1.sırada Hücre3</td>
 </tr>
 <tr>
 <td>2.sırada Hücre1</td>
 <td>2.sırada Hücre2</td>
 <td>2.sırada Hücre3</td>
 </tr>
 </table>
1.sırada Hücre11.sırada Hücre21.sırada Hücre3
2.sırada Hücre12.sırada Hücre22.sırada Hücre3

Ayrıca tablolarda kullanabileceğimiz etiketler ve açıklamaları şu şekildedir.

  • caption: tablo başlığı
  • bordercolor: çerçeve rengi
  • width: genişlik
  • height: yükseklik
  • cellpadding: satırlar arası kenarlık boşluğu
  • cellspacing: sütunlar arası kenarlık boşluğu
  • align: hizala (Özellikler: left, right, center)
  • valign: dikey hizalama (Özellikler: top, middle, bottom, baseline)
  • colspan: hücreleri yanyana birleştir
  • rowspan: hücreleri altalta birleştir

Yukarıdaki özelliklerin hangi etiketin içinde kullanılacağını uygulamalı olarak öğrenelim.

KOD:
<table height="185" width="400" border="5" cellspacing="15" cellpadding="10">
<caption>Tablo Başlığı</caption>
<tr>
<td>1</td>
<td>2</td>
<td valign="bottom" rowspan="3">rowspan="3"</td>
</tr>
<tr>
<td align="right" colspan="2">colspan="2"</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

GÖRÜNÜM:

Tablo Başlığı
12rowspan=”3″
colspan=”2″
56

Eğer bir sütuna hiçbir şey yazmadan boş bırakılırsa sütun görünmez. Bu sorunu çözmek için &nbsp; (boşluk) karakterini bırakarak bu sorunu çözebilirsiniz.


Nasıl Tepki Verirdiniz?

Beğen Beğen
5
Beğen
Mutlu Mutlu
3
Mutlu
Eğlenceli Eğlenceli
3
Eğlenceli
Üzgün Üzgün
0
Üzgün
Olamaz Olamaz
0
Olamaz
Kızgın Kızgın
0
Kızgın
Komik Komik
0
Komik
İlginç İlginç
0
İlginç

dergiCE üyeleri ne diyor?

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir