HTML <colgroup> Etiketi


Örnek

<colgroup> ve <col> etiketleriyle üç sütunun arka plan rengini ayarlayın:

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.


Tanım ve Kullanım

<colgroup>etiketi, biçimlendirme için bir tablodaki bir veya daha fazla sütundan oluşan bir grubu belirtir .

<colgroup>etiketi, stilleri her satır için her hücre için tekrarlamak yerine tüm sütunlara uygulamak için kullanışlıdır .

Not: Etiket <colgroup>, herhangi bir <caption> öğesinden sonra ve herhangi bir <thead>, <tbody>, <tfoot> ve <tr> öğesinden önce bir <table> öğesinin çocuğu olmalıdır.

İpucu: içindeki bir sütuna farklı özellikler tanımlamak için etiketin içindeki <col><colgroup> etiketini kullanın .<colgroup>


Tarayıcı Desteği

Element
<colgroup> Yes Yes Yes Yes Yes

Öznitellikler

Attribute Value Description
span number Specifies the number of columns a column group should span

Genel Özellikler

Etiket ayrıca HTML'deki Global Nitelikleri<colgroup> de destekler .


Etkinlik Özellikleri

Etiket ayrıca HTML'deki Etkinlik Niteliklerini<colgroup> de destekler .



Daha fazla örnek

Örnek

Tablo sütunlarındaki metni hizalayın (CSS ile):

<table style="width:100%">
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td style="text-align:right">$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td style="text-align:right">$47</td>
  </tr>
</table>

Örnek

Tablo sütunlarında metni dikey olarak hizalayın (CSS ile):

<table style="height:200px">
  <tr>
    <th>Month</th>
    <th style="vertical-align:bottom">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td style="vertical-align:bottom">$100</td>
  </tr>
</table>

Örnek

Bir tablo sütununun genişliğini belirtin (CSS ile):

<table>
  <tr>
    <th style="width:200px">Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

İlgili Sayfalar

HTML DOM referansı: ColumnGroup Object


Varsayılan CSS Ayarları

Çoğu tarayıcı, <colgroup>öğeyi aşağıdaki varsayılan değerlerle görüntüler:

Örnek

colgroup {
  display: table-column-group;
}