Tabel CSS ~ KODELOVER

Tampilan tabel HTML bisa sangat ditingkatkan dengan CSS:Hubungi Perusahaan Negara

Perusahaan	Kontak	Kota
PT. Angin Ribut	Indro	Jakarta
PT. Sukses jaya	Budianto Nugroho	Bandung
PT. Tukang Cendol	Dadang dudung	Garut

Untuk menentukan batas tabel di CSS, gunakan properti border.Contoh di bawah ini menentukan batas hitam untuk elemen <table>, <th>, dan <td>:

namadepan	namabelakang
Budi	Nugroho
Dadang	dudung

Contoh

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

Perhatikan bahwa tabel pada contoh di atas memiliki batas ganda. Ini karena kedua table dan elemen <t> dan <td> memiliki batas yang terpisah.Tutup Perbatasan TabelProperti yang runtuh di perbatasan menentukan apakah batas tabel harus runtuh ke satu perbatasan:

namadepan	namabelakang
Budi	Nugroho
Dadang	dudung

Contoh

table {
border-collapse: collapse;
}

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

Jika Anda hanya menginginkan sebuah perbatasan di sekeliling table, cukup tentukan properti perbatasan untuk <table>:

namadepan	namabelakang
Budi	Nugroho
Dadang	dudung

Contoh

table {
border: 1px solid black;
}

Tabel Lebar dan Tinggi
Lebar dan tinggi tabel didefinisikan oleh sifat lebar dan tinggi.Contoh di bawah ini menetapkan lebar tabel menjadi 100%, dan tinggi elemen <th> menjadi 50px:

namadepan	namabelakang	tabungan
Budi	Nugroho	Rp. 50.000
Dadang	Dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Contoh

table {
width: 100%;
}

th {
height: 50px;
}

Penyelarasan horisontal
Properti text-align menyetel kesejajaran horizontal (seperti kiri, kanan, atau tengah) dari konten di <th> atau <td>.Secara default, konten elemen <-> dilipat tengah dan konten elemen <td> dibiarkan sejajar.Contoh berikut kiri-menyelaraskan teks di elemen <th>:

Namadepan	Namabelakang	Tabungan
Budi	Nugroho	Rp. 50.000
Dadang	Dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Contoh

th {
text-align: left;
}

Keselarasan vertikal
Properti vertikal-sejajar menetapkan keselarasan vertikal (seperti atas, bawah, atau tengah) dari konten di <th> atau <td>.Secara default, penyelarasan vertikal konten dalam tabel tengah (untuk elemen <th> dan <td>).Contoh berikut mengatur alignment teks vertikal ke bawah untuk elemen <td>:

Namadepan	Namabelakang	Tabungan
Budi	Nugroho	Rp. 50.000
Dadang	Dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Contoh

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

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

Namadepan	Namabelakang	Tabungan
Budi	Nugroho	Rp. 50.000
Dadang	Dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Contoh

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

Pembagi horisontal

First Name	Last Name	Savings
Budi	Nugroho	Rp. 50.000
dadang	dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Tambahkan properti border-bottom ke <th> dan <td> untuk pembatas horizontal:Contoh

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

Tabel Hoverable
Gunakan pemilih: hover pada <tr> untuk menyoroti baris tabel pada mouse di atas:

First Name	Last Name	Savings
Budi	Nugroho	Rp. 50.000
Dadang	Dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Contoh

tr:hover {background-color: #f5f5f5}

Tabel bergaris

First Name	Last Name	Savings
Budi	Nugroho	Rp. 50.000
Dadang	Dudung	Rp. 500.000
Eva	Nurajijah	Rp. 100.000

Untuk tabel bergaris zebra, gunakan pemilih nth-child () dan tambahkan warna latar belakang ke semua baris tabel (atau ganjil):Contoh

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

Warna tabel
Contoh di bawah ini menentukan warna latar belakang dan warna teks elemen <th>:
Rp. 500.000

First Name	Last Name	Savings
Budi	Nugroho	Rp. 50.000
Dadang	dudung
Eva	nurajijah	Rp. 100.000

Contoh

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

Tabel Responsif
Tabel responsif akan menampilkan scroll bar horizontal jika layar terlalu kecil untuk menampilkan isi penuh:

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Budi	Nugroho	50	50	50	50	50	50	50	50	50	50	50	50
Eva	Nurajijah	94	94	94	94	94	94	94	94	94	94	94	94
Dadang	Dudung	67	67	67	67	67	67	67	67	67	67	67	67

Tambahkan elemen kontainer (seperti <div>) dengan overflow-x: kencangkan elemen <table> untuk membuatnya responsif:Contoh

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

<table>
... isi tabel ...
</table>

</div>

Properti Tabel CSS
Border Mengatur semua properti border dalam satu deklarasi
Border-collapse Menentukan apakah batas tabel harus roboh atau tidak
Border-spacing Menentukan jarak antara batas sel yang berdekatan
Caption-side Menentukan penempatan caption tabel
empty-cell Menentukan apakah akan menampilkan batas dan latar belakang pada sel kosong dalam sebuah tabel
Table-layout Menetapkan tata letak algoritma yang akan digunakan untuk tabel

KODELOVER

Tabel CSS

Related Post