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 fazla satıra veya sütuna yayılmasını sağlayabilirsiniz. Bu öznitelikler, hücreleri birleştirerek daha karmaşık tablo düzenleri oluşturmanıza olanak tanır.

colspan özniteliği, bir hücrenin kapsaması gereken sütun sayısını belirtmek için kullanılır. Genişletmek istediğiniz hücrenin <td> veya <th> etiketine eklenir.

colspan kullanımı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, "Ad" metnini içeren başlık hücresi iki sütuna yayılır. Bu, birden fazla sütunu kapsayan bir başlık oluşturmak için kullanışlıdır. Şöyle görünür:

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

İşte rowspan kullanımına 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, rowspan Alex'in adı tekrarlanmadan hem sabah hem de akşam vardiyalarında çalıştığını göstermek için kullanılır.

Karmaşık düzenler oluşturmak için aynı tabloda hem colspan hem de rowspan kullanabilirsiniz. Yayılmış hücreleri barındırmak için her satırdaki hücre sayısını buna göre ayarlamayı unutmayın.

Görev

Kolay

Çok sayıda satır ve sütuna yayılan hücreler içeren bir table barındıran bir HTML belgesi oluşturun. table aşağıdaki yapıya sahip olmalıdır:

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

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- Kodu buraya yaz -->
        </table>
    </body>
</html>

Kendini 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 Etiketleri HTML'de Yorumlar

4Tarif Kartı

Projeye Genel Bakış Tarif Başlığı ve Açıklaması

Malzemeler

Adımlar

7Kişisel Profil Sayfası

Projeye Genel Bakış Header Bölümü

Profil Resmi

Hakkımda Bölümü

Sosyal Bağlantılar

10Tablolar

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

2Metin ve Biçimlendirme

Başlıklar Paragraflar Satır Sonları Kalın ve İtalik Metin Yeniden Kalın ve İtalik Özet - Biçimlendirme

5İçerik Ekleme

HTML Öznitelikleri Bağlantılar Yeni Sayfa Bağlantıları Görseller Görsel Öznitelikleri

8Formlar ve Inputlar Bölüm 1

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

11Etkinlik Kayıt Sayfası

Projeye Genel Bakış Header Bölümü

Etkinlik Detayları Bölümü

Kayıt Formu

Footer Bölümü

3Listelerle Çalışma

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

6Sayfa Düzeni

Bölümler Satır İçi Span'ler Semantik Etiketler Section ve Article Etiketleri Özet - Düzen

9Formlar ve Girdiler Bölüm 2

Radyo Düğmeleri Onay Kutuları Açılır Menüler Butonlar Formlardaki 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