Col ve colgroup

<col> ve <colgroup> ile sütunlara stil köprüsü kurarsın.

Col ve colgroup

<colgroup> etiketi tabloda sütunları gruplar; içine <col> etiketleri alır. Her <col> bir sütunu temsil eder ve ona ortak bir stil köprüsü kurar.

Böylece her <td>'ye tek tek stil vermek yerine tek yerden tüm sütunu biçimleyebilirsin. Örneğin bir fiyat listesinde tutar sütununu sağa hizalamak için <colgroup> içine bir <col> koyman yeter.

<col> boş (void) bir etikettir; kapanış yaşamaz.

col span ile sütun gruplama

Bir <col> etiketi varsayılan olarak tek sütunu temsil eder. Birden fazla sütuna aynı stili uygulamak için span özniteliğini kullanırsın: <col span="2"> iki sütunu birden kapsar.

Örneğin dört sütunlu bir tabloda son üç sütuna aynı stili vermek için <colgroup><col><col span="3"></colgroup> yazabilirsin. Bu yaklaşım hem kodu kısaltır hem de tutarlılık sağlar.

Uygulama colgroup ve col span ile tablo kur

Bir <table> yaz. İçine dolu bir <caption> koy. Caption'dan sonra bir <colgroup> ekle; içine bir <col> ve bir <col span="2"> koy. Sonra <thead> içine <th scope="col"> içeren bir satır, <tbody> içine <td> içeren en az bir satır ekle.

Örnek çözümü göster

<table>
  <caption>Aylık Satış Raporu</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Ay</th>
      <th scope="col">Ürün</th>
      <th scope="col">Ciro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ocak</td>
      <td>Kulaklık</td>
      <td>₺3,200</td>
    </tr>
  </tbody>
</table>

Kendini test et

colgroup etiketinin temel rolü nedir?
- Hücreleri birleştirmek
- Sütunlara ortak stil köprüsü kurmak
- Tabloya başlık eklemek
- Tabloyu kaydırılabilir yapmak
Cevabı göster

Sütunlara ortak stil köprüsü kurmak — Doğru. colgroup, içindeki col etiketleriyle sütunlara ortak bir stil köprüsü kurar.

Tabloya colgroup ekle

<table>
  <caption>Aylık Satış</caption>
  ____>
    <col>
    <col span="2">
  </colgroup>
</table>

Cevabı göster

<table>
  <caption>Aylık Satış</caption>
  <colgroup>>
    <col>
    <col span="2">
  </colgroup>
</table>

Etiketi rolüyle eşleştir

colgroup

Sütunları gruplar
col

Tek bir sütunu temsil eder
span özniteliği

Birden çok sütunu kapsar
caption

Tabloya başlık verir

Sıradaki ders: Scope ve headers

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler