tutorial pengembangan web terbaru
 

CSS tabel

❮ Sebelumnya Bab selanjutnya ❯

Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:

Perusahaan Kontak Negara
Alfreds Futterkiste Maria Anders Jerman
Berglunds snabbkop Christina Berglund Swedia
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Perdagangan pulau Helen Bennett UK
Koniglich Essen philip Cramer Jerman
Tertawa Bacchus Winecellars Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Italia

tabel Borders

Untuk menentukan batas tabel dalam CSS, menggunakan border properti.

Contoh di bawah menetapkan perbatasan hitam untuk <table> , <th> , dan <td> elemen:

Contoh

table, th, td {
   border: 1px solid black;
}
Cobalah sendiri "

Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena kedua meja dan <th> dan <td> elemen memiliki perbatasan terpisah.

Runtuh Table Borders

The border-collapse properti menetapkan apakah perbatasan tabel harus runtuh ke dalam perbatasan tunggal:

Contoh

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Cobalah sendiri "

Jika Anda hanya ingin perbatasan di sekitar meja, hanya menentukan border properti untuk <table> :

Contoh

table {
    border: 1px solid black;
}
Cobalah sendiri "

Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh width dan height sifat.

Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:

Contoh

table {
    width: 100%;
}

th {
    height: 50px;
}
Cobalah sendiri "

Penyelarasan horisontal

The text-align properti menetapkan alignment horizontal (seperti kiri, kanan, atau tengah) dari konten dalam <th> atau <td> .

Secara default, isi dari <th> elemen pusat-blok dan isi dari <td> elemen yang tersisa-blok.

Berikut contoh kiri meluruskan teks dalam <th> elemen:

Contoh

th {
    text-align: left;
}
Cobalah sendiri "

Keselarasan vertikal

The vertical-align properti menetapkan alignment vertikal (seperti atas, bawah, atau tengah) dari konten dalam <th> atau <td> .

Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).

Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:

Contoh

td {
    height: 50px;
    vertical-align: bottom;
}
Cobalah sendiri "

tabel Padding

Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, gunakan padding properti pada <td> dan <th> elemen:

Contoh

th, td {
    padding: 15px;
    text-align: left;
}
Cobalah sendiri "

pembagi horisontal

Nama depan Nama keluarga Tabungan
Peter Grifon $ 100
Lois Grifon $ 150
Joe Swanson $ 300

Tambahkan border-bottom properti untuk <th> dan <td> untuk pembagi horisontal:

Contoh

th, td {
    border-bottom: 1px solid #ddd;
}
Cobalah sendiri "

Tabel Hoverable

Gunakan :hover pemilih pada <tr> untuk menyorot baris tabel pada mouse:

Nama depan Nama keluarga Tabungan
Peter Grifon $ 100
Lois Grifon $ 150
Joe Swanson $ 300

Contoh

tr:hover {background-color: #f5f5f5}
Cobalah sendiri "

Tabel bergaris

Nama depan Nama keluarga Tabungan
Peter Grifon $ 100
Lois Grifon $ 150
Joe Swanson $ 300

Untuk tabel zebra bergaris, menggunakan nth-child() pemilih dan menambahkan background-color untuk semua bahkan (atau ganjil) baris tabel:

Contoh

tr:nth-child(even) {background-color: #f2f2f2}
Cobalah sendiri "

tabel Warna

Contoh di bawah menentukan warna latar belakang dan teks warna <th> elemen:

Nama depan Nama keluarga Tabungan
Peter Grifon $ 100
Lois Grifon $ 150
Joe Swanson $ 300

Contoh

th {
    background-color: #4CAF50;
    color: white;
}
Cobalah sendiri "

Tabel responsif

Sebuah meja responsif akan menampilkan scroll bar horisontal jika layar terlalu kecil untuk menampilkan konten lengkap:

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

Menambahkan elemen kontainer (seperti <div> ) dengan overflow-x:auto sekitar <table> elemen untuk membuatnya responsif:

Contoh

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Cobalah sendiri "
contoh

Contoh lebih

Membuat meja mewah
Contoh ini menunjukkan bagaimana untuk membuat tabel mewah.

Mengatur posisi judul tabel
Contoh ini menunjukkan bagaimana posisi tabel keterangan.

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»

CSS Table Properties

Milik Deskripsi
border Set semua properti perbatasan dalam satu deklarasi
border-collapse Menentukan apakah atau tidak batas tabel harus runtuh
border-spacing Menentukan jarak antara batas sel yang berdekatan
caption-side Menentukan penempatan judul tabel
empty-cells Menentukan apakah atau tidak untuk menampilkan perbatasan dan latar belakang pada sel kosong di meja
table-layout Set algoritma tata letak yang akan digunakan untuk tabel

❮ Sebelumnya Bab selanjutnya ❯