En son web geliştirme öğreticiler
 

W3.CSS Tablolar

❮ Önceki Sonraki Bölüm ❯

Bir Tablo gösteriliyor

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67
Bö Nilsson 50
mikrofon Ross 35

Temel Tablo

İsim Soyadı makas
Jill demirci 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>
Kendin dene "

bordered Tablo

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-border">
Kendin dene "

Çizgili Masa

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-striped">
Kendin dene "

Bordürlü Çizgili Masa

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped">
Kendin dene "

Bir Çizgili Tablo Çevresinde Sınır

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-border">
Kendin dene "

Stripes lanetleme

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Çizgileri çevirmek için, sadece eklemek <thead> tablo başlığındaki etrafında:

Örnek

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Kendin dene "

Bir renkli başlıklı Tablo

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Kendin dene "

Tablo Renkleri

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-blue">
Kendin dene "

Hoverable Tablo

W3-hoverable sınıf Fare ile üzerine gri arka plan rengini ekler:

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Kendin dene "

Belirli bir vurgulu bir renk istiyorsanız, her w3-vurgulu-sınıfların herhangi eklemek <tr> elemanı:

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<tr class="w3-hover-green">
Kendin dene "

Bir Kart olarak Tablo

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-card-4">
Kendin dene "

duyarlı Masa

Ekran tam içeriğini görüntülemek için çok küçükse bir tepki tablo yatay kaydırma çubuğunu görüntüler.

etkisini görmek için ekrana yeniden boyutlandırmak için deneyin.

İsim Soyadı makas makas makas makas makas makas makas makas makas makas makas makas makas
Jill demirci 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Havva Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adem Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Örnek

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Kendin dene "

Minik Masa

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-tiny">
Kendin dene "

Küçük masa

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-small">
Kendin dene "

Büyük Tablo

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-large">
Kendin dene "

XLarge Masa

İsim Soyadı makas
Jill demirci 50
Havva Jackson 94
Adem Johnson 67

Örnek

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Kendin dene "

XXLarge Masa

isim makas
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Örnek

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Kendin dene "

XXXLarge Masa

isim makas
demirci 50
Jackson 94
Johnson 67
Nilson 35

Örnek

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Kendin dene "

Jumbo Tablo

isim makas
demirci 50
Jackson 94
Johnson 67
Nilson 35

Örnek

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Kendin dene "

❮ Önceki Sonraki Bölüm ❯