Membuat table menggunakan tag <div> dan CSS
Sebelum ada teknologi CSS( Cascading Style Sheets ), kita sering membuat tabel menggunakan html tag <table> </table>, setelah munculnya CSS kita bisa membuat tabel menggunakan html tag <div> yang dikombinasikan dengan css. Disini html tag <div> berfungsi seperti html tag <tr> dan <td> pada <table>.
- berikut contoh tabel menggunakan html tag <table> </table>
tabel.html
<!--
<html>
<body><table align="center" cellspacing="0" cellpadding="0" width="300px"><tr bgcolor="red"><td width="100px">No</td><td width="100px">Nama</td><td width="100px">Alamat</td></tr><tr><td>1</td><td>A</td><td>AA</td></td><tr><td>2</td><td>B</td><td>BB</td></td><tr><td>3</td><td>C</td><td>CC</td></td></table></body></html>
-->
- berikut contoh tabel menggunakan <div> dan css
tablediv.html
<!--
<html>
<head><link href="tablediv.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><div id="header"><ul><li>No</li><li>Nama</li><li>Alamat</li></ul></div><div id="content"><ul><li>1</li><li>A</li><li>AA</li></ul><ul><li>2</li><li>B</li><li>BB</li></ul><ul><li>3</li><li>C</li><li>CC</li></ul></div></div></body></html>
-->
tablediv.css
#container{margin: 0 auto;width: 300px;background: #fff;}#header{background: red;padding: 0;}#header ul{margin: 0;padding: 0;}#header ul li{list-style-type: none;display: inline;padding: 0 62px 0 0;}#content{background: white;padding: 0;}#content ul{margin: 0;padding: 0;}#content ul li{list-style-type: none;display: inline;padding: 0 80px 0 0;}
Hampir gak ada bedanya kan. :D
Keunggulan menggunakan hmtl tag <div> dan CSS adalah web akan lebih ringan dan lebih dinamis.
Tapi lebih rumit.
- Contoh site menggunakan CSS dan <div>
index.html
<!--
<html>
<head><title>table div</title><link href="div.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><div id="header"><h1>vick</h1></div><div id="navigation"><ul><li><a href="#1">All</a></li><li><a href="#2">Java</a></li><li><a href="#3">General</a></li><li><a href="#4">Music</a></li></ul></div><div id="content-container"><div id="content"><h2>Page</h2><p>page</p></div><div id="aside"><h3>Profile</h3><p>profile</p></div><div id="aside"><h3>Links</h3><p>link</p></div></div><div id="footer">footer</div></div></body></html>
-->
div.css
#container{margin: 0 auto;width: 900px;background: #fff;}#header{background: #ccc;padding: 20px;}#header h1 { margin: 0; }#navigation{float: left;width: 900px;background: black;}#navigation ul{margin: 0;padding: 0;}#navigation ul li{list-style-type: none;display: inline;}#navigation li a{display: block;float: left;padding: 5px 10px;color: #fff;text-decoration: none;border-right: 1px solid #fff;}#navigation li a:hover { background: red; }#content-container{float: left;width: 900px;background: #fff;}#content{clear: left;float: left;width: 560px;padding: 20px 0;margin: 0 0 0 30px;display: inline;}
Hasil
Selamat Mencoba
Comments: