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