Tabel W3.CSS
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| mike | Ross | 35 |
Kelas Tabel W3.CSS
W3.CSS menyediakan kelas-kelas berikut untuk tabel:
| Kelas | Mendefinisikan |
|---|---|
| w3-tabel | Wadah untuk tabel HTML |
| bergaris w3 | meja bergaris |
| w3-perbatasan | Meja berbatas |
| berbatasan w3 | Garis berbatas |
| berpusat pada w3 | Isi tabel terpusat |
| w3-hoverable | Meja melayang |
| w3-tabel-semua | Semua properti ditetapkan |
Tabel Dasar
Kelas w3-table digunakan untuk menampilkan tabel dasar:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 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>
Meja bergaris
Kelas bergaris-w3 digunakan untuk menambahkan garis-garis zebra ke tabel:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table w3-striped">
Tabel Berbatasan
Kelas yang berbatasan dengan w3 menambahkan batas bawah ke setiap baris tabel:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table w3-bordered">
Meja Bergaris Bergaris
Gabungkan kelas bergaris w3 dan kelas berbatas w3 untuk membuat tabel bergaris batas:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table w3-striped w3-bordered">
Perbatasan di Sekitar Meja
Kelas w3-border digunakan untuk menampilkan perbatasan di sekitar tabel:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table w3-striped w3-border">
Tip: Kelas w3-border tidak hanya untuk tabel. Ini dapat digunakan pada elemen HTML apa pun!
Menampilkan semuanya
Kelas w3-table-all menggabungkan semua kelas di atas:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all">
Membalik Garis-garis
Untuk membalik garis (mulai dengan warna abu-abu muda), tambahkan elemen <thead> di sekitar baris header tabel. Anda juga harus menentukan warna yang akan digunakan untuk baris header tabel:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | nilson | 35 |
Contoh
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Memusatkan semua Konten
Kelas yang berpusat pada w3 memusatkan konten tabel:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-centered">
Memusatkan satu Kolom
Kelas w3-center memusatkan konten kolom:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Rata Kanan satu Kolom
Kelas w3-right-align menyelaraskan konten kolom:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Meja yang Dapat Dilayangkan
Kelas w3-hoverable menambahkan warna latar belakang abu-abu saat mouse-over:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all
w3-hoverable">
Arahkan Warna
Jika Anda menginginkan warna hover tertentu, tambahkan salah satu kelas warna w3-hover- ke setiap elemen <tr>:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<tr class="w3-hover-green">
Menggabungkan Kelas W3.CSS
Banyak kelas W3.CSS dapat digunakan pada semua elemen HTML.
Misalnya: kelas perbatasan, kelas warna, kelas font, kelas kartu, dan lainnya.
Tajuk Meja Berwarna
Gunakan salah satu kelas warna w3- untuk menampilkan baris berwarna:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Meja Berwarna
Gunakan salah satu kelas warna w3- untuk menampilkan tabel berwarna:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table w3-blue">
Tabel Responsif
Kelas w3-responsive membuat tabel responsif. Tabel kemudian akan bergulir secara horizontal pada layar kecil. Saat melihat di layar besar, tidak ada perbedaan.
Ubah ukuran layar untuk melihat efek pada tabel di bawah ini:
| Nama depan | Nama keluarga | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| malam | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Contoh
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Meja sebagai Kartu
Gunakan kelas kartu w3 untuk menampilkan tabel sebagai kartu:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-card-4">
Meja Kecil
Gunakan kelas w3-tiny untuk menampilkan tabel kecil:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-tiny">
Meja kecil
Gunakan kelas w3-small untuk menampilkan tabel kecil:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-small">
Meja Besar
Gunakan kelas w3-besar untuk menampilkan tabel besar:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-large">
Tabel XLbesar
Gunakan kelas w3-xlarge untuk menampilkan tabel xlarge:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-xlarge">
XXLTabel Besar
Gunakan kelas w3-xxlarge untuk menampilkan tabel xxlarge:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-xxlarge">
XXXMeja Besar
Gunakan kelas w3-xxxlarge untuk menampilkan tabel xxxlarge:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
Contoh
<table class="w3-table-all w3-xxxlarge">
Meja Jumbo
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">