HTML Tablolar [Ders 7]


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ücre1 1.sırada Hücre2 1.sırada Hücre3
2.sırada Hücre1 2.sırada Hücre2 2.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ığı
1 2 rowspan=”3″
colspan=”2″
5 6

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.

Bu içeriği nasıl buldunuz?

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

Dijital yayıncılık alanında Türkiye, yükselen bir grafik çizmektedir. Bu amaç ile profesyonel işlere imza atmak üzere yola çıktık. 5. yılımızda araştırmayı seven herkese kapımızı açtık. Sizlerde makalelerinizi dergiCE'de paylaşarak, dijital dünyada yerinizi alabilirsiniz.

Yorumlar 0

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

İçerik Türünü Seçin
Kişilik Testi
Kişilik Hakkında Testler
Test
Cevaplamalı Testler
Anket
Oylamalı Seçenekler
Yazı
Biçimlendirilmiş Metinler
Puanlamalı Liste
Puanlamalı Liste
Video
Youtube, Vimeo, Vine vs
Ses/Müzik
Soundcloud, Mixcloud
Resim
GIF veya Resim