HTML TABLO UYGULAMASI 1 - DERS PROGRAMI

Yukarıda 6 X 9 HTML tablo içerisinde sayfaya ortalı ders progamı hazırlanmış. Özellikleri ;

GENEL

Sayfa Arka Planı : Siyah
Ortalanmış H1 Beyaz Başlık

TABLO

Tablo 6 x 9 ve sayfaya ortalanmış
Tablo Genişliği : 70%
Tablo Kenarları : turuncu

HÜCRELER

Ders ve Gün hücreleri : turuncu
Dİğer hücreler : beyaz
Hücreler arası boşluk : 7px
Hücre İçi Boşluk : 15px

SATIR SÜTUN BİRLEŞTİRME

2. satırda yanyana hücreler birleşiyor.. (colspan)
4. satır 6. sütunda hücreler alt alta ve yanyana birleşiyor.. (colspan+rowspan)
4. satır 9. sütunda hücreler alt alta birleşiyor.. (rowspan)
Hücre içi yazılar yatayda ortalanmış

İLGİLİ DERSLER

Aşağıdaki linklerden konu ile ilgili bilgilere ulaşabilirsiniz..

HTML KODLARI

<!doctype html>
<html>
 
<head>
  <title>HAFTALIK DERS PROGRAMI</title>
  <meta charset="utf-8"> 
</head>

<body bgcolor="black">

  <h1 align="center" style="color:white"> HAFTALIK DERS PROGRAMI</h1>

  <table border="5" bordercolor="#fda12a" width="70%" align="center" cellspacing="7" cellpadding="15" >

<!-- 1. Satır -->
    <tr bgcolor="#fda12a"  style="color:white">
      <th bgcolor="black"></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>

<!-- 2. Satır -->
    <tr align="center" bgcolor="white">
      <th bgcolor="#fda12a"style="color:white">PAZARTESİ</th>
      <td colspan="2">SAUZ</td>
      <td colspan="3">WEB TAS</td>
      <td colspan="3">GRA.AN</td>
    </tr>

<!-- 3. Satır -->
    <tr  bgcolor="white">
     <th bgcolor="#fda12a"style="color:white">SALI</th> 
     <td>TDED</td>
     <td>TDED</td>
     <td>GRA.AN</td>
     <td>GRA.AN</td>
     <td>GRA.AN </td>
     <td>TARİH</td>
     <td>BEĞT11</td>
     <td>BEĞT11</td>
   </tr>

<!-- 4. Satır -->
   <tr  bgcolor="white">
     <th bgcolor="#fda12a"style="color:white">ÇARŞAMBA</th>
     <td>YDİL11</td>
     <td>YDİL11</td>
     <td>FEL11</td>
     <td>FEL11</td>
     <td colspan="2" rowspan="2">WEB TAS</td>
     <td>WEB TAS</td>
     <td rowspan="3">SOSET</td>
   </tr>

<!-- 5. Satır -->
   <tr bgcolor="white">
     <th bgcolor="#fda12a"style="color:white">PERŞEMBE</th>
     <td>VTROG</td>
     <td>VTROG</td>
     <td> WEBTAS</td>                  
     <td>WEBTAS</td>
     <td> SCOĞRAF</td>
   </tr>

<!-- 6. Satır -->
   <tr  bgcolor="white">
     <th bgcolor="#fda12a"style="color:white">CUMA</th>
     <td>DİN</td>
     <td>DİN</td>
     <td> TED</td>
     <td>TED</td>
     <td> TDED</td>
     <td> MATEMATİK</td>
     <td>MATEMATİK</td>
   </tr>

 </table>
</body>

</html>

NOT : Uygulamanın mobil makale sayfasında daha düzgün görünebimesi için , sayfaya bir iki CSS özelliği ekledim. Tarayıcıda açıp, sayfa kaynağına baktığınızda görebilirsiniz. Onları eklemenize gerek yok, tasarımınız etkilenmeyecektir.

Görüşmek Üzere...

Tarayıcıda Aç

Son Güncelleme : 10 Ekim 2025 14:17, Cuma

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK