Tutorial Dasar CSS
CSS Style
CSS Advanced
Referensi CSS Lainnya
Populer
Terbaru

CSS Tabel

Dengan CSS, Anda dapat membuat tampilan tabel lebih menarik. Berikut property yang digunakan untuk memberi tampilan menarik pada tabel.

Border Pada Tabel

Untuk memberikan border pada tabel, gunakan property border.

Contoh

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

Coba »

Lebar dan Tinggi Tabel

Untuk memberikan lebar dan tinggi pada tabel gunakan property width dan height.

Contoh dibawah, tabel akan diset dengan lebar 100% dan tinggi 50px.

Contoh

table
{
width:100%;
}
th
{
height:50px;
}

Coba »

Text Alignment (Posisi Teks) Pada Tabel

Untuk mengubah posisi teks pada tabel, property yang digunakan ialah text-align dan vertical align.

Property text-align digunakan untuk mengubah posisi horizontal, seperti ke kiri, kanan atau tengah.

Contoh

td
{
text-align:right;
}

Coba »

Property vertical-align digunakan untuk mengubah posisi vertical, seperti ke atas, bawah atau middle.

Contoh

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

Coba »

Padding Pada Tabel

Untuk mengatur spasi antara border dan konten tabel di dalam tabel, digunakan property padding pada elemen td atau th.

Contoh

td
{
padding:15px;
}

Coba »

Warna Tabel

Contoh dibawah, border, teks dan background pada tabel akan diberikan warna.

Contoh

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Coba »