HTML – CSS ile Responsive Tablo Kodları

Yazarı:

HTML ve CSS kullanarak mobile uyumlu tablo kodları oluşturmak, web sayfalarınızda düzenli ve okunaklı bir içerik sunmanıza yardımcı olacaktır. Bu sayede kullanıcılarınız tablolarda kaybolmayacak ve ihtiyacı olan bilgilere kolayca erişebilecekler. Responsive tablo kodları, herhangi bir cihazda (akıllı telefonlar, tabletler, bilgisayarlar) kolayca görüntülenebilir ve kullanılabilir. Bu da web sayfalarınızın erişilebilirliğini ve kullanıcı deneyimini arttırır. Tasarımı kolay ve basit olan tablo kodları, web geliştirme faaliyetleri için de ideal bir çözümdür. Yüksek kaliteli ve SEO dostu bir web sitesi için HTML – CSS ile responsive tablo kodları oluşturmayı unutmayın.

HTML Projelerinde Kullanılabilecek Responsive Tablolar için CSS Kodları

HTML projelerinde en sık kullanılan yapılar arasında tablolar yer alır. Ancak bu tabloların responsive şekilde görüntülenmesi için CSS kodlamaları gerekmektedir. Bu makalede sizler için hazırlanmış ve kullanabileceğiniz responsive tablo kodlarına yer veriyoruz.

Öncelikle HTML Kodları

Projelerinize bu kodları ekleyebilirsiniz:

Ad Soyad
Yaş
Meslek
Lokasyon

Burak Durmuş
25
Web & Grafik Tasarım
İstanbul

…

Ardından Stil Kodları

HTML kodlarının görüntüsünü şekillendirmek için stil dosyası oluşturmanız gerekiyor. Bu dosyaya aşağıdaki kodları eklemelisiniz:

Stil Dosyası Kodları 

        body {
          font-family: 'Helvetica Neue', Helvetica, Arial;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          color: #3b3b3b;
          -webkit-font-smoothing: antialiased;
          font-smoothing: antialiased;
          background: #2b2b2b
        }
        
        @media screen and (max-width: 580px) {
          body {
            font-size: 16px;
            line-height: 22px;
          }
        }
        
        .wrapper {
          margin: 0 auto;
          padding: 40px;
          max-width: 800px;
        }
        
        .table {
          margin: 0 0 40px 0;
          width: 100%;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
          display: table;
        }
        
        @media screen and (max-width: 580px) {
          .table {
            display: block;
          }
        }
        
        .row {
          display: table-row;
          background: #f6f6f6;
        }
        
        .row:nth-of-type(odd) {
          background: #e9e9e9;
        }
        
        .header {
          font-weight: 900;
          color: #ffffff;
          background: #ea6153
        }
        
        .green {
          background: #27ae60
        }
        
        .blue {
          background: #2980b9
        }
        
        @media screen and (max-width: 580px) {
          .row {
            padding: 14px 0 7px;
            display: block;
          }
        }
        
        .header {
          padding: 0;
          height: 6px;
        }
        
        .cell {
          display: none;
          margin-bottom: 10px;
        }
        
        .cell:before {
          margin-bottom: 3px;
          content: attr(data-title);
          min-width: 98px;
          font-size: 10px;
          line-height: 10px;
          font-weight: bold;
          text-transform: uppercase;
          color: #969696;
          display: block;
        }
        
        .cell {
          padding: 6px 12px;
          display: table-cell;
        }
        
        @media screen and (max-width: 580px) {
          .cell {
            padding: 2px 16px;
            display: block;
          }
        }

Yukarıdaki kodların çıktısı, aşağıdaki gibi olacaktır:

HTML projelerinizde kullanabileceğiniz responsive tablo kodları ile sayfalarınızı daha şık ve kullanışlı hale getirebilirsiniz. Unutmayın, kullanacağınız tabloların responsive şekilde görüntülenebilmesi için CSS kodlarına ihtiyacınız var. Bu kodlar sayesinde tablolarınız tüm cihazlarda rahatlıkla görülebilir hale gelecektir.

Yorum yapın