css table div
Selain menggunakan HTML tag <table>, Anda juga dapat membuat table dengan menggunakan tag <div> dan CSS.
CSS menyediakan atribut display:table untuk menampilkan element HTML berbentuk table.
Berikut ini coding selengkapnya:
<html>
<head>
<title>CSS Table Div</title>
<style>
html,body{font:14px arial,verdana,san-serif;}
.container{
display:table;
width:400px;
border-collapse:collapse;
margin:0 auto;
line-height:25px;
}
.table-row:hover{background-color:#99ccff;}
.heading{
font-weight:bold;
display:table-row;
background-color:#C91622;
text-align:center;
line-height:35px;
color:#ffffff;
}
.table-row{
display:table-row;
text-align:center;
}
.strip{
display:table-row;
text-align:center;
background-color:#f0f0f0;
}
.col{
display:table-cell;
border:1px solid #CCC;
}
</style>
</head>
<body>
<h1>Membuat Table dengan CSS dan tag DIV</h1>
<hr/><br/>
<div class="container">
<div class="heading">
<div class="col">No.</div>
<div class="col">Browser</div>
</div>
<div class="table-row">
<div class="col">1</div>
<div class="col">IE</div>
</div>
<div class="table-row strip">
<div class="col">2</div>
<div class="col">Firefox</div>
</div>
<div class="table-row">
<div class="col">3</div>
<div class="col">Chrome</div>
</div>
<div class="table-row strip">
<div class="col">4</div>
<div class="col">Opera</div>
</div>
<div class="table-row">
<div class="col">5</div>
<div class="col">Safari</div>
</div>
</div>
</body>
</html>
Silakan mencoba.