HTML – CSS ile Responsive Tablo Kodları

HTML projelerimizin olmazsa olmazları arasında gelen tablolar, CSS ile son derece esnek bir yapıya bürünebilir. Bu makalede HTML projelerinize entegre edebileceğiniz ve CSS ile stillendirilmiş tabloların kodlarını bulabilirsiniz.

Konu Başlıkları

responsive tablo

Öncelikle projenize şu HTML kodlarını dahil etmelisiniz;

HTML

<div class="wrapper">
  
  <div class="table">
    
    <div class="row header">
      <div class="cell">
        Ad Soyad
      </div>
      <div class="cell">
        Yaş
      </div>
      <div class="cell">
        Meslek
      </div>
      <div class="cell">
        Lokasyon
      </div>
    </div>
    
    <div class="row">
      <div class="cell" data-title="Name">
        Burak Durmuş
      </div>
      <div class="cell" data-title="Age">
        25
      </div>
      <div class="cell" data-title="Occupation">
        Web & Grafik Tasarım
      </div>
      <div class="cell" data-title="Location">
        İstanbul
      </div>
    </div>
    
    <div class="row">
      <div class="cell" data-title="Name">
        Burak Durmuş
      </div>
      <div class="cell" data-title="Age">
        25
      </div>
      <div class="cell" data-title="Occupation">
        Web & Grafik Tasarım
      </div>
      <div class="cell" data-title="Location">
        İstanbul
      </div>
    </div>
    
    <div class="row">
      <div class="cell" data-title="Name">
        Burak Durmuş
      </div>
      <div class="cell" data-title="Age">
        25
      </div>
      <div class="cell" data-title="Occupation">
        Web & Grafik Tasarım
      </div>
      <div class="cell" data-title="Location">
        İstanbul
      </div>
    </div>
    
    <div class="row">
      <div class="cell" data-title="Name">
        Burak Durmuş
      </div>
      <div class="cell" data-title="Age">
        25
      </div>
      <div class="cell" data-title="Occupation">
        Web & Grafik Tasarım
      </div>
      <div class="cell" data-title="Location">
        İstanbul
      </div>
    </div>
    
  </div>
  
  <div class="table">
    
    <div class="row header green">
      <div class="cell">
        Ürün Adı
      </div>
      <div class="cell">
        Birim Fiyatı
      </div>
      <div class="cell">
        Garanti
      </div>
      <div class="cell">
        Son Tüketim Tarihi
      </div>
      <div class="cell">
        Durum
      </div>
    </div>
    
    <div class="row">
      <div class="cell" data-title="Product">
        Kahve
      </div>
      <div class="cell" data-title="Unit Price">
        25₺
      </div>
      <div class="cell" data-title="Quantity">
        10
      </div>
      <div class="cell" data-title="Date Sold">
        03/15/2020
      </div>
      <div class="cell" data-title="Status">
        Stokta
      </div>
    </div>
    
   <div class="row">
      <div class="cell" data-title="Product">
        Kahve
      </div>
      <div class="cell" data-title="Unit Price">
        25₺
      </div>
      <div class="cell" data-title="Quantity">
        10
      </div>
      <div class="cell" data-title="Date Sold">
        03/15/2020
      </div>
      <div class="cell" data-title="Status">
        Stokta
      </div>
    </div>
    
   <div class="row">
      <div class="cell" data-title="Product">
        Kahve
      </div>
      <div class="cell" data-title="Unit Price">
        25₺
      </div>
      <div class="cell" data-title="Quantity">
        10
      </div>
      <div class="cell" data-title="Date Sold">
        03/15/2020
      </div>
      <div class="cell" data-title="Status">
        Stokta
      </div>
    </div>
    
   <div class="row">
      <div class="cell" data-title="Product">
        Kahve
      </div>
      <div class="cell" data-title="Unit Price">
        25₺
      </div>
      <div class="cell" data-title="Quantity">
        10
      </div>
      <div class="cell" data-title="Date Sold">
        03/15/2020
      </div>
      <div class="cell" data-title="Status">
        Stokta
      </div>
    </div>
    
  </div>
  
  <div class="table">
    
    <div class="row header blue">
      <div class="cell">
        Kullanıcı Adı
      </div>
      <div class="cell">
        E-Posta
      </div>
      <div class="cell">
        Parola
      </div>
      <div class="cell">
        Durum
      </div>
    </div>
    
    <div class="row">
      <div class="cell" data-title="Username">
        oburakdurmus
      </div>
      <div class="cell" data-title="Email">
        [email protected]
      </div>
      <div class="cell" data-title="Password">
        ************
      </div>
      <div class="cell" data-title="Active">
        Aktif
      </div>
    </div>
    
     <div class="row">
      <div class="cell" data-title="Username">
        oburakdurmus
      </div>
      <div class="cell" data-title="Email">
        [email protected]
      </div>
      <div class="cell" data-title="Password">
        ************
      </div>
      <div class="cell" data-title="Active">
        Aktif
      </div>
    </div>
    
     <div class="row">
      <div class="cell" data-title="Username">
        oburakdurmus
      </div>
      <div class="cell" data-title="Email">
        [email protected]
      </div>
      <div class="cell" data-title="Password">
        ************
      </div>
      <div class="cell" data-title="Active">
        Aktif
      </div>
    </div>
    
     <div class="row">
      <div class="cell" data-title="Username">
        oburakdurmus
      </div>
      <div class="cell" data-title="Email">
        [email protected]
      </div>
      <div class="cell" data-title="Password">
        ************
      </div>
      <div class="cell" data-title="Active">
        Aktif
      </div>
    </div>
    
  </div>
  
</div>

Daha sonra bir stil dosyası oluşturup projenize dahil edin ve stil dosyanızın içerisinde şu stil kodlarını yerleştirin;

SASS (css)

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)
    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)
    display: block

.row
  display: table-row
  background: #f6f6f6
  
  &: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)
    padding: 14px 0 7px
    display: block
    
    &.header
      padding: 0
      height: 6px
      
      .cell
        display: none
    
    .cell
      margin-bottom: 10px
      
      &: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)
    padding: 2px 16px
    display: block

Yukarıdaki kodların çıktısı ise şu şekilde olmalıdır;

Photo of author

Burak Durmuş

Belgeli Web Tasarım, Grafik Tasarım ve Dijital Pazarlama uzmanı. Tecrübeli E-Ticaret Yöneticisi. Öğrendiklerini öğreterek pekiştirmeye çalışan gönüllü bir yazar. Kişisel Hesaplar: Instagram @oburakdurmus * Twitter @oburakdurmus

Yorum yapın