Html

Her Satırda 3 Sütun Olan 6 Satırlık Web Sayfası Tasarımını 2025 Takvimi İçin Table Etiketiyle Oluşturma

Her web sayfasının bir tasarım tarafı vardır. Daha önce oluşturduğumuz 6 satır 3 sütundan oluşan tasarımı 2025 takvimi için kullanalım. Aylara ait günleri table etiketiyle oluşturacağız.  

Tasarım işlemine ait web sayfasının sonucuna aşağıdaki linkten ulaşabilirsiniz.

Her Satırda 3 Ay Olan 4 Satırlı Takvim Tasarımını BootStrap Kütüphanesiyle Yapma

Şimdi uygulamayı yapalım.

Adım 1: Tasarımda her ay için verdiğimiz minimum yükseklik değerini 350 px yapalım. Her ay için tanımladığımız padding değerini p-5 yerine p-3 yapalım. Web sayfasını çalıştırıp sonucu görelim. 

Adım 2: Ocak ayı yazılan yere gelelim. Burada öncelikle Ocak yazısını silelim. Table etiketini tanımlayalım.

<table>
    <caption></caption>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

Adım 3: Tabloya ait class tanımlamalarını yapalım. Başlık olarak Ocak yazalım.

<table class="table table-bordered caption-top">
    <caption><h2 class="text-white text-center">Ocak</h2></caption>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

Adım 4: Tablomuza ait alt başlıkları verelim.

<thead class="table-info">
    <tr>
        <th>Pzt</th>
        <th>Sal</th>
        <th>Çar</th>
        <th>Per</th>
        <th>Cum</th>
        <th>Cmt</th>
        <th>Paz</th>
    </tr>
</thead>

Adım 5: 2025 yılı ocak ayına ait günleri yazalım. Hafta sonlarına gelen günlerin arkaplan rengini bg-body-secondary yapalım.

<tbody>
    <tr>
        <td></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td class="bg-body-secondary">4</td>
        <td class="bg-body-secondary">5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td class="bg-body-secondary">11</td>
        <td class="bg-body-secondary">12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td class="bg-body-secondary">18</td>
        <td class="bg-body-secondary">19</td>
    </tr>
    <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td class="bg-body-secondary">25</td>
        <td class="bg-body-secondary">26</td>
    </tr>
    <tr>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td>31</td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Adım 6: Ocak ayına ait tatil sayısını tfoot kısmında yazalım.

<tfoot>
    <tr>
        <td colspan="7" class="small text-primary fw-bold">
            8 gün tatil vardır.
        </td>
    </tr>
</tfoot>

Adım 7: Şimdi şubat ayı için gerekli işlemleri yapalım. Tabloya ait class tanımlamalarını yapalım. Başlık olarak Şubat yazalım.

<table class="table table-bordered caption-top">
    <caption><h2 class="text-white text-center">Şubat</h2></caption>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

Adım 8: Tablomuza ait alt başlıkları verelim.

<thead class="table-info">
    <tr>
        <th>Pzt</th>
        <th>Sal</th>
        <th>Çar</th>
        <th>Per</th>
        <th>Cum</th>
        <th>Cmt</th>
        <th>Paz</th>
    </tr>
</thead>

Adım 9: 2025 yılı şubat ayına ait günleri yazalım. Hafta sonlarına gelen günlerin arkaplan rengini bg-body-secondary yapalım.

<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="bg-body-secondary">1</td>
        <td class="bg-body-secondary">2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td class="bg-body-secondary">8</td>
        <td class="bg-body-secondary">9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td class="bg-body-secondary">15</td>
        <td class="bg-body-secondary">16</td>
    </tr>
    <tr>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td class="bg-body-secondary">22</td>
        <td class="bg-body-secondary">23</td>
    </tr>
    <tr>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Adım 10: Şubat ayına ait tatil sayısını tfoot kısmında yazalım.

