English Description
Table Labels
Now with table labels we will learn to make data tables much easier.
Base Table Labels
You know the base table label, but here the basic tag is created by assigning a class. Not that much, but a much simpler look on the tables will be confronted.
I strongly recommend that you get the base table tags under this heading, because in many of our examples we will add our other code based on the table labels, so the issue is important.
You do not have to work with your coded base table tags, so you should definitely learn this part for full operation. Already we directly assign the "table" class to the "table" tag, which is just our basic code.
Simply Upper Table
As we can see from the title, we will talk about how we make a picture in this section where the basic headings are at the top and the data at the bottom.
This title is the basic usage and is already generally used by everyone.
Tablo Etiketleri
Artık tablo etiketleri sayesinde çok daha kolay veri tabloları yapmayı öğreneceğiz.
Temel Tablo Etiketleri
Temel tablo etiketini biliyorsunuzdur, fakat burada temel etikete sınıf atanarak oluşturulmuştur. Bununla kalmayıp çok daha sade bir görünüme kavuşturulmuş tablolar karşımıza çlkacaktır.
Temel tablo etiketlerini bu başlık altında mutlaka öğrenmenizi tavsiye ediyorum, çünkü birçok örneğimizde tablo etiketlerini temel alarak içlerine diğer kodlarımızı ekleyeceğiz bu yüzden konu önemli.
Kodlanmız temel tablo etiketleri olmadan çalışmaz, yani tam çalışması için bu kısımda mutlaka öğrenmelisiniz. Zaten direkt olarak "table" etiketine "table" sınıfı atıyoruz, temel kodumuz sadece bundan ibaret.
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<table class="table">
Merhaba Dünya
</table>
</body>
</html>
Yukarıda görüldüğü gibi "table" etiketine aynı şekilde "table" adinda sınıf atanarak kod bloğu oluşturulmuştur.
Bu bölümde kodların kullanımlarını örnekler üzerinden anlatmak istiyorum. Çünkü ekrana gelecek çıktılar ile öğrenmek daha başarılı ve kolay öğrenim şekli olacaktır. Zaten aslında temel HTML bilginiz var ise bu bölümlerde Çok zorluk çekmeyeceksiniz.
Temel kodları biliyorsanız sadece bu bölümde o kodlara ek sınıflar vereceği bundan başka herhangi bir ek yapılandırma olmayacak. Bununla birlikte birde ezberinizde olsa faydalı mutlaka işinize yarayacak renk kodlarımız bulunmaktadır.
İlk olarak her zaman altın kural olan "table" etiketine "table" sınıfı atayarak gerekli olan kodlarımızı bu kısıma eklememiz gerekmektedir. Aksi taktirde tablo kodlarımız düzgün çalışmayacaktır.
Basitçe Üst Menülü Tablo
Başlıktan anlaşılacağı üzere bu kısımda, üstte temel başlıkların olduğu altında ise verilerin yer aldığı bir tabloyu nasıl yaparız bundan bahsedeceğiz.
Bu başlık temel kullanım şeklidir ve zaten genel olarak herkes tarafından kullanılmaktadır.
Kodlarımız ise aşağıdaki gibidir.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Temel Tablo Etiketleri</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>İsimler</th>
<th>Şehirler</th>
<th>Numaralar</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Kodlarımızı inceleyecek olursak ilk başta temel olarak "table" oluşturduk ardından ise "thead" oluşturarak üst kısmın oluşmasını sağladık. "TR" etiketleri sayesinde menümüzü yaptık ve içlerine "th" etiketleri ile veri başlıklarını girdik.
Bu etiketler sadece bu kısımda oluşan tablo için geçerli değildir. Aksine kullanacağımız ve yapacağımız tüm tablolar için bu etiketler geçerli olacaktır.
Görüldüğü gibi bu şekilde ana bileşen olan üst kısmı tamamladık ve altına karışıklık olmaması açısından bir çizgi ekledik.
Bu kısmı kavramamz önemlidir, çünkü tabloların birçoğunda bu kodlar ve bu mantık kullanılarak örnekler yapılacaktır.
Şimdi ise bu tablonun altına verilerimizi nasıl ekleriz buna bakacağız.
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Verili Tablo</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>^^</th>
<th>İsimler</th>
<th>Şehirler</th>
<th>Numaralar</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Batuhan</td>
<td>İzmir</td>
<td>0-1111-222-333</td>
</tr>
<tr>
<td>2</td>
<td>Hilal</td>
<td>İzmir</td>
<td>0-2222-333-444</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Kodlarımızı açıklayacak olursak "thead" ile başlık yapmıştık, şimdi ise verilerimiz için "tbody" alanı yaptık ve ardından "tr" etiketi açıp içine "td" etiketi ile verilerimizi ekledik.
İki Renkli Tablo
Bu örneğimizde ise eklediğimiz verilerden birisi daha gri arka planlı, diğeri ise beyaz arka planlı gözükecektir.
Özetle birinci satır diğer örnekte gözüktüğü gibi, ikinci satır ise gri renk gözükecektir. Bu sayede çok fazla veriden oluşan tablolar var ise, en azından kullanıcı renge göre ayırım yapabilecektir. Ayrıca önemli bir husus ise, mutlaka sol kısımda sıra numarası olsun, bu sayede kullanıcı sıra numarasını aklında tutup geri döndüğünde, direkt olarak sıra numarasını kullanıp verilerine gözatabilecektir.
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>İki Renkli</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="bs-example">
<table class="table table-striped">
<thead>
<tr>
<th>^^</th>
<th>İsimler</th>
<th>Şehirler</th>
<th>Numaralar</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Batuhan</td>
<td>İzmir</td>
<td>0-123-12-12</td>
</tr>
<tr>
<td>2</td>
<td>Hilal</td>
<td>İzmir</td>
<td>0-123-12-12</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Kodlarımızda vurguladığım gibi "table" etiketimize sınıf verdik, yani renk değişimini sağladık.
Görüldüğü gibi birinci satır daha koyu bir renkle belirtilmiştir. Bu renkler sırayla gidecektir.
Burada ayrıca belirtmek istiyorum, artık bundan sonra diğer tüm tablo örneklerinde sınıf atayarak yani "class" değiştirerek farklı görünümler elde edeceğiz.
Posted on Utopian.io - Rewarding Open Source Contributors