CSS Table

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}
table th{
  font-weight:bold;
}
table tr:nth-of-type(ogg){
  color:#ccc;
  background:#f9f9f9;
}
table tr:nth-of-type(even){
  color:#fff;
  background:green;
}


Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS.



tabel Borders

Untuk menentukan batas tabel dalam CSS , menggunakan properti border. Contoh di bawah ini menetapkan border hitam untuk table, th , dan elemen td :


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


Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda . Hal ini karena kedua tabel , th , dan elemen td memiliki batas yang terpisah. Untuk menampilkan perbatasan tunggal untuk table, unakan properti border-collapse.



Collapse Borders

Properti border-collapse mengatur apakah border tabel dimasukan ke dalam border tunggal atau terpisah :


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


Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh sifat width dan height. Contoh di bawah ini menetapkan lebar tabel sampai 100% , dan tinggi elemen th 50px :


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


Tabel Keselarasan

Teks dalam tabel sejajar dengan properti text-align dan vertical-align. Properti text-align diatur dengan alignment horisontal, seperti kiri, kanan, atau tengah:


td
{
text-align : right;
}


Properti vertical-align mengatur posisi alignment vertikal , seperti atas, bawah , atau tengah :


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


tabel Padding

Untuk mengontrol ruang antara border dan konten dalam sebuah tabel, gunakan properti padding di td dan elemen th :


td
{
padding: 15px;
}


tabel Warna

Contoh di bawah ini menentukan warna border, teks dan warna latar belakang dari elemen th :


table , td , th
{
border: 1px solid green; } th { background-color : green; color: white; }
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda