YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • colgroup, col Etiketleri ile span, colspan, rowspan Nitelikleri
colgroup, col Etiketleri ile span, colspan, rowspan Nitelikleri - html, html dersleri, colgroup, colgroup etiketi, col, col etiketi, span, span niteliği, colspan, colspan niteliği, rowspan, rowspan niteliği, #16
Ahmet Aydın - 11/02/2021 - 43 Görüntülenme

colgroup, col Etiketleri ile span, colspan, rowspan Nitelikleri

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML’de colgroup etiketi, col etiketi, span niteliği, colspan niteliği ve rowspan niteliği yapılarını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

colgroup Etiketi

Web sayfasında bulunan tablo veya tablolarımızdaki kolonları stillendirmek için gruplama yapmak istediğimizi temsil eden etikettir. colgroup etiketi ile bir gruplama yapmak istediğimizi belirtmiş oluyoruz. Gruplama işlemlerini colgroup etiketinin açma ve kapatma etiketleri arasında col etiketi sayesinde gerçekleştiriyoruz.

col Etiketi

Tablomuzda bulunan kolonları temsil eden etikettir. colgroup etiketinin açma ve kapatma etiketleri arasında kullanılan col etiketi sade haliyle sırasıyla soldan sağa doğru bir kolonu temsil etmektedir. Örneğin beş kolonlu bir tablomuz olsun ve biz colgroup etiketinin açma ve kapatma etiketleri arasında bir tane col etiketi kullandığımızı varsayalım. col etiketinin açma etiketinde bulunan col ifadesinden sonra bir boşluk bırakalım ve style = “” yapısını oluşturalım. Tırnak işaretleri arasında CSS kodu olan background özelliği ile bir arkaplan rengi belirleyelim.

Örnek: style = “background:red”;

Bu kullanımla beş kolonlu tablomuzda sadece ilk kolonun arkaplan rengi kırmızı olacaktır.

colgroup etiketinin açma ve kapatma etiketleri arasında ne kadar col etiketi kullanırsak soldan sağa doğru sırasıyla ilgili stillendirmeler gerçekleşecektir.

Bazı durumlarda peş peşe olan kolonlara aynı stil ataması yapmamız gerekebilir. Bunun için birden fazla col etiketi kullanmak yerine bir col etiketi için span niteliğini kullanabiliriz.

span Niteliği

col etiketi için kullanılan span niteliği ile seçilecek kolon sayısını belirtebiliriz. col etiketinin açma etiketinde bulunan col ifadesinden sonra bir boşluk bırakıp span = “” yapısını oluşturalım. Tırnak işaretleri arasına ilgili kolondan itibaren kaç kolon seçmek istiyorsak o değeri yazabiliriz. Yukarıdaki örneğimizde olduğu gibi stil ataması yaptığımızda col etiketi için kullanılan span niteliğine verilen değer kadar bulunduğu kolondan itibaren sağa doğru kolonlar stillendirilecektir.

Örnek: span = “2”

Bu örnekte span niteliği hangi col etiketinde kullanıldıysa o kolon ve bir sonraki (ikisi birlikte 2 eder) kolon stillendirilecektir. Tabi ilgili col etiketinde style niteliği ile CSS özellik ataması yapmayı unutmamalıyız.

rowspan Niteliği

Tablomuzda bulunan hücreleri satır bazında, dikeyde yani yukarıdan aşağı birleştirmek için kullanılan niteliktir. td etiketinde kullanılır. Birleştirilecek hücreler için sadece bir tane td etiketi kullanmamız yeterlidir. Birleştirilecek hücre sayısı td etiketinin rowspan niteliğine değer olarak verilir.

Örnek: rowspan = “2”

Örnekteki kullanımı hangi hücrede gerçekleştirdiysek o hücre ve bir alt satırda bulunan (ikisi birlikte 2 eder) hücrenin birleştirilmesini sağlamış oluyoruz.

Tablo yapısının bozulmaması için birleştirilecek hücrelerin bir tanesinin td etiketi ile oluşturulmasına dikkat etmemiz gerekiyor.

colspan Niteliği

Tablomuzda bulunan hücreleri kolon bazında, yatayda yani soldan sağa birleştirmek için kullanılan niteliktir. td etiketinde kullanılır. Birleştirilecek hücreler için sadece bir tane td etiketi kullanmamız yeterlidir. Birleştirilecek hücre sayısı td etiketinin colspan niteliğine değer olarak verilir.

Örnek: colspan = “2”

Örnekteki kullanımı hangi hücrede gerçekleştirdiysek o hücre ve bir sağında bulunan (ikisi birlikte 2 eder) hücrenin birleştirilmesini sağlamış oluyoruz.

Örneklerde kullanılan 2 değeri değiştirilerek istenildiği kadar birleştirme işlemi uygulanabilir. Burada dikkat etmemiz gereken tablo yapımızın bozulmaması için birleştirilecek hücrelerin ilkini oluşturmamız yani bir tane td etiketi kullanmamız ve diğerlerini oluşturmamamızdır.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML’de colgroup etiketi, col etiketi, span niteliği, colspan niteliği ve rowspan niteliği yapılarını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...