Wordpress de Tablo Olarak Oluşturmak İstiyorum (Sayfa Olarak)

20-04-2026, 17:27:57

#1

MauS

Script ve Lisans

Merhabalar wordpress sitem var böyle bir tablo oluşturmam gerekiyor yardımcı olabilecek var mı ? Şu üst kısım çok önemli. Solda bulunan öğrenci listesi çok önemli değil olursa güzel olur.
20-04-2026, 17:28:43

#2

Maximus178

yapay zekaya html olarak oluşturtup sayfaya ekleyin direkt hocam.
20-04-2026, 17:29:23

#3

MauS

Script ve Lisans

Maximus178 adlı üyeden alıntı: mesajı görüntüle

yapay zekaya html olarak oluşturtup sayfaya ekleyin direkt hocam.

Hangi yapay zekayı önerirsiniz hepsi yapar mı

20-04-2026, 17:30:16

Wordpress

Selamlar,
ai ile oluşturdum. İşinizi görecektir.

    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            padding: 20px;
            background-color: #f4f4f4;
        }

        table {
            border-collapse: collapse;
            background-color: white;
            border: 3px solid black;
            width: 900px;
        }

        th, td {
            border: 1.5px solid black;
            text-align: center;
            padding: 8px;
            height: 25px;
            font-weight: bold;
        }

        /* Başlık Alanı */
        .header-main {
            font-size: 1.5rem;
            width: 150px;
        }

        .week-title {
            color: red;
            font-size: 1.2rem;
            letter-spacing: 2px;
        }

        .date-cell {
            font-size: 0.9rem;
            width: 80px;
        }

        /* Sure ve Ayet Satırı */
        .sure-row td {
            height: 35px;
        }

        /* Sol Dikey Bölüm */
        .vertical-text-container {
            width: 30px;
            padding: 0;
            position: relative;
        }

        .vertical-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: #1a5cad; /* Görseldeki mavi tonu */
            font-size: 1.1rem;
            letter-spacing: 3px;
            white-space: nowrap;
        }

        /* İsim Sütunu */
        .name-column {
            width: 170px;
        }

        /* Boş Hücre Genişlikleri */
        .data-cell {
            width: 70px;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th colspan="2" class="header-main">2026<br>MAYIS</th>
                <th colspan="4" class="week-title">1. HAFTA</th>
                <th colspan="4" class="week-title">2. HAFTA</th>
            </tr>
            <tr>
                <th colspan="2">Sure ve Ayet</th>
                <th class="date-cell">4 PZT</th>
                <th class="date-cell">5 SALI</th>
                <th class="date-cell">6 ÇRŞ</th>
                <th class="date-cell">7 PRŞ</th>
                <th class="date-cell">11 PZT</th>
                <th class="date-cell">12 SALI</th>
                <th class="date-cell">13 ÇRŞ</th>
                <th class="date-cell">14 PRŞ</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="15" class="vertical-text-container">
                    <div class="vertical-text">ÖĞRENCİ LİSTESİ</div>
                </td>
                <td class="name-column"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
                <td class="data-cell"></td>
            </tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="name-column"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
    </table>

20-04-2026, 17:30:57

Tolgao

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Öğrenci Takip Çizelgesi</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            padding: 20px;
            background-color: #f0f0f0;
        }

        .table-container {
            background-color: white;
            padding: 10px;
            border: 2px solid black;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        th, td {
            border: 2px solid black;
            text-align: center;
            height: 35px;
            font-size: 14px;
        }

        /* Başlık Hücreleri */
        .header-main {
            font-weight: bold;
            font-size: 20px;
        }

        .week-header {
            color: red;
            font-weight: bold;
            font-size: 18px;
        }

        .day-header {
            font-weight: bold;
            font-size: 15px;
            background-color: #fff;
        }

        /* Dikey Yazı Alanı */
        .vertical-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-weight: bold;
            color: #1a5a96; /* Görseldeki mavi tonu */
            text-transform: uppercase;
            letter-spacing: 2px;
            width: 30px;
            white-space: nowrap;
        }

        /* Sütun Genişlikleri */
        .col-index { width: 35px; }
        .col-main { width: 180px; }
        .col-day { width: 85px; }

        .sub-header {
            font-weight: bold;
            font-size: 14px;
        }
    </style>
</head>
<body>

<div class="table-container">
    <table>
        <tr>
            <th rowspan="2" colspan="2" class="header-main">2026<br>MAYIS</th>
            <th colspan="4" class="week-header">1. HAFTA</th>
            <th colspan="4" class="week-header">2. HAFTA</th>
        </tr>
        <tr>
            <th class="day-header col-day">4 PZT</th>
            <th class="day-header col-day">5 SALI</th>
            <th class="day-header col-day">6 ÇRŞ</th>
            <th class="day-header col-day">7 PRŞ</th>
            <th class="day-header col-day">11 PZT</th>
            <th class="day-header col-day">12 SALI</th>
            <th class="day-header col-day">13 ÇRŞ</th>
            <th class="day-header col-day">14 PRŞ</th>
        </tr>
        
        <tr>
            <td colspan="2" class="sub-header">Sure ve Ayet</td>
            <td></td><td></td><td></td><td></td>
            <td></td><td></td><td></td><td></td>
        </tr>

        <tr>
            <td rowspan="15" class="vertical-text">ÖĞRENCİ LİSTESİ</td>
            <td class="col-main"></td>
            <td></td><td></td><td></td><td></td>
            <td></td><td></td><td></td><td></td>
        </tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="col-main"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
</div>

</body>
</html>

20-04-2026, 17:31:38

mustaizm

