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 çok 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.
rowspan kullanımı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, rowspan adını tekrarlamadan Alex'in 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ı table içinde hem colspan hem de rowspan kullanabilirsin. Yayılan hücreleri barındırmak için her satırdaki hücre sayısını buna göre ayarlamayı unutma.
Görev
KolayBirden çok satıra ve sütuna yayılan hücreler içeren bir HTML belgesi oluştur. 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 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 ListesiKendi başına pratik yap: Web playground