<tfoot>
    <tr>
        <td colspan="7" class="small text-primary fw-bold">
            8 gün tatil vardır.
        </td>
    </tr>
</tfoot>

Adım 11: Mart ayı için gerekli işlemleri yapalım. Tabloya ait class tanımlamalarını yapalım. Başlık olarak Mart yazalım.

<table class="table table-bordered caption-top">
    <caption><h2 class="text-white text-center">Mart</h2></caption>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

Adım 12: Tablomuza ait alt başlıkları verelim.

<thead class="table-info">
    <tr>
        <th>Pzt</th>
        <th>Sal</th>
        <th>Çar</th>
        <th>Per</th>
        <th>Cum</th>
        <th>Cmt</th>
        <th>Paz</th>
    </tr>
</thead>

Adım 13: 2025 yılı mart ayına ait günleri yazalım. Hafta sonlarına gelen günlerin arkaplan rengini bg-body-secondary yapalım.

<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="bg-body-secondary">1</td>
        <td class="bg-body-secondary">2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td class="bg-body-secondary">8</td>
        <td class="bg-body-secondary">9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td class="bg-body-secondary">15</td>
        <td class="bg-body-secondary">16</td>
    </tr>
    <tr>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td class="bg-body-secondary">22</td>
        <td class="bg-body-secondary">23</td>
    </tr>
    <tr>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td class="bg-body-secondary">29</td>
        <td class="bg-body-secondary">30</td>
    </tr>
    <tr>
        <td>31</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Adım 14: Mart ayına ait tatil sayısını tfoot kısmında yazalım.

<tfoot>
    <tr>
        <td colspan="7" class="small text-primary fw-bold">
            10 gün tatil vardır.
        </td>
    </tr>
</tfoot>

Adım 15. Diğer aylara ait günleri ve tatil sayılarını yazma işlemini size bırakıyorum. 


İlgili Makaleler
Web Tabanlı Uygulama Geliştirme Dersi Birinci Dönem Birinci Yazılı Çalışma Soruları
TrendYol 2024 - 2025 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Web Sayfalarına Youtube Videolarını Ekleme
Input Html Etiketinin Pattern Özelliği
Her Satırda 3 Sütun Olan 6 Satırlık Web Sayfası Tasarımını BootStrap Temayla Oluşturma
Form Bloğu İçinde Kullanılan Input Etiketi ve Özellikleri
Form Bloğu İçinde Kullanılan fieldset ve legend Etiketleri
Form Elemanlarını Kullanarak Web Sayfasında Kayıt Formu Tasarımı
Web Sayfası Tanımı
Form Bloğu İçinde Kullanılan Button Etiketi ve Özellikleri
Jquery Uygulamalarında Ajax İsteği Yapılınca Oluşabilecek Hataları Yakalama
Fenerbahçenin 2024-2025 UEFA Avrupa Ligindeki Grup Aşaması Maç Programını Liste ve Tablo Kullanarak Web Sayfasında Listeleme
Form Bloğu İçinde Form ve Veri Giriş Özellikleri
Her Satırda 3 Sütun Olan 6 Satırlık Web Sayfası Tasarımını 2025 Takvimi İçin Table Etiketiyle Oluşturma
Form Bloğu İçinde Kullanılan TextArea Etiketi ve Özellikleri
Form Bloğu İçinde Kullanılan Progress Etiketi ve Özellikleri
Failed to load resource: the server responded with a status of favicon.ico 404 (Not Found) Hatasını Düzeltme
Beşiktaşın 2024-2025 UEFA Avrupa Ligindeki Grup Aşaması Maç Programını Liste ve Tablo Kullanarak Web Sayfasında Listeleme
Web Sayfalarında Etiketlere Ait Pozisyon ve Konum Bilgilerini Core Mvc Projesinde Okul Bahçesi Uygulamasında Kullanma
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Puan Durumunu Div Etiketiyle Listeleyen Web Sayfası Uygulaması

Yorum Ekle
   
Kötü İyi