Membuat Tabel Kotak dengan Tag Div CSS
Membuat Table HTML denga Tag Div
Biasanya jika ingin membuat table pada html kita menggunakan tag <table>, <td> dan <tr>. Namun, pada css kita bisa membuat dengan tag <div>
Code HTML:
<html>
<head>
<title>CSS Table Div</title>
<link rel="stylesheet" type="text/css" href="style table div.css">
</head>
<body>
<div>
<h1>Daftar Absen Kelas XII RPL</h1>
</div>
<div><hr/><br/></div>
<div class="container">
<div class="heading">
<div class="col">No.</div>
<div class="col">Nama</div>
<div class="col">Kehadiran</div>
</div>
<div class="table-row">
<div class="col">1</div>
<div class="col">Abrar</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row strip">
<div class="col">2</div>
<div class="col">Bening</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row">
<div class="col">3</div>
<div class="col">Dimas</div>
<div id="sakit" class="col">Sakit</div>
</div>
<div class="table-row strip">
<div class="col">4</div>
<div class="col">Najla</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row">
<div class="col">5</div>
<div class="col">Najwa</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row strip">
<div class="col">6</div>
<div class="col">Rendi</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row">
<div class="col">7</div>
<div class="col">Rona</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row strip">
<div class="col">8</div>
<div class="col">Satria</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row">
<div class="col">9</div>
<div class="col">Vikas</div>
<div id="masuk"class="col">Masuk</div>
</div>
<div class="table-row strip">
<div class="col">10</div>
<div class="col">Yaser</div>
<div id="sakit" class="col">Sakit</div>
</div>
</div>
</body>
</html>
Code CSS:
body{
font:14px arial,verdana,san-serif;
background-color: grey;
font-weight: bold;
}
h1{
text-align: center;
}
.container{
display:table;
width:500px;
border-collapse:collapse;
margin:0 auto;
line-height:25px;
}
.table-row:hover{background-color:#99ccff;}
.heading{
font-weight:bold;
display:table-row;
background-color:blue;
text-align:center;
line-height:35px;
color:#ffffff;
}
.table-row{
display:table-row;
text-align:center;
background-color: white;
}
.strip{
display:table-row;
text-align:center;
background-color:#f0f0f0;
}
.col{
display:table-cell;
border:1px solid #CCC;
}
#sakit{
color: red;
}
#masuk{
color: green;
}
Hasil:
.png)
Komentar
Posting Komentar