You need to enable JavaScript to run this app.

Ana içeriğe geç

CSS ile Tablo Oluşturmak

CSS ile Tablo Oluşturmak

Yönetici
CSS ile Tablo Oluşturmak
Farklı farklı amaçlar farklı farklı işler uğruna binbir çeşit internet siteleri oluşturuyoruz. Bazen internet sitesi tasarlarken ara ara tablo oluşturma ihtiyacı duyuyoruz. Bu gibi durumlarda genellikle aklımıza ilk HTML etiketleri olan <table>, <tr>, <td>, <th> etkiletleri kullanmak geliyor. Peki bu tabloları CSS ile oluşturmak istersek nasıl yapabiliriz? İşte konunun devamında öğreneceğimiz nokta burası. İşinize faydalı olursa bir beğeniyi eksik etmezseniz sevinirim.

CSS ile tablo oluştururken kullanacağımız sadece bir CSS özelliği var. Evet gerçekten bir tane var, tabii özelliştirme işlemlerini saymazsak.. Bu CSS özelliği display'dir. İşte display'ın tablo için tanımlamaları:

Kod:
div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}
Göründüğü gibi tüm tanımlamaları display özelliği üzerinden yapıyoruz.. Kısaca;
  • table: tabloyu tanımlar,
  • table-cell: hücreyi tanımlar,
  • table-column: kolonları temsil eder,
  • table-colgroup: kolon grupları yapabilmeyi sağlar,
  • table-header-group: tablo başlıklarını tanımlar,
  • table-row-group: satır grupları yapabilmeyi sağlar,
  • table-footer-group: tablonun alt bölümünü temsil eder,
  • table-row: satırları tanımlar,
  • table-caption: tabloya başlık eklemeyi sağlar.

Hemen bunları kullandığımız bir kod yazalım:
PHP Kod:
<div class="table">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="caption">Tablo Başlığı</div>
  <div class="header-group">
    <div class="cell">Kolon 1</div>
    <div class="cell">Kolon 2</div>
  </div>
  <div class="row-group">
    <div class="row">
        <div class="cell">İçerik 1-1</div>
        <div class="cell">İçerik 1-2</div>
    </div>
    <div class="row">
      <div class="colgroup">
        <div class="cell">Grup 1 (İçerik 2-1)</div>
        <div class="cell">Grup 2 (İçerik 2-1)</div>
      </div>
      <div class="cell">İçerik 2-2</div>
    </div>
  </div>

  <div class="footer-group">
    <div class="cell">Alt 1</div>
    <div class="cell">Alt 2</div>
  </div>
</
div
CSS tarafında ise kodlarımız:
Kod:
.table {
  display: table;
}

.caption {
  display: table-caption;
}

.header-group {
  display: table-header-group;
  font-weight: bold;
}

.row-group {
  display: table-row-group;
}

.row {
  display: table-row;
}

.colgroup {
  display: table-colgroup;
}

.cell {
  display: table-cell;
  border: 1px dotted gray;
  padding: 2px;
}

.column1 {
  display: table-column;
  height: 20px;
  width: 300px;
  background-color: #f5f5f5;
}

.column2 {
  display: table-column;
  height: 20px;
  width: 100px;
  background: #e0e0e0;
}

.footer-group {
  display: table-footer-group;
  font-style: italic;
}
Çıktımızın görüntüsü şu şekilde olacaktır:

[Resim: zQw4Kx.png]

Canlı Ön İzleme: https://jsfiddle.net/atasevenmd/5esfxygb/3/
[-]
Bunu beğenenler:
   EnkaPRO, MURODERLERBANA, SafakB

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren Kodluk sitemizde 5651 sayılı kanunun 8. maddesine ve T.C.K'nın 125. maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. Sitemiz hakkında yapılacak tüm hukuksal şikayetleri bağlantısından bize ulaşıldıktan en geç 3 (üç) gün içerisinde ilgili kanunlar ve yönetmenlikler çerçevesinde tarafımızca incelenerek, gereken işlemler yapılacak ve site yöneticilerimiz tarafından bilgi verilecektir.