Satır ve Sütun Birleştirme
Coddy'nin HTML Journey'sinin Fundamentals bölümünün bir parçası — ders 50 / 60.
HTML'de, rowspan ve colspan özniteliklerini kullanarak tablo hücrelerinin birden fazla satır 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 kaç sütun yayılması 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ütuna yayılmaktadır. Bu, birden fazla sütunu kapsayan bir başlık oluşturmak için kullanışlıdır. Görünümü şu şekildedir:
rowspan özniteliği, bir hücrenin kaç satır boyunca yayılacağı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 ismini tekrarlamadan 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. Birleştirilen hücrelere yer açmak için her satırdaki hücre sayısını buna göre ayarlamayı unutmayın.
Görev
KolayBirden fazla satıra ve sütuna yayılan hücreler içeren bir HTML belgesi oluşturun. Tablo aşağıdaki yapıya sahip olmalıdır:
- Tabloyu tanımlamak için, görünürlük için "1" olarak ayarlanmış bir
borderözniteliğine sahip bir<table>etiketi. - İki sütuna yayılan ve "Student Information" metnini içeren bir başlık hücresine (
<th>) sahip bir tablo satırı (<tr>). - "Name" yazan bir başlık hücresine (
<th>) ve iki satıra yayılan ve "John Doe" metnini içeren bir veri hücresine (<td>) sahip başka bir tablo satırı (<tr>). - "Age" yazan bir başlık hücresine (
<th>) sahip başka bir tablo satırı (<tr>). - "Jane Smith" yazan bir veri hücresine (
<td>) ve "25" yazan bir veri hücresine (<td>) sahip son bir tablo satırı (<tr>).
Kopya kağıdı
Bir hücrenin birden fazla sütuna yayılmasını sağlamak için colspan kullanın:
<th colspan="2">Name</th>Bir hücrenin birden fazla satıra yayılmasını sağlamak için rowspan kullanın:
<td rowspan="2">John</td>Her iki yayılma özniteliğini de içeren örnek tablo:
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Exams</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Kim</td>
<td>A</td>
<td>B+</td>
</tr>
</table>Kendin dene
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- Kodu buraya yazın -->
</table>
</body>
</html>
Kendini test etBu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.
Fundamentals 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 Yorumlar7Kişisel Profil Sayfası
Projeye Genel BakışHeader Bölümü
Profil ResmiHakkımda BölümüSosyal Bağlantılar2Metin ve Biçimlendirme
BaşlıklarParagraflarSatır SonlarıKalın ve İtalik MetinYeniden Kalın ve İtalikÖzet - Biçimlendirme8Formlar ve Inputlar Bölüm 1
Form TemelleriMetin InputlarıInput ÖznitelikleriŞifre AlanıInputlar için EtiketlerÖzet - Temel Form11Etkinlik Kayıt Sayfası
Projeye Genel BakışHeader BölümüEtkinlik Detayları BölümüKayıt FormuFooter Bölümü9Formlar ve Girdiler Bölüm 2
Radyo DüğmeleriOnay KutularıAçılır MenülerButonlarFormlardaki ButonlarÖzet - Formlar #1Özet - Formlar #212Final Meydan Okumaları
Basit Profil KartıEtkinlik Davetiye KartıBasit Makale SayfasıFavori Kitaplar Listesi