HTML ColGroup ve Col (Sütun) Etiketleri ve Örnek Kullanım Şekilleri!

Colgroup ve Col etiketleri ile Bootstrap ‘ta kullanılan “col-“ class özelliğini birbirine karıştırmamalısınız. Colgroup ve Col etiketleri bir tablodaki sütunlara default özellikler eklemenize yarar.

HTML ColGroup ve Col (Sutun) Etiketleri ve Ornek Kullanim Sekilleri
HTML ColGroup ve Col (Sutun) Etiketleri ve Ornek Kullanim Sekilleri

Örnek kullanımı;

See the Pen Untitled by ArmyYazılım (@armyyazilim) on CodePen.

Buradaki colgroup etiketi içindeki col etiketleri sütunlardaki stilleri değiştirmenize yarar. Bu örnekte ilk col etiketinde span=”2″ özniteliği soldan kaç tane sütuna stil uygulanacağını belirtir. Soldan iki sütunun arka planını kırmızı yaptık ancak üçüncü sütun sarı oldu.

Onunda nedeni

ikinci col etiketinin stil özelliği. Tarayıcı kodlarımızı yukarıdan aşağıya doğru okumaya başladı ve ilk iki sütunumuza değişiklikleri uyguladı. Bundan dolayı ikinci col etiketindeki özelliği üstteki col etiketinin uygulandığı soldan ilk iki sütunu geçip üçüncü sütuna uyguladı. Eğer biz span özniteliğine “1” değerini verirsek. Sarı arkaplan ikinci sütuna uygulanır.

Örnekte olduğu gibi;

See the Pen armyyazilim colgroup ve col etiketleri 2 by ArmyYazılım (@armyyazilim) on CodePen.

Yine tablo içi sütunların içerisindeki değerleri hizalamak içinde kullanabilirsiniz;

See the Pen Untitled by ArmyYazılım (@armyyazilim) on CodePen.

Colgroup ve Col etileti çoğu tarayıcıda aşağıdaki css özelliğini default olarak alır.

colgroup {
  display: table-column-group;
}
col {
  display: table-column;
}

O yüzden bu özelliği css bölümünde tekrar belirtmenize gerek yoktur.

Armyyazilim.com İbrahim BOZKURT

En önemlisi herhangi bir sorunuz ve öneriniz varsa, yorumlar kısmında bize bildirin! Eğer yazılım ile ilgileniyorsanız sizde bizlere katılıp makaleler yazablir veya video içerikler üreteblirsiniz. Sizlerle birlikte bizde büyük bir ekip olabiliriz.

Ayrıca İnstagram hesabımızı takip edebilir  bize  Twitter ’dan da yazabilirsiniz. Sosyal medya hesaplarımızdan bize ulaşarak istediğiniz konularda eğer biliyorsak size yardımcı olmaktan mutluluk duyarız.

Bu platformlardan herhangi birinde hesabınız yok ise telaşa gerek yok. Çünkü İstediğiniz soruyu yorumlarda belirtebilirsiniz.

İlginizi çekebilir…

Ayrıca Diğer tüm etiketleri ve kullanımını görmek için Tüm HTML Kodları ve Açıklamaları! makalemize bakabilirsiniz. Çünkü Eminiz ki bilmediğiniz , bilmediğimiz o kadar çok html etiketleri var ki şaşıracaksınız.

Ayrıca Java ve Python ile ilgileniyorsanız Java ve Python kategörilerimize de bakmanızı öneririz.

Veya Sıfırdan WordPress teması yapmak isterseniz WordPress hakkında derin bilgiler edinmek istiyorsanız WordPress kategorimize bakablrsnz.

Ayrıca Css öğrenip istediğiniz tasarımları yapmak isterseniz Css kategorimize göz atmanızı tavsiye ederiz.

Veya JavaScript öğrenip projelerinizi daha dinamik hale getirmek istiyorsanız JavaScript kategorimize bakmanızı öneririz.

En önemlisi bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz…



Bir cevap yazın

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


*
*