Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Css / Css İle Tablo Özellikleri Ders#9

Css | 18 Mayıs 2020 | 0 | 341
Css İle Tablo Özellikleri Ders#9

CSS’in sağladığı araçlarla HTML’in tablo oluşturma olanakları büyük ölçüde iyileştirilmiştir. Bu eğitim içeriği ve alt içeriklerinde tabloları nasıl daha güzel ve kullanışlı tasarlayacağınızı göstereceğiz.

Tablo sınırları

CSS’te tablo sınırlarını belirlemek için border özelliğini kullanmalısınız.

table, th, td {
   border: 2px solid black;
}

Aşağıdaki örnek, tablo, th ve td elemanları için siyah sınırlar belirliyor:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, th, td {
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
        
        <table>
            <tr>
                <th>ULKE</th>
                <th>NUFUS</th>
            </tr>
            <tr>
                <td>ALMANYA</td>
                <td>80</td>
            </tr>
            <tr>
                <td>FRANSA</td>
                <td>55</td>
            </tr>
        </table>
        
    </body>
</html>

Gördüğünüz gibi sınırları ayarlamak hem daha kolay hem daha esnetik oldu.

Yukarıdaki örnek tabloda çift sınır çizgisi mevcuttur. Bunun sebebi, hem tablo hem de th/td elemanlarının ayrı sınırlara sahip olmasıdır. Tabloda tek bir sınır göstermek için border-collapse özelliğini kullanınız.

Sınırları daraltma

Border-collapse özelliği, tablo sınırlarının tek bir sınıra mı indirgeneceği ya da ayrılacağı konusunu belirlemek üzere atama yapar. Şimdi bunu örneğimizle görelim:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

ÖRNEK HTML5 KODU:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
            }
        
        table, td, th {
            border: 2px solid black;
        }
        </style>
    </head>
    <body>
        
        <table>
            <tr>
                <th>ULKE</th>
                <th>NUFUS</th>
            </tr>
            <tr>
                <td>ALMANYA</td>
                <td>80</td>
            </tr>
            <tr>
                <td>ISVEC</td>
                <td>4</td>
            </tr>
        </table>
        
        <p><b>EK BILGI:</b> !DOCTYPE IFADESI KULLANILMAZSA, border-collapse OZELLIGI <br>IE8 VE ONCEKİ SURUMLERDE BEKLENMEYEN SONUCLAR URETEBILIR.</p>
        
    </body>
</html>

BENZER KONULAR

Css | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...