<div class="ogrenci-takip-wrap">
  <table class="ogrenci-takip">
    <thead>
      <tr>
        <th class="ay-hucre" rowspan="2">2026<br>MAYIS</th>
        <th class="hafta-baslik" colspan="4">1. HAFTA</th>
        <th class="hafta-baslik" colspan="4">2. HAFTA</th>
      </tr>
      <tr>
        <th>4 PZT</th>
        <th>5 SALI</th>
        <th>6 ÇRŞ</th>
        <th>7 PRŞ</th>
        <th>11 PZT</th>
        <th>12 SALI</th>
        <th>13 ÇRŞ</th>
        <th>14 PRŞ</th>
      </tr>
      <tr>
        <th class="sure-ayet">Sure ve Ayet</th>
        <th></th><th></th><th></th><th></th>
        <th></th><th></th><th></th><th></th>
      </tr>
    </thead>
    <tbody>
      <!-- 17 boş öğrenci satırı -->
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
  <p class="ogrenci-takip-ipucu">📱 Mobilde yatay olarak kaydırabilirsiniz</p>
</div>

<style>
.ogrenci-takip-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  font-family: Arial, Helvetica, sans-serif;
}
.ogrenci-takip {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}
.ogrenci-takip th,
.ogrenci-takip td {
  border: 1.5px solid #000;
  padding: 10px 6px;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
  height: 36px;
}
.ogrenci-takip thead th {
  background: #fff;
  color: #000;
  font-weight: 700;
}
.ogrenci-takip .ay-hucre {
  font-size: 16px;
  line-height: 1.3;
  width: 110px;
}
.ogrenci-takip .hafta-baslik {
  color: #e53935;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.ogrenci-takip .sure-ayet {
  font-weight: 600;
  font-size: 13px;
}
.ogrenci-takip .ogr-hucre {
  min-height: 36px;
}
.ogrenci-takip tbody tr:hover {
  background: #f8f9fa;
}
.ogrenci-takip-ipucu {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}

/* Mobil */
@media (max-width: 768px) {
  .ogrenci-takip th,
  .ogrenci-takip td {
    font-size: 12px;
    padding: 8px 4px;
  }
  .ogrenci-takip .ay-hucre,
  .ogrenci-takip .hafta-baslik {
    font-size: 13px;
  }
}
@media (min-width: 900px) {
  .ogrenci-takip-ipucu { display: none; }
}
</style>

20-04-2026, 17:32:08

Maximus178

<style>
    .kuran-tablosu-wrapper {
        width: 100%;
        overflow-x: auto; /* Mobilde yatay kaydırma sağlar */
        margin: 20px 0;
        font-family: Arial, sans-serif;
    }
    
    .kuran-tablosu {
        width: 100%;
        min-width: 800px; /* Tablonun mobilde çok sıkışmasını önler */
        border-collapse: collapse;
        border: 4px solid black;
        text-align: center;
        background-color: #fff;
    }

    .kuran-tablosu th, 
    .kuran-tablosu td {
        border: 2px solid black;
        padding: 10px 5px;
        color: #000;
        font-weight: bold;
    }

    /* Özel Kalın Kenarlıklar */
    .kuran-tablosu .kalin-sag {
        border-right: 4px solid black;
    }
    .kuran-tablosu .kalin-alt {
        border-bottom: 4px solid black;
    }

    /* Renkler ve Yazı Tipleri */
    .kuran-tablosu .kirmizi-metin {
        color: red;
        font-size: 1.1em;
        letter-spacing: 1px;
    }
    .kuran-tablosu .mavi-dikey-metin {
        color: #1e4d8c; /* Görseldeki mavi tonu */
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        letter-spacing: 2px;
        padding: 20px 5px;
        width: 30px;
    }

    .kuran-tablosu .ay-yil {
        font-size: 1.3em;
        letter-spacing: 2px;
    }

    /* Boş Satır Yükseklikleri */
    .kuran-tablosu td.bos-hucre {
        height: 25px;
    }
</style>

<div class="kuran-tablosu-wrapper">
    <table class="kuran-tablosu">
        <tr>
            <th colspan="2" rowspan="2" class="kalin-sag kalin-alt ay-yil">2026<br>MAYIS</th>
            <th colspan="4" class="kirmizi-metin kalin-sag">1. HAFTA</th>
            <th colspan="4" class="kirmizi-metin">2. HAFTA</th>
        </tr>
        <tr>
            <th class="kalin-alt">4 PZT</th>
            <th class="kalin-alt">5 SALI</th>
            <th class="kalin-alt">6 ÇRŞ</th>
            <th class="kalin-alt kalin-sag">7 PRŞ</th>
            <th class="kalin-alt">11 PZT</th>
            <th class="kalin-alt">12 SALI</th>
            <th class="kalin-alt">13 ÇRŞ</th>
            <th class="kalin-alt">14 PRŞ</th>
        </tr>
        
        <tr>
            <th colspan="2" class="kalin-sag">Sure ve Ayet</th>
            <td></td>
            <td></td>
            <td></td>
            <td class="kalin-sag"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td rowspan="14" class="mavi-dikey-metin kalin-sag">ÖĞRENCİ LİSTESİ</td>
            <td class="kalin-sag bos-hucre"></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="kalin-sag"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
        <tr><td class="kalin-sag bos-hucre"></td><td></td><td></td><td></td><td class="kalin-sag"></td><td></td><td></td><td></td><td></td></tr>
    </table>
</div>

20-04-2026, 17:32:49

#8

Maximus178

Konuya f5 attım herkes tasarımı yapmış
20-04-2026, 17:52:28

#9

MauS

Script ve Lisans

Maximus178 adlı üyeden alıntı: mesajı görüntüle

Konuya f5 attım herkes tasarımı yapmış

Herkese çok teşekkür ediyorum