W3.CSS Tabloları
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
| Bö | Nilsson | 50 |
| Mike | Ross | 35 |
W3.CSS Tablo Sınıfları
W3.CSS, tablolar için aşağıdaki sınıfları sağlar:
| Sınıf | tanımlar |
|---|---|
| w3-tablo | HTML tablosu için kapsayıcı |
| w3-çizgili | çizgili masa |
| w3-sınır | bordürlü masa |
| w3-kenarlıklı | Kenarlıklı çizgiler |
| w3 merkezli | Ortalanmış tablo içeriği |
| w3 üzerinde gezinilebilir | gezinebilir masa |
| w3-tablo-tümü | Tüm özellikler ayarlandı |
Temel Tablo
w3-table sınıfı , temel bir tabloyu görüntülemek için kullanılır:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Çizgili Masa
w3-striped sınıfı , bir tabloya zebra-şeritleri eklemek için kullanılır:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table w3-striped">
Bordürlü Masa
w3-bordered sınıfı , her tablo satırına bir alt kenarlık ekler:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table w3-bordered">
Çizgili Bordürlü Masa
Çizgili kenarlıklı bir tablo oluşturmak için w3-striped sınıfını ve w3-bordered sınıfını birleştirin :
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table w3-striped w3-bordered">
Masa Çevresi Kenarlık
w3-border sınıfı , bir tablonun etrafında bir kenarlık görüntülemek için kullanılır:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table w3-striped w3-border">
İpucu: w3 -border sınıfı yalnızca tablolar için değildir. Herhangi bir HTML öğesinde kullanılabilir!
Hepsini Görüntülemek
w3-table-all sınıfı , yukarıdaki tüm sınıfları birleştirir:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all">
Çizgileri Çevirmek
Şeritleri çevirmek için (açık gri renkle başlayın), tablo başlığı satırının etrafına bir <thead> öğesi ekleyin. Tablo başlığı satırı için kullanılacak bir renk de tanımlamanız gerekir:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
| Bö | Nilson | 35 |
Örnek
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Tüm İçeriği Merkezleme
w3 merkezli sınıf , tablonun içeriğini ortalar:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-centered">
Bir Sütunu Merkezleme
w3-center sınıfı , bir sütunun içeriğini ortalar:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Bir Sütunu Sağa Hizala
w3-right-align sınıfı , bir sütunun içeriğini sağa hizalar:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
gezinebilir masa
w3-hoverable sınıfı , fareyle üzerine gelindiğinde gri bir arka plan rengi ekler:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all
w3-hoverable">
vurgulu renkler
Belirli bir vurgulu renk istiyorsanız, her <tr> öğesine w3- hover- color sınıflarından herhangi birini ekleyin:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<tr class="w3-hover-green">
W3.CSS Sınıflarını Birleştirme
Birçok W3.CSS sınıfı, tüm HTML öğelerinde kullanılabilir.
Örneğin: kenarlık sınıfları, renk sınıfları, yazı tipi sınıfları, kart sınıfları ve daha fazlası.
Renkli Tablo Başlığı
Renkli bir satırı görüntülemek için w3- renk sınıflarından herhangi birini kullanın :
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Renkli Tablo
Renkli bir tablo görüntülemek için w3- renk sınıflarından herhangi birini kullanın :
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table w3-blue">
Duyarlı Tablo
w3'e duyarlı sınıf, duyarlı bir tablo oluşturur. Tablo daha sonra küçük ekranlarda yatay olarak kayar. Büyük ekranlarda izlerken, hiçbir fark yoktur.
Aşağıdaki tabloda efekti görmek için ekranı yeniden boyutlandırın:
| İlk adı | Soyadı | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan | Puan |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Havva | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adem | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Örnek
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Kart Olarak Tablo
Bir tabloyu kart olarak görüntülemek için bir w3-card sınıfı kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-card-4">
Minik Masa
Küçük bir tablo görüntülemek için w3-tiny sınıfını kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-tiny">
Küçük masa
Küçük bir tablo görüntülemek için w3-small sınıfını kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-small">
Büyük Masa
Büyük bir tablo görüntülemek için w3-large sınıfını kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-large">
XLarge Tablo
Bir xlarge tablosu görüntülemek için w3-xlarge sınıfını kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-xlarge">
XLBüyük Masa
Bir xxlarge tablosu görüntülemek için w3-xxlarge sınıfını kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-xxlarge">
XXXBüyük Masa
Bir xxxlarge tablosu görüntülemek için w3-xxxlarge sınıfını kullanın:
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
Örnek
<table class="w3-table-all w3-xxxlarge">
Jumbo Masa
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">