Selain menggunakan HTML tag , Anda juga dapat membuat table dengan menggunakan tag
CSS menyediakan atribut display:table untuk menampilkan element HTML berbentuk table.
Berikut ini coding selengkapnya:
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
melainkan menggunakan tag
Buatlah tag HTML seperti berikut :
<html>
<head>
<title>CSS Table Divtitle>
<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 DIVh1>
<hr/><br/>
<divclass="container">
<divclass="heading">
<divclass="col">No.div>
<divclass="col">Browserdiv>
div>
<divclass="table-row">
<divclass="col">1div>
<divclass="col">IEdiv>
div>
<divclass="table-row strip">
<divclass="col">2div>
<divclass="col">Firefoxdiv>
div>
<divclass="table-row">
<divclass="col">3div>
<divclass="col">Chromediv>
div>
<divclass="table-row strip">
<divclass="col">4div>
<divclass="col">Operadiv>
div>
<divclass="table-row">
<divclass="col">5div>
<divclass="col">Safaridiv>
div>
div>
body>
html>
Silakan mencoba.
