HTML tablo tasarımı nasıl yapılır?

rauzy dedi:

html css karışık

Genişletmek için tıkla...

TheAny dedi:

CSS kullanmadan bu şekli vermeyi nasıl bekliyorsun? HTML, CSS olmadan düz metinden ibaret. CSS'in flex, grid gibi display özelliklerinden (layout) yararlanacaksın ki şu şemayı veresin.

Genişletmek için tıkla...

emreqelmez dedi:

Kod:Panoya kopyala

    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>

<table>
    <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
        <th>Başlık 3</th>
    </tr>
    <tr>
        <td>Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
        <td>Satır 1, Hücre 3</td>
    </tr>
    <tr>
        <td>Satır 2, Hücre 1</td>
        <td>Satır 2, Hücre 2</td>
        <td>Satır 2, Hücre 3</td>
    </tr>
</table>

Bu örnekte, border-collapse özelliği ile hücreler arasındaki boşlukları ortadan kaldırarak daha temiz bir görünüm elde edebilirsiniz. padding ile hücre içeriğinin kenar boşluklarını ayarlayabilir, text-align ile içeriğin hücre içindeki konumunu belirleyebilirsiniz. border-bottom ile hücre altlarına çizgi ekleyebilir ve background-color ile renklendirme yapabilirsiniz. Ayrıca, fare imleci satırların üzerine geldiğinde rengin değişmesini tr:hover ile sağlayabilirsiniz. İhtiyaçlarınıza göre bu CSS stilini düzenleyebilirsiniz.

Ayrıca ön hazırlıklarını yaptığım ve yakın zamanda yayınlayacağım ücretsiz web tasarım eğitimimi web sitemden takip edebilirsin.
Webmaxi Digital Agency

Genişletmek için tıkla...