styling

Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
Korespondensi Perusahaan Negara
Alfreds Futterkiste Maria Anders Jerman
Berglunds snabbköp Christina Berglund Swedia
Centro comercial Montezuma 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
Utara / Selatan Simon Crowther Inggris
Paris spécialités Marie France Bertrand
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

tabel Borders

Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.

Contoh di bawah ini menetapkan batas hitam untuk meja, th, dan elemen td:
contoh
tabel, th, td {
    border: 1px solid hitam;
}

Cobalah sendiri »

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

Untuk menampilkan perbatasan tunggal untuk meja, menggunakan properti border-collapse.
runtuh Borders

Properti border-collapse mengatur apakah perbatasan tabel runtuh ke dalam perbatasan tunggal atau terpisah:
contoh
tabel {
     border-collapse: collapse;
}

tabel, th, td {
     border: 1px solid hitam;
}

Cobalah sendiri »

Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh lebar dan tinggi sifat.

Contoh di bawah ini menetapkan lebar tabel sampai 100%, dan tinggi elemen th ke 50px:
contoh
tabel {
     width: 100%;
}

th {
     height: 50px;
}

Cobalah sendiri »

Tabel Teks Keselarasan

Teks dalam tabel sejajar dengan text-align dan properti vertical-align.

Properti text-align menetapkan alignment horisontal, seperti kiri, kanan, atau tengah:
contoh
td {
     text-align: right;
}

Cobalah sendiri »

Properti vertical-align menetapkan alignment vertikal, seperti atas, bawah, atau tengah:
contoh
td {
     height: 50px;
     vertical-align: bottom;
}

Cobalah sendiri »

tabel Padding

Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, menggunakan properti padding di td dan th elemen:
contoh
td {
     padding: 15px;
}

Cobalah sendiri »

tabel Warna

Contoh di bawah ini menentukan warna perbatasan, dan warna teks dan latar belakang elemen th:
contoh
meja, td, th {
     border: 1px solid hijau;
}

th {
     background-color: green;
     warna: putih;
}