HTML'DE TABLO YAPIMI (TABLE TAG)

Merhabalar bugün size html ile tablo yapımını anlatacağım.

Html'de tablo yapmak için table etiketi kullanılır. Table etiketinin içinde <tr> etiketleri açarak satırları (table-row), <td> etiketleri açarak sütunları, alanları (table-data) belirtmiş oluruz.

Burada, blog için hazırladığım bir renk paleti var. 

Burada göründüğü gibi, önce bir table etiketi açıyoruz. Tablo oluşturmak için önce tr etiketi açmamız gerekmektedir. Önce satırı oluşturup, sonra td ile içine alanları atarız. Tr'ye belirli bir yükseklik ve genişlik verdim.

Tr'nin içine td'leri açıyorum. Kodlarım ilk satır için geçerli, ilk satırımda 8 renk var. Her renk için td'nin arka plan rengini ayarlıyorum. Siz içerisine metin girmek isterseniz <td></td> etiketlerinin arasına yazılarınızı yazabilirsiniz.(<td>Ad:</td>) 

<td class="color-palette-border" style="width: 18px; background-color: rgb(244,204,204);"></td> : Hücremin arka plan rengi belirtilen renk kodu olsun. 

Ufak bilgi; rgb: "red-green-blue" Her bir parametre 0-255 arası değer alır. Hangi parametreyi yüksek tutarsanız o renk daha belirgin olur. (0,0,0): siyah, (255,255,255): beyazdır.

Td'lerime class verdim çünkü css'de onlara özellik atadım.

Diyelim ki ilk satırda işiniz bitti, alanlarınızı ayarladınız ve içini doldurdunuz. Satırı kapatmayı lütfen unutmayınız. Tüm td etiketleri <tr></tr> arasına gelmelidir.

Burada ise css var. Ben tablo için css'de kenarlık verdim. Ama isterseniz direkt table etiketinin içinde belirtebilirsiniz. Ama css'de daha çok özellik belirtebilirsiniz.

<table border="1">, Bu şekilde border'ın var olup olmamasını ayarlayabilirsiniz. 

.color-palette-border class'ımda border ayarlarımı yapıyorum.

border-style:solid; Border düz çizgi olsun.

border-width: 1px; Border'ın kalınlığı.

border-collapse: collapse; Borderlar arasında boşluk olmasın. Çakışan borderlar 1 tane gözüksün.

border-color: black; Border rengi siyah olsun.

Önemli bir şey daha, hover. Hover, tanımlanan etiketin üzerine gelindiğinde olacak olayları belirttiğimiz kısımdır. Yani tablomuzun hücrelerine geldiğimizde border rengimiz beyaz olacak, cursor ise pointer şeklini alacak.

Html'de tablo hazırlamak işte bu kadar. İlk öğrenildiği zaman mantığı anlaşılamadığı için bu konuyu seçtim, başka bir yazımda tablolar ile ilgili farklı özellik içeren örnek yapacağım ve size bu konuyu daha iyi anlatmaya çalışacağım. Örnekler yaparak kendinizi geliştirebilirsiniz.

Görüşmek üzere...