Hücre birleştirme

colspan ve rowspan öznitelikleriyle hücreleri birleştirmeyi öğrenirsin.

Yatayda birleştirme: colspan

Bazen bir hücrenin birden çok sütunu kaplaması gerekir. Bunun için colspan özniteliği kullanılır. Örneğin <td colspan="2"> o hücrenin iki sütunu birleştirdiğini belirtir.

Örnek bir tablo düşünelim: ilk satırda tek bir 'Dönem Sonu' başlığı tüm sütunları kaplasın, altta iki ayrı sütun olsun. Bu yapıyı colspan olmadan kuramazsın. Değer her zaman bir tam sayıdır ve kaç sütun birleştiğini gösterir.

Dikeyde birleştirme: rowspan

Bir hücrenin birden çok satırı kaplaması gerekiyorsa rowspan kullanılır. Örneğin <td rowspan="3"> hücrenin üç satırı aşağı doğru birleştirdiğini belirtir.

Bu, sol sütunda tek bir kategori adının sağda üç satıra yayılması gereken durumlarda işe yarar. colspan ile aynı hücrede birlikte de kullanılabilir; ancak ikisi birden yalnızca gerçekten gerekli karmaşık yapılarda tercih edilmelidir.

Birleştirilmiş hücre örneği

Bir colspan örneği:

<table>
  <tr>
    <td colspan="2">Dönem Sonu</td>
  </tr>
  <tr>
    <td>Vize</td>
    <td>Final</td>
  </tr>
</table>

İlk satırda tek hücre iki sütunu kaplar; ikinci satırda ise iki ayrı hücre vardır. Birleştirilen hücre sayısı, alt satırdaki hücre sayısına eşit olmalıdır.

Uygulama Birleştirilmiş hücreli tablo yaz

Body içine bir <table> ekle. İlk <tr> satırında tek bir <td colspan="2"> hücresi olsun (örnek: Dönem Sonu). İkinci <tr> satırında iki ayrı <td> olsun (örnek: Vize ve Final).

Örnek çözümü göster

<body>
  <table>
    <tr>
      <td colspan="2">Dönem Sonu</td>
    </tr>
    <tr>
      <td>Vize</td>
      <td>Final</td>
    </tr>
  </table>
</body>

Kendini test et

<td colspan="2"> ne anlama gelir?
- Hücrenin yüksekliği 2 piksel olur
- Hücrenin içinde iki satır olur
- Hücre iki sütunu birleştirir
- Hücre iki kez yazılır
Cevabı göster

Hücre iki sütunu birleştirir — Doğru. colspan="2" hücrenin iki sütunu birleştirdiğini belirtir.

Birleştirilmiş hücreyi kapat

<table>
  <tr>
    <td colspan="2">Dönem Sonu____
  </tr>
  <tr>
    <td>Vize</td>
    <td>Final</td>
  </tr>
</table>

Cevabı göster

<table>
  <tr>
    <td colspan="2">Dönem Sonu</td>
  </tr>
  <tr>
    <td>Vize</td>
    <td>Final</td>
  </tr>
</table>

Özniteliği anlamıyla eşleştir

colspan="2"

İki sütunu birleştirir
rowspan="2"

İki satırı birleştirir
scope="col"

Sütun başlığını işaretler
scope="row"

Satır başlığını işaretler

Sıradaki ders: Özet - Ders programı tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler