Pengenalan CSS Styling Tables

Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
 

Perusahaan	Kontak	Negara
Alfreds Futterkiste	Maria Anders	Jerman
Berglunds snabbköp	Christina Berglund	Swedia
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Pulau Perdagangan	Helen Bennett	Inggris
Königlich 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 menentukan batas 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 tabel dan <th> dan <td> elemen memiliki perbatasan yang terpisah.

---

Perkecil Tabel 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 Horizontal

The text-align properti menetapkan alignment horizontal (seperti kiri, kanan, atau tengah) dari konten dalam <th> atau <td>.
Secara default, isi dari <th> elemen adalah pusat-aligned dan isi dari <td> elemen yang tersisa-blok.
Contoh berikut 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 »

Table Color

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

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Contoh :

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

  Cobalah sendiri »

Selebihnya kamu Pelajari sendiri di dokumentasi resminya http://www.w3schools.com/css/css_table.asp

---

Share: