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>