Yeni Başlayanlar İçin HTML Tablo Kullanımı

Merhaba arkadaşlar bu dersimizde, yeni başlayan arkadaşlar için HTML ve CSS ile Tablo özelliklerinden bahsedeceğim.

Eskiden çok sık kullandığımız tablo yapıları günümüzde kendini DIV lere bırakmış olsada , bu işe gönül vermek isteyen yeni başlayan arkadaşlarımız için ve bazı durumlarda bizlere de yardımcı olması açısından küçük bir döküman paylaşmak istedim.

Şimdi kodlarımızı inceleyelim;

Öncelikle tablo komutları basitçe bir anlatalım.
Tüm tablolar <table> ile başlar </table> ile biter.Bu iki komuttan ilki tablonun başladığı diğeri
ise tablonun bittiğini gösterir.Bu iki komut arasında satır ve sütun eklemek için başka komutlar
kullanır.Bunlar;
satır eklemek için;

<tr>

sütun eklemek için;

<td>

 

‘dir.
Bu komutlar içinde birçok html komutuda kullanılabilir.Bunlar özellikle;

 

 

bgcolor-> Zemin rengi.Hem tablo için hemde hücreler için kullanılabilir.
background -> Zeminde resim göstermek için.Htmlde tablo hemde hücrelerin herbiri için kulanılabilir.
border -> Tablonun etrafına çerçeve yapmak için kullanılır.
width -> Tablo veya hücrenin genişliğini belirtmek için kullanılır.
height -> Tablo veya hücrenin yüksekliğini belirtmek için kullanılır.
align -> Tablo yada hücreyi belirli bir tarafa yaslamak için kullanılır.Tablonun kendisi için kullanıldığında tablonun, hücreler için kullanıldığında hücre içindeki nesnelerin hangi tarafa yaslanacağının belirtir.

valign -> Hücreler için kullanılır.Hücre içindeki nesnelerin yukarı, aşağı yada ortada durmasını sağlar.

colspan -> Sütunları birleştirmek için kullanılır.

rowspan -> Satırları birleştirmek için kullanılır.
cellspacing -> Hücreler arasındaki boşlukları belirtir.
cellpading -> Hücrelerdeki nesnelerin kenarlara ne kadar uzaklıkta olacağını belirtir.

 

 

Basitçe örnek verecek olursak;

<table>
<tr>
<td>

                                 SEO Uzmanı Ömer Kadir Oruç

                 </td>

</tr>
</table>

 

 

şeklindedir.

 

Eğer biz açtığımız satırda iki tane sütun kullanmak isteseydik eklememiz gereken;
<td>deneme</td> satırından sonra,
<td>deneme2</td> ‘dir.

Ömer Kadir Oruç

şeklinde bir görünüm ortaya çıkacaktır.

 

Şimdide 2 satır 3 sütundan oluşan bir tablo yapalım.

 

<table>
<tr>
<td>hücre 1-1</td>
<td>hücre 1-2</td>
<td>hücre 1-3</td>
</tr>
<tr>
<td>hücre 2-1</td>
<td>hücre 2-2</td>
<td>hücre 2-3</td>
</tr>
</table>

SEO Uzmanı

 

şeklinde görünecektir.

 

En son olarakta yukarıda anlattıklarım ve tablolarda kullanılan diğer html komutlarını  kullanarak
karmaşık bir tablo yapalım.
Şimdide kodları satır satır açıklayacağım;

Örnek Tablo;

Ömer Kadir Oruç Bilgiler

 

 

 

 

 

Açıklama Ömer Kadir Oruç

KODLARI indirmek için tıklayınız.

Ömer kadir oruç HTML tablo

Comments
  1. 2 sene ago

Bir Cevap Yazın

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