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.