CSS Tablo Biçimlendirme konusunu öğrenmek için ön koşul var mı?

Bu içerik temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.

Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?

Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.

Takıldığım bir yerde nereden soru sorabilirim?

İçeriğin altındaki topluluk yorumları bölümünden sorunuzu iletebilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.

CSS Tablo Biçimlendirme - HTML Dersleri

CSS kullanarak HTML tablolarını biçimlendirmek oldukça yaygındır. İşte basit bir tablo biçimlendirme örneği:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tablo Biçimlendirme Örneği</title> <style> body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } section { padding: 2em; } table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } th, td { padding: 0.75em; text-align: left; border: 1px solid #ddd; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; } </style> </head> <body> <section> <h1>Tablo Biçimlendirme Örneği</h1> <table> <thead> <tr> <th>İsim</th> <th>Soyisim</th> <th>Yaş</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>25</td> </tr> <tr> <td>Jane</td> <td>Smith</td> <td>30</td> </tr> <tr> <td>Bob</td> <td>Johnson</td> <td>22</td> </tr> </tbody> </table> <table> <thead> <tr> <th>Ürün</th> <th>Fiyat</th> </tr> </thead> <tbody> <tr> <td>Laptop</td> <td>$1000</td> </tr> <tr> <td>Telefon</td> <td>$500</td> </tr> <tr> <td>Tablet</td> <td>$300</td> </tr> </tbody> </table> </section> </body> </html>

Bu örnekte:

table öğesine genişlik verilmiş ve border-collapse özelliği kullanılarak hücre çizgileri birleştirilmiştir.
th (başlık hücresi) ve td (veri hücresi) etiketleri için padding ve border özellikleri belirlenmiştir.
Sıradaki çift satırların arka plan rengi farklı olacak şekilde tr:nth-child(even) kullanılarak çift sıradaki satırların arka plan rengi değiştirilmiştir.

Bu stil özellikleriyle tablonuzun görünümünü kişiselleştirebilirsiniz.

CSS Tablo Biçimlendirme

Bu ders size yardımcı oldu mu? Puan verin!

Sıkça Sorulan Sorular (SSS)

Topluluk Yorumları (0)

Ders Hakkında Yorum Yap veya Soru Sor