HTML Academy · Ders

Birleştirme için colspan ve rowspan

Hücreleri sütunlar ve satırlar boyunca birleştirmeyi öğrenin.

Birleştirme için colspan ve rowspan, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Hücrelerin Birden Fazla Satıra veya Sütuna Yayılması Nedir?

Varsayılan olarak her tablo hücresi bir satır ve bir sütun kaplar. Yayılma, bir hücrenin birden çok sütuna veya satıra uzanmasını sağlar:

colspan — birden çok sütuna yayılma
rowspan — birden çok satıra yayılma

colspan

colspan özniteliği, bir hücrenin birden çok sütuna yayılmasını sağlar:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

rowspan özniteliği, bir hücrenin birden çok satıra yayılmasını sağlar:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan ve rowspan Birlikte

Her iki özniteliği de tek bir hücrede birleştirebilirsiniz:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Yayılan Hücreleri Hesaba Katma

Bir hücre birden çok sütuna yayıldığında, yayılan satırlarda bu sütunları yazmayın:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Yaygın Yayılma Kalıpları

Gerçek dünyadan tablo yayılma örnekleri:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

Birleştirilmiş Satır Başlıkları için rowspan

Birleştirilmiş satır grubu etiketleri oluşturmak için rowspan kullanın:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — Tam Genişlikte Hücre

0 değerindeki bir colspan, bir sütun grubunda kalan tüm sütunlara yayılır (nadiren kullanılır):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Yayılma ve Erişilebilirlik

Karmaşık yayılma kullanan tablolar, ekran okuyucular için scope ve headers özniteliklerine ihtiyaç duyar:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Yayılma Sorunlarını Ayıklama

Yayılmayla ilgili yaygın hatalar:

Yayılmadan sonra bir satırda çok fazla veya çok az hücre bulunması
rowspan'in satır sayısının ötesine uzanması
Çakışan yayılmalar (iki hücrenin aynı konumu sahiplenmesi)

Bir şey yanlış görünüyorsa tablo yapısını incelemek için tarayıcının DevTools'unu kullanın.

Yayılan Hücreler için CSS

Birden çok sütuna veya satıra yayılan hücreleri biçimlendirin:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Yazdırma ve Yayılma

Yayılan hücreler modern tarayıcılarda doğru biçimde yazdırılır. Ancak:

thead satırları sütunlara yayılıyorsa her yazdırılan sayfada doğru biçimde yinelenir
tbody içindeki rowspan, sayfa sonlarında yinelenmez
Karmaşık tabloları yayımlamadan önce yazdırma önizlemesinde deneyin

Hızlı Kontrol

3 sütunu kaplaması gereken bir tablo hücreniz var. Hangi özniteliği kullanırsınız?

Özet: colspan ve rowspan

Hücre yayılmasının temel noktaları:

colspan — hücre birden çok sütuna yayılır
rowspan — hücre birden çok satıra yayılır
Yayılan hücreleri hesaba katın: yayılmanın kapsadığı hücreleri yazmayın
Yayılan başlıkların erişilebilirliği için scope="colgroup" ekleyin
Düzen sorunlarını ayıklamak için DevTools kullanın

Sıkça Sorulan Sorular

“Birleştirme için colspan ve rowspan” dersi ücretsiz mi?

Evet — “Birleştirme için colspan ve rowspan” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Birleştirme için colspan ve rowspan” dersinde ne öğreneceğim?

Hücreleri sütunlar ve satırlar boyunca birleştirmeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Birleştirme için colspan ve rowspan” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

table, tr, td ve th
thead, tbody ve tfoot Yapısı
Birleştirme için colspan ve rowspan
Tablo Erişilebilirliği: scope, summary ve caption

← HTML Academy Sayfasına Dön