tutorial pengembangan web terbaru
 

W3.CSS tabel

❮ Sebelumnya Berikutnya Bab ❯

Menampilkan Tabel

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67
bo Nilsson 50
mikropon ross 35

Tabel dasar

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<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>
Cobalah sendiri "

berbatasan Tabel

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-border">
Cobalah sendiri "

Tabel bergaris

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-striped">
Cobalah sendiri "

Polos Striped Tabel

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped">
Cobalah sendiri "

Perbatasan Sekitar Striped Table

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-border">
Cobalah sendiri "

Membalik Stripes

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Untuk membalik garis-garis, hanya menambahkan <thead> sekitar header tabel:

Contoh

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Cobalah sendiri "

Meja dengan Heading berwarna

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

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

tabel Warna

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-blue">
Cobalah sendiri "

Tabel Hoverable

Kelas w3-hoverable menambahkan warna latar belakang abu-abu pada mouse-over:

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Cobalah sendiri "

Jika Anda ingin warna melayang-layang tertentu, menambahkan salah satu dari w3-melayang-kelas untuk masing-masing <tr> elemen:

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<tr class="w3-hover-green">
Cobalah sendiri "

Tabel sebagai Kartu

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-card-4">
Cobalah sendiri "

Tabel responsif

Sebuah meja responsif akan menampilkan scroll bar horisontal jika layar terlalu kecil untuk menampilkan konten penuh.

Cobalah untuk mengubah ukuran layar untuk melihat efek.

Nama depan Nama keluarga poin poin poin poin poin poin poin poin poin poin poin poin poin
Jill pandai besi 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Malam jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Contoh

<div class="w3-responsive">

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

</div>
Cobalah sendiri "

Tabel kecil

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-tiny">
Cobalah sendiri "

Meja kecil

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-small">
Cobalah sendiri "

Tabel besar

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-large">
Cobalah sendiri "

XLarge Tabel

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67

Contoh

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Cobalah sendiri "

XXLarge Tabel

Nama poin
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
bo Nilson 35

Contoh

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Cobalah sendiri "

XXXLarge Tabel

Nama poin
pandai besi 50
jackson 94
Johnson 67
Nilson 35

Contoh

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Cobalah sendiri "

Jumbo Tabel

Nama poin
pandai besi 50
jackson 94
Johnson 67
Nilson 35

Contoh

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