Bootstrap kenarlıklı grid tablo, Turkish Tutorial

English Description

Bordered Grid Table

As we can see from the title, this will be a grid with a table border.

With this grid-shaped grid, the gaps next to the table will rise from the center, and the lines will follow.

Again, with the same logic, we will get the look we want by assigning the tabere-bordered class to our "table" element.

Türkçe Açıklama

Kenarlıklı Grid Tablo

Başlıktan anlaşılacağı üzere bu kısımda yapacağımız tablo kenarlıklı grid şeklinde olacak.

Kenarlıklı grid şeklinde olan bu tablo sayesinde, tablonun yanında olan boşluklar ortadan kalkıp onun yerine çizgiler gelecektir.

Yine aynı mantık ile "table" elementimize tabıe-bordered sınıfını atayarak istediğimiz görünümü elde edeceğiz.

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Kutu Şeklinde Tablo</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

    <div class="bs-example">
    
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>$</th>
                    <th>Şehir</th>
                    <th>İlçe</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>İstanbul</td>
                    <td>Bağcılar</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>İzmir</td>
                    <td>Buca</td>
                </tr>
             </tbody>
        </table>
        
    </div>
    
</body>
</html>

Görıildüğü gibi sınıfımızı değiştirdik. Bordered zaten ingilizce anlamında çerçeve veya çizgi tarzı bir anlama gelmektedir.

Resimde görüldüğü gibi artık tablomuzda sütunlar ve kategoriler arasında çizgi vardır.

Ayrıca sınıf kısmında bir boşluk verip başka bir kod yazarsanız tüm özellikleri aynı anda kullanabilirsiniz.

Tablo etiketleri ile kullanabileceğimiz bir diğer özellik, sütun birleştirme kodu.

Kodumuz ise aşağıdaki gibidir:

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Tablo Birşleştirme</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

    <div class="bs-example">
    
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>$</th>
                    <th>Şehir</th>
                    <th>İlçe</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td colspan="2">İstanbul</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>İzmir</td>
                    <td>Buca</td>
                </tr>
             </tbody>
        </table>
        
    </div>
    
</body>
</html>

Burada yer alan "2" değeri kaç sütunu birleştireceğinizi ifade ediyor.

Görüldüğü gibi iki sütun birleştirilmiştir.

Hover Efektli Tablolar

Hover efektli bir başlık sayesinde, üstüne geldiğiniz sütun rengi koyulaşarak daha görsel bir sunum sağlar.

Bu kod ile özellikle çok veri var ise üstüne gelince, yani "hover" durumunda iken kullanıcının daha kolay görmesini sağlar ve dikkatinin dağılmasını önler. Kullanıcı ise tamamıyla o öğeyi görmüş olur.

Fakat benim tavsiyem mobil cihazlarda sık girilen bir site kullanmamanız, çünkü sayfayı yavaşlatabiliyor. Özellikle sayfalar uzun ise bu yavaşlık kendini belli ediyor.

Kodlarımız ise aşağıdaki gibidir:

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Hover Tablo</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="bs-example">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>[]</th>
                    <th>Ürün</th>
                    <th>Tipi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Kuru Fasulye</td>
                    <td>Bakliyat</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kıyma</td>
                    <td>Et</td>
                </tr>
             </tbody>
        </table>
    </div>
</body>
</html>

Resimde görüldüğü gibi sütunun üzerine gelirsek renklenecek, dediğimiz gibi sadece fare ile üzerine gelince öğe koyulaşacaktır, yani hover durumunda renk değiştirecektir.

Bu kısımda gri renkte gözüküyor. Aslında bu renk gri değil transparan koyuluk rengidir. Özellikle renk kodlarını kullandığımız zaman, örneğin kısım mavi ise gri olmayacaktır onun yerine mavi renk koyulaşacaktır.

Dar Görünümlü Tablo

Başlığımızın adından anlaşılacağı üzere bu tabıo yöntemi çok fazla seviyede verisi olan kullanıcılar içindir. Özellikle fazla sayıda veri olup da sayfada fazla genişlik istemeyen geliştiriciler bu komutu kullanıp alandan tasarruf edebilirler.

Ayrıca diğer sayfalarda kullanacağımız renk kodları sayesinde kullanıcı deneyimini çok daha ileri seviyeye getirebileceksiniz.

Kodlarımız ise şu şekildedir:

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Sıkışık Tablo</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="bs-example">
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>+</th>
                    <th>Kredi</th>
                    <th>Puan</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>5,500</td>
                    <td>10,100</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>4,200</td>
                    <td>8,600</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>2,250</td>
                    <td>3,080</td>
                </tr>
             </tbody>
        </table>
    </div>
</body>
</html>

Birçok sınıf kullanıyoruz ve biraz ingilizce bilginiz var ise size mutlaka yardımcı olacaktır. Çünkü Bootstrap ile gelen sınıf isimleri ingilizce.

Programlamaya yeni başlayan birisi iseniz mutlaka ingilizce öğrenerek başlamanızda fayda var. Çünkü Türkçe kaynaklar bir süre sonra yeterli
gelmemektedir.

Posted on Utopian.io - Rewarding Open Source Contributors