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

emreqelmez dedi:
Kod: 
    <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...
Konudan bağımsız bir kod paylaşım olmasının yanı sıra bir de kişisel reklam. Muhteşem. Konuyu okuma ve gönderilen fotoğrafı inceleme zahmetinde bulundun mu?
 

Benzer konular

F
HTML nasıl öğrenilir?
2
Mesaj
16
Görüntüleme
2.416
famineasylum
F
ZOAX
İlk HTML tasarımı nasıl olmuş?
Mesaj
6
Görüntüleme
691
ZOAX
ZOAX
S
Web Tasarım HTML, PHP Kodlarını Kullanma
2
Mesaj
11
Görüntüleme
2.960
Helelehololo
H
VanT0R
Web tasarımı nasıl olmuş?
2
Mesaj
13
Görüntüleme
842
VanT0R
VanT0R
AdemBeyyy
Mobilden nasıl HTML yazılır?
Mesaj
6
Görüntüleme
779
LeaderofChaos
LeaderofChaos

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı