Merhaba herkese, geçenlerde HTML Tablo Örneği (Haftalık Ders Programı) hakkında bir soru gelmişti. Bende o soruya verdiğim cevabı bir yazı olarak paylaşmak istedim. Bu yazımda HTML kullanarak bir haftalık ders programı örneği yapacağız.
HTML Tablo Örneği (Haftalık Ders Programı)
Burada vereceğim tablo örneği haftalık ders programı örneğidir. Bu HTML tabloda cellpadding, colspan gibi özellikler kullanılmıştır. Geliştirdiğiniz projelerde böyle bir tablo yapısına ihtiyacınız olursa aşağıdaki tablo örneklerini kullanabilirsiniz. Başlık haftalık ders programı olsa da siz farklı amaçlarla da kullanabilirsiniz.
Örnek vermek gerekirse, haftalık müşteri ziyaret listesi gibi bir liste bu yapıya uygun olacaktır diye düşünüyorum. Bu ve buna benzer işlemlerde bu tablo yapısı ile birlikte istediğiniz raporları üretebilirsiniz.
Tablo örneği aşağıdaki gibidir.
<!doctype html>
<html>
<head>
<title>Tablolar</title>
<meta charset="utf-8">
</head>
<body>
<table border="1" width="300px" align="center" cellpadding="20" >
<tr>
<th colspan="10">DERS PROGRAMI</th>
</tr>
<tr>
<th rowspan="7">GÜNLER</th>
</tr>
<tr>
<th></th>
<th>1.Ders</th>
<th>2.Ders</th>
<th>3.Ders</th>
<th>4.Ders</th>
<th>5.Ders</th>
<th>6.Ders</th>
<th>7.Ders</th>
<th>8.Ders</th>
</tr>
<tr>
<th>Pazartesi</th>
<td colspan="2">DİL ANLATIM</td>
<td colspan="2">FELSEFE</td>
<td>TÜRK EDEBİYATI</td>
<td colspan="2">BEDEN</td>
<td>COĞRAFYA</td>
</tr>
<tr>
<th>Salı</th>
<td colspan="4" align="center">BİLGİSAYAR</td>
<td colspan="2">YABANCI DİL</td>
<td>MATEMATİK</td>
<td>DİN KÜLTÜRÜ</td>
</tr>
<tr>
<th>Çarşamba</th>
<td colspan="2">TÜRK EDEBİYATI</td>
<td colspan="2">VERİ TABANI</td>
<td>TARİH</td>
<td colspan="3" align="center">AĞ TEMELLERİ</td>
</tr>
<tr>
<th>Perşembe</th>
<td>COĞRAFYA</td>
<td>DİN KÜLTÜRÜ</td>
<td colspan="6" align="center">GRAFİK TASARIM</td>
</tr>
<tr>
<th>Cuma</th>
<td colspan="6" align="center">WEB TASARIMI</td>
<td colspan="2">TÜRK EDEBİYAT</td>
</tr>
</table>
</body>
</html>
Bu tablo örneği CSS ile göze daha hoş gelecek hale getirebilirsiniz. Hücre birleştirmeleri olmayan halini isterseniz da aşağıdaki tabloya bakabilirsiniz. Yukarıdakinden biraz farklı çünkü normal hale getirirken bazı yerleri yanlışlıkla sildim ve rastgele yazdım. :D
<!doctype html>
<html>
<head>
<title>Tablolar</title>
<meta charset="utf-8">
</head>
<body>
<table border="1" width="300px" align="center" cellpadding="20" >
<tr>
<th colspan="10">DERS PROGRAMI</th>
</tr>
<tr>
<th rowspan="7">GÜNLER</th>
</tr>
<tr>
<th></th>
<th>1.Ders</th>
<th>2.Ders</th>
<th>3.Ders</th>
<th>4.Ders</th>
<th>5.Ders</th>
<th>6.Ders</th>
<th>7.Ders</th>
<th>8.Ders</th>
</tr>
<tr>
<th>Pazartesi</th>
<td>DİL ANLATIM</td>
<td>DİL ANLATIM</td>
<td>FELSEFE</td>
<td>FELSEFE</td>
<td>TÜRK EDEBİYATI</td>
<td>TÜRK EDEBİYATI</td>
<td>BEDEN</td>
<td>COĞRAFYA</td>
</tr>
<tr>
<th>Salı</th>
<td>BİLGİSAYAR</td>
<td>BİLGİSAYAR</td>
<td>BİLGİSAYAR</td>
<td>BİLGİSAYAR</td>
<td>YABANCI DİL</td>
<td>YABANCI DİL</td>
<td>MATEMATİK</td>
<td>DİN KÜLTÜRÜ</td>
</tr>
<tr>
<th>Çarşamba</th>
<td>TÜRK EDEBİYATI</td>
<td>TÜRK EDEBİYATI</td>
<td>VERİ TABANI</td>
<td>VERİ TABANI</td>
<td>TARİH</td>
<td>AĞ TEMELLERİ</td>
<td>AĞ TEMELLERİ</td>
<td>AĞ TEMELLERİ</td>
</tr>
<tr>
<th>Perşembe</th>
<td>COĞRAFYA</td>
<td>COĞRAFYA</td>
<td>DİN KÜLTÜRÜ</td>
<td>GRAFİK TASARIM</td>
<td>GRAFİK TASARIM</td>
<td>GRAFİK TASARIM</td>
<td>GRAFİK TASARIM</td>
<td>GRAFİK TASARIM</td>
</tr>
<tr>
<th>Cuma</th>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
<td>VERİ TABANI</td>
<td>VERİ TABANI</td>
</tr>
</table>
</body>
</html>
Yukarıdaki tablo örneklerinden istediğinizi kullanabilirsiniz arkadaşlar. Diğer derslerimizde görüşmek üzere.
HTML Tablo Örneği (Haftalık Ders Programı) yazımda bu kadardı arkadaşlar. Böyle bir yazı size saçma geliyor olabilir ama bilmelisiniz ki paylaştığım yazılar aslında daha sonra bana lazım olursa diye paylaştığım yazılardır.
C Sharp Eğitim Seti eğitimi sayfasına gitmek için tıklayınız. Derslerime özel olarak hazırladığım Github Projeme buradan ulaşabilirsiniz…
HTML konulu yazılarım için bu bağlantıya tıklayabilirsiniz. Aslında bit HTML eğitim seti de hazırlamayı düşündüm ama sonradan vazgeçtim. Çünkü zaten internette bir çok eğitim var ve HTML ‘de o kadar zorlu ve sorun yaşanan bir nokta değil. Bu sebeple vazgeçtim. CSS ile ilgili yazılarıma bakmak isterseniz de bu bağlantıya tıklayabilirsiniz.
HTML ve CSS konusunda ek yazılar isterseniz yazabilirim. Sadece yorum atmanız yada bana gmail adresimden ulaşmanız yeterlidir.
465. yazı bitti.
Beğendim!
Harika!
İlginç!
Beğenmedim
