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:
<div class="divTable">
<div class="divTableRow">
<div class="divTableCellhd">Judul 1</div>
<div class="divTableCellhd">Judul 2</div>
<div class="divTableCellhd">Judul 3</div>
<div class="divTableCellhd">Judul 4</div>
</div>
<div class="divTableRow">
<div class="divTableCell">Isi baris 1 kolom 1</div>
<div class="divTableCell">Isi baris 1 kolom 2</div>
<div class="divTableCell">Isi baris 1 kolom 3</div>
<div class="divTableCell">Isi baris 1 kolom 4</div>
</div>
<div class="divTableRow">
<div class="divTableCell">Isi baris 2 kolom 1</div>
<div class="divTableCell">Isi baris 2 kolom 2</div>
<div class="divTableCell">Isi baris 2 kolom 3</div>
<div class="divTableCell">Isi baris 2 kolom 4</a>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">Isi baris 3 kolom 1</div>
<div class="divTableCell">Isi baris 3 kolom 2</div>
<div class="divTableCell">Isi baris 3 kolom 3</div>
<div class="divTableCell">Isi baris 3 kolom 4</div>
</div>
</div>
Selanjutnya buat style CSS nya,
.divTable {
width: 100%;
display: table;
-webkit-box-shadow: 1px 1px 1px 1px #888888;
box-shadow: 1px 1px 1px 1px #888888;
}
.divTableRow {
width: 100%;
height: 100%;
display: table-row;
}
.divTableCell {
padding:5px;
width: 25%;
height: 100%;
display: table-cell;
border: 1px solid #808080;
}
.divTableCellhd {
background-color: #4a6b82;
color: #fff;
padding:5px;
width: 25%;
height: 100%;
display: table-cell;
border: 1px solid #808080;
}
.divTable .divTableRow:nth-child(odd) {
background-color: #aad4ff;
}
.divTable .divTableRow:hover {
background-color: #FBEDBB;
}
Untuk demonya bisa di buka disini
Semoga bermanfaat..
BERIKUT INI MERUPAKAN LANGKAH CARA MEMBUAT TABEL DENGAN DIV DI CSS SELAIN CARA DI ATAS
Brikut contoh pembuatan table tanpa menggunakan tag HTML <table> melainkan menggunakan tag <div>.
Buatlah tag HTML seperti berikut :
<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/>
<divclass="container">
<divclass="heading">
<divclass="col">No.</div>
<divclass="col">Browser</div>
</div>
<divclass="table-row">
<divclass="col">1</div>
<divclass="col">IE</div>
</div>
<divclass="table-row strip">
<divclass="col">2</div>
<divclass="col">Firefox</div>
</div>
<divclass="table-row">
<divclass="col">3</div>
<divclass="col">Chrome</div>
</div>
<divclass="table-row strip">
<divclass="col">4</div>
<divclass="col">Opera</div>
</div>
<divclass="table-row">
<divclass="col">5</div>
<divclass="col">Safari</div>
</div>
</div>
</body>
</html>
Silakan mencoba.