Kapat

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ı:

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:

<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:

.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/

Ana Konumun Bağlantısı: https://kodluk.net/css-ile-tablo-olusturmak-konusu

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Kapat

Mehmet Duran ATASEVEN

Teknolojiyi ve gelişimi seven 22 yaşında, yazılım alanına ilgili bir bireyim. Lisans eğitimimi Trakya Üniversitesi'nin Bilgisayar Teknolojisi ve Bilişim Sistemleri bölümünde tamamladım. Masaüstü, web, mobil ve grafik alanında işler çıkarmaktayım.

Sosyal Ağ