Blogger'da HTML Tablo Oluşturma Kodları

Blogger'da duyarlı bir tablo, tablonun farklı ekran boyutlarına uyum sağlamasını sağlar. Bu önemlidir çünkü blog ziyaretçilerinin çoğu mobil cihazlardan gelir. Duyarlı tasarım olmadan, tablolar ekrandan taşabilir veya bozuk görünebilir. Şık ve duyarlı bir tablo hem SEO'yu hem de kullanıcı deneyimini iyileştirir.

Blogger'da HTML Modunu Etkinleştirin

Blogger'da özel bir tablo oluşturmak için HTML düzenleme özelliğinin açık olması gerekir. Bu, gönderinin yapısına doğrudan erişim sağlar.

Blogger'da şık bir tablo oluşturmak için şu adımları izleyin:

1. Blogger panosunu açın.
2. Gönderileri seçin ve Yeni Gönderi'ye tıklayın.
3. HTML görünümüne geçmek için kalem simgesine tıklayın.
4. Bu görünüme tablo HTML kodunu ekleyin.

Duyarlı Tablo HTML'sini Ekleyin

Blogger sitenize şık bir tablo eklemek için aşağıdaki HTML kodunu kullanın. Bu tablo bir başlık ve birkaç satırdan oluşur.

<div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>Developer</td>
                    <td><span class="status status-active">Active</span></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>Developer</td>
                    <td><span class="status status-active">Active</span></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane Smith</td>
                    <td>jane.smith@example.com</td>
                    <td>Designer</td>
                    <td><span class="status status-pending">Pending</span></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Mike Johnson</td>
                    <td>mike.j@example.com</td>
                    <td>Manager</td>
                    <td><span class="status status-active">Active</span></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Emily Brown</td>
                    <td>emily.brown@example.com</td>
                    <td>Analyst</td>
                    <td><span class="status status-inactive">Inactive</span></td>
                </tr>
            </tbody>
        </table>
    </div>

Şık ve Duyarlı Bir Tablo için Özel CSS Ekleyin

Şimdi tabloyu biçimlendirme zamanı. Tablo stilinin birden fazla gönderi/sayfada kullanılabilmesini istiyorsak, CSS'yi Blogger şablonumuza eklememiz gerekiyor. Aşağıdaki CSS, net kenarlıklar, değişen satır renkleri ve sorunsuz yanıt süresiyle modern ve mobil uyumlu bir tablo oluşturur.

Blogger'a şık bir tablo için css eklemek için aşağıda ki adımları izleyin:

1. Öncelikle Blogger kontrol panelinde “Tema” > “HTML’yi Düzenle”ye gidin.
2. Şablonda ki </head> etiketi arayın.
3. Daha sonra </head> işaretinden hemen önce, Blogger'da Şık Duyarlı Bir Tablo Oluşturmak için aşağıdaki kodun tamamını kopyalayıp yapıştırın.

        *{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{background:#f5f7fa;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}
.table-container{background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);overflow:hidden;width:100%;max-width:900px;margin:0 auto}
table{width:100%;border-collapse:collapse}
th,td{padding:16px 20px;text-align:left;font-size:14px}
th{background:#6b48ff;color:white;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
tr{transition:background 0.2s ease}
tr:nth-child(even){background:#f8f9fb}
tr:hover{background:#f0f2f5}
td{color:#333;border-bottom:1px solid #e9ecef}
.status{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;display:inline-block}
.status-active{background:#e6f3e6;color:#2e7d32}
.status-pending{background:#fff3e0;color:#f57c00}
.status-inactive{background:#fce4ec;color:#c62828}
/* Responsive Design */
        @media (max-width:768px){.table-container{overflow-x:auto}th,td{padding:12px 15px;font-size:13px}th{min-width:100px}}
@media (max-width:480px){th,td{padding:10px;font-size:12px}.status{padding:4px 8px;font-size:11px}}

Temayı kaydedin. Bu kod, tablonun hem masaüstü hem de mobil ekranlarda okunabilir kalmasına yardımcı olur.

Ön İzleme

Bu yazı Serkan Gündoğdu tarafından yazılmıştır. ✔ Bu içeriği Beğendiyseniz Lütfen Paylaşın ⤵