Menu
CoddyTech
Öğrenmeye başla

Satır ve Sütun Birleştirme

Coddy'nin HTML Journey'sinin Temeller bölümünün bir parçası. Ders 50 / 60.

HTML'de, rowspan ve colspan özniteliklerini kullanarak tablo hücrelerinin birden çok satıra veya sütuna yayılmasını sağlayabilirsin. Bu öznitelikler, hücreleri birleştirerek daha karmaşık tablo düzenleri oluşturmanı sağlar.

colspan özniteliği, bir hücrenin kaç sütunu kaplaması gerektiğini belirtmek için kullanılır. Genişletmek istediğiniz hücrenin <td> veya <th> etiketine eklenir.

İşte colspan özelliğinin nasıl kullanılacağına dair bir örnek:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

Bu örnekte, "Name" metnini içeren başlık hücresi iki sütunu kapsar. Bu, birden fazla sütunu kapsayan bir başlık oluşturmak için kullanışlıdır. Görünümü şöyledir:

rowspan özniteliği, bir hücrenin kaç satırı kapsaması gerektiğini belirtmek için kullanılır. Ayrıca, genişletmek istediğiniz hücrenin <td> veya <th> etiketine eklenir.

rowspan özelliğinin nasıl kullanılacağına dair bir örnek:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

Burada, adı yinelemeden Alex'in hem sabah hem de akşam vardiyalarında çalıştığını göstermek için rowspan kullanılır. 

Karmaşık düzenler oluşturmak için aynı tabloda hem colspan hem de rowspan kullanabilirsin. Birleştirilen hücrelere yer açmak için her satırdaki hücre sayısını buna göre ayarlamayı unutma.

challenge icon

Görev

Kolay

Birden fazla satıra ve sütuna yayılan hücreler içeren bir HTML belgesi oluştur. Tablo aşağıdaki yapıya sahip olmalıdır:

  1. Üç sütuna yayılan ve Student Report metnini içeren bir başlık hücresine (<th>) sahip bir tablo satırı (<tr>).
  2. Name yazan bir başlık hücresine (<th>), Subject yazan bir başlık hücresine (<th>) ve Grade yazan bir başlık hücresine (<th>) sahip başka bir tablo satırı (<tr>).
  3. John Doe yazan bir veri hücresine (<td>), Math yazan bir veri hücresine (<td>) ve A yazan bir veri hücresine (<td>) sahip başka bir tablo satırı (<tr>).
  4. İki satıra yayılan ve Jane Smith metnini içeren bir veri hücresine (<td>), Science yazan bir veri hücresine (<td>) ve B yazan bir veri hücresine (<td>) sahip başka bir tablo satırı (<tr>).
  5. History yazan bir veri hücresine (<td>) ve A yazan bir veri hücresine (<td>) sahip son bir tablo satırı (<tr>).

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- Kodu buraya yazın -->
        </table>
    </body>
</html>
quiz iconKendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Temeller bölümündeki tüm dersler

1HTML Temelleri

HTML Nedir?HTML'in Temel YapısıEtiketler ve Elementlerİç İçe Geçirme ve Kapatma EtiketleriHTML'de Yorumlar

4Tarif Kartı

Projeye Genel BakışTarif Başlığı ve AçıklamasıProje dersiMalzemelerProje dersiAdımlarProje dersi

7Kişisel Profil Sayfası

Projeye Genel BakışHeader BölümüProje dersiProfil ResmiProje dersiHakkımda BölümüProje dersiSosyal BağlantılarProje dersi

10Tablolar

Tablo TemelleriBaşlık EklemeSatır ve Sütun BirleştirmeÖzet - Tablolar

2Metin ve Biçimlendirme

BaşlıklarParagraflarSatır SonlarıKalın ve İtalik MetinYeniden Kalın ve İtalikÖzet - Biçimlendirme

5İçerik Ekleme

HTML ÖznitelikleriBağlantılarYeni Sayfa BağlantılarıGörsellerGörsel Öznitelikleri

8Formlar ve Inputlar Bölüm 1

Form TemelleriMetin InputlarıInput ÖznitelikleriŞifre AlanıInputlar için EtiketlerÖzet - Temel Form

11Etkinlik Kayıt Sayfası

Projeye Genel BakışHeader BölümüProje dersiEtkinlik Detayları BölümüProje dersiKayıt FormuProje dersiFooter BölümüProje dersi

3Listelerle Çalışma

Sırasız ListeSıralı Listeİç İçe ListelerÖzet - Listeler

6Sayfa Düzeni

BölümlerSatır İçi Span'lerSemantik EtiketlerSection ve Article EtiketleriÖzet - Düzen

9Formlar ve Girdiler Bölüm 2

Radyo DüğmeleriOnay KutularıAçılır MenülerButonlarFormlardaki ButonlarÖzet - Formlar #1Özet - Formlar #2

12Final Meydan Okumaları

Basit Profil KartıEtkinlik Davetiye KartıBasit Makale SayfasıFavori Kitaplar Listesi

Kendi başına pratik yap: Web playground