1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Css Dersleri 5- Tabloları Özelleştirme

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 25 Mayıs 2017 tarihinde açılan konu

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,873

    Özel Mesaj
    Selâmün Aleyküm devrelerim. Bir sürelik aradan sonra kaldığımız yerden devam ediyoruz. Önceki dersimizde Css ile arkaplan şekillendirmeyi öğrenmiştik.
    Bu dersimizde ise Css kodları ile tablolarımızı düzenlemeyi öğreneceğiz. İsterseniz hemen başlayalım...

    Css Dersleri 1-Giriş
    Css Dersleri 2-Yazı Biçimlendirme
    Css Dersleri 3-Div ve Span Etiketleri
    Css Dersleri 4-Arkaplanlar


    Tablolar

    Her zamanki gibi ilk önce temel Html kodlarımızı yazıp daha sonra kafamıza göre bir tablo oluşturuyoruz.

    HTML:
    <!Docytype html>
        <html>
            <head>
                <title>Css Ders 5 </title>
                <meta charset="Utf8">
                <style>
            
                </style>
            </head>
            <body>
        
                <table>
                    <caption>Ayyıldız Tim Komutanlar ve Rütbeleri</caption>
                    <tr>
                        <th>Komutan Adı</th> <th>Rütbesi</th>
                    </tr>
                    <tr>
                        <td>LEDÜN ABDAL</td> <td>Orgeneral</td>
                    </tr>
                    <tr>
                        <td>EKE KURTGA</td> <td>TÜMGENERAL</td>
                    </tr>
                    <tr>
                        <td>TILEY ŞAD</td> <td>ALBAY</td>
                    </tr>
                    <tr>
                        <td>Bilge Tonyukuk</td> <td>Yarbay</td>
                    </tr>
                    <tr>
                        <td>Refa</td> <td>Binbaşı</td>
                    </tr>
                        <tr>
                    <td>yesevi</td> <td>Üsteğmen</td>
                    </tr>
                </table>
    
    
            </body>
        </html>

    Açtığım Web Tasarım Konularımı takip ediyorsanız bu tabloyu daha önce Html Derslerinde de yaptığımızı fark etmişsinizdir. Ve yaptığımız şey şimdilik böyle görünecek.

    [​IMG]

    Yaptığımız tablo uzun olmamasına rağmen son derece okunaksız oldu. Şimdi Css Kodları ile tabloyu güzelleştirmeye çalışacağız. Ama önce yeni bir etiket öğreneceğiz.

    Caption: Tabloya ana başlık oluşturmada kullanırız. Bizim tablomuzun başlığı "Ayyıldız Tim Komutanları ve Rütbeleri" olabilir.

    Öncelikle bir tablodaki en önemli şey tablo kenarlarında çerçeveler olmasıdır, öyle değil mi? Css ile "border" komutu kullanarak bunları 3 ana ayarla düzenleyebiliyoruz.

    Border-style: Tablonun çerçeve türünü belirler, temel olarak 4 çeşittir.

    Dotted: Noktalı
    Dashed: Kesik çizgili
    Solid: Düz Çizgi
    Double: Çift çizgi

    Border-color: Tablonun çerçeve rengini belirler.

    Border-size: Tablonun çerçeve kalınlığını belirler.

    Örnek olarak düz çizgili, koyu mavi renkli ve 3 piksel kalınlığında bir tabloyu şu şekilde yapabiliriz.


    HTML:
    <style>
    table {border-style:double;
           border-color:darkblue;
          border-size:3px; }
    
    </style>


    Bu arada dikkat etmeniz gereken bir nokta var; bu yaptığımız sadece tablonun dış çerçevesi içindir. Tablonun sütunları (td) için de bir özellik belirtmeliyiz. Örnek bir tablo kodu yazalım:

    HTML:
    <style>
    table {border-style:solid;
           border-color:darkblue;
          border-size:3px; }
       
    
    td    {border-style:solid;
           border-color:darkred;
          border-size:3px; }
       
    </style>

    Yaptığımız tablo şöyle gözüküyor:

    [​IMG]

    İyi, hoş güzel ama sanki bu yaptığımız tablonun internette gördüklerimizden ciddi olarak bir farkı var. Bunu şöyle anlatayım:

    Tablo içinde satır ve sütunların birleşmesiyle oluşan kutucuklara "hücre" diyoruz. Şuanki hücrelerimiz bir çerçeve içerisinde ayrı duruyor. Ama internet üzerinde gördüğümüz tablolarda ise hücrelerle dış çerçeveler birleşik durur. Bunun için "table" elementi içine yazdığımız kodları silip yerine şu kodu yazalım:

    HTML:
    border-collapse:collapse;

    (İki nokta sonrasında "separate" adlı bir değer de alınabilir ama zaten bu varsayılan değerdir.) Yani kodumuz şu şekilde;

    HTML:
    <style>
    table {border-collapse:collapse; }
       
    
    td    {border-style:solid;
           border-color:darkred;
          border-size:3px; }
       
    th    {border-style:solid;
           border-color:darkred;
          border-size:3px; }
       
    </style>


    Bu arada "Komutan Adı" ve "Rütbesi" bölümlerini vurgulamak için "th" etiketi içine aldım. Önceden Html Derslerinde görmüştük. Bu arada nasıl bir şey yaptığımıza da bakalım:

    [​IMG]

    Böylece aradaki farkı anladığınızı düşünüyorum.

    Bunun dışında yapabileceğimiz farklı şeyler de var. Tablonun yükseklik ve genişliğini boyutlandırabiliriz. Önceki derslerde gördüğümüz uzunluk ölçüleri geçerlidir. Daha sonra hücre içindeki yazıların konumunu belirleyebiliriz. Önceki kodlarımıza boyutlandırma ve konum kodlarımızı ekleyelim. Hatta tablomuzun başlığını da rastgele düzenleyelim.

    HTML:
    <style>
    
    caption {font-size:50px;
             color:darkgreen;
            font-family:calibri; }
           
    table {border-collapse:collapse;
           width: 50%;
           height:50%;}
       
    
    td    {border-style:solid;
           border-color:darkred;
          border-size:3px;
          text-align:center;}
       
    th    {border-style:solid;
           border-color:darkred;
          border-size:3px;
          text-align:center;}
       
    </style>
    [​IMG]
    İstersek çalışmamızı biraz daha geliştirebiliriz. Tablomuzun arkaplanında bir resim olabilir mesela;

    HTML:
    table {background-image:url(Resim.jpg); }

    Bu kodu tablomuza ekleyelim ve kullandığımız resme göre sonucumuz:

    [​IMG]

    Ya da resim istemiyorsanız kendiniz arkaplan renk kodlarını kullanabilirsiniz;

    HTML:
    td {background-color:#ccc;
        color:white;}
     
    th {background-color:#515459;
        color:#fff;}

    Güzel bir çalışma olduğunu düşünüyorum. Resme bakalım:

    [​IMG]

    Gördüğünüz gibi çok güzel şeyler yapabiliyoruz. Ben tablolar konusunu seviyorum. Kendiniz deneyerek bu örnekleri çoğaltabilirsiniz. Tek yapmanız gereken çalışmak ve anlamak için uğraşmak, kesinlikle zor değil. ;)

    Devrelerim, bu dersimizin de sonuna geldik. Bu dersimizde sizlerle tablolar konusunu inceledik ve internette gördüğünüz tabloları aratmayan çalışmalar yaptık. Bana destek olmak için yapmanız gereken beğenmek ve güzel yorumlarınızı dile getirmek. Kolay gelsin, iyi çalışmalar... :)
     
  2. oyuncu_king Atıldı

    • Guest
    Katılım:
    13 Ocak 2017
    Mesaj:
    133
    Alınan Beğeniler:
    134

    Özel Mesaj
    Eline sağlık devrem. :) Tablolar güzel olmuş, ben de deneyeceğim şimdi. :D
     
    AFRAA ve ERVAH-I-EZEL bunu beğendi.
    • Guest
    Katılım:
    31 Mayıs 2017
    Mesaj:
    17
    Alınan Beğeniler:
    7

    Özel Mesaj
    Css serin bittimi devrem daha gelecekmi.
     
    ERVAH-I-EZEL bunu beğendi.
  3. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,873

    Özel Mesaj
    Bitmedi devrem, daha devam edecek ama az kaldı sayılır. Malum 2 günde bir hack derslerine konu açıyorum ve buraya vakit kalmıyor. Son bir ders kaldı sonra sadece bu bölüme yükleneceğim. ;)
     
    mehmetremziaslan bunu beğendi.
    • Guest
    Katılım:
    31 Mayıs 2017
    Mesaj:
    17
    Alınan Beğeniler:
    7

    Özel Mesaj
    Şuan uğraştığını konunun linkini atarmisin devrem sana zahmet
     
  4. oyuncu_king Atıldı

    • Guest
    Katılım:
    13 Ocak 2017
    Mesaj:
    133
    Alınan Beğeniler:
    134

    Özel Mesaj
    Hack derslerinin son konusunu yazıyor devrem. Sen de takip ediyorsun ya. :)
     
    mehmetremziaslan ve ERVAH-I-EZEL bunu beğendi.
  5. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,873

    Özel Mesaj
    oyuncu_king bunu beğendi.

Bu Sayfayı Paylaş