Membuat tabel dinamis dengan tag <table> sebenarnya benar-benar merupakan pain in the ass solusi sangat terbatas pada menampilkan tabel saja. Karena saya ingin menggunakan form dinamis (seperti tubular input) dimana setiap barisnya merupakan form, hal ini tidak dapat dilakukan. Karena <table> tag hanya mendukung tag <tr>, <th>, <td>, <caption>, <col>, <colgroup>, <thead>, <tfoot>, dan <tbody>. Karena hal ini, usaha saya dalam membuat form di dalam <tr> menjadi sia-sia.
Baiklah, untuk membuat table dari sebuah div, maka tentunya kode kita akan terdiri dari style dan badan yang berupa tabel. Berikut kodenya
<style>
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
<div class="Cell">
<p>Heading 4</p>
</div>
<div class="Cell">
<p>Heading 5</p>
</div>
<div class="Cell">
<p>Heading 6</p>
</div>
<div class="Cell">
<p>Heading 7</p>
</div>
<div class="Cell">
<p>Heading 8</p>
</div>
<div class="Cell">
<p>Heading 9</p>
</div>
<div class="Cell">
<p>Heading 10</p>
</div>
<div class="Cell">
<p>Heading 11</p>
</div>
<div class="Cell">
<p>Heading 12</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
<div class="Cell">
<p>Row 1 Column 4</p>
</div>
<div class="Cell">
<p>Row 1 Column 5</p>
</div>
<div class="Cell">
<p>Row 1 Column 6</p>
</div>
<div class="Cell">
<p>Row 1 Column 7</p>
</div>
<div class="Cell">
<p>Row 1 Column 8</p>
</div>
<div class="Cell">
<p>Row 1 Column 9</p>
</div>
<div class="Cell">
<p>Row 1 Column 10</p>
</div>
<div class="Cell">
<p>Row 1 Column 11</p>
</div>
<div class="Cell">
<p>Row 1 Column 12</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
<div class="Cell">
<p>Row 1 Column 4</p>
</div>
<div class="Cell">
<p>Row 1 Column 5</p>
</div>
<div class="Cell">
<p>Row 1 Column 6</p>
</div>
<div class="Cell">
<p>Row 1 Column 7</p>
</div>
<div class="Cell">
<p>Row 1 Column 8</p>
</div>
<div class="Cell">
<p>Row 1 Column 9</p>
</div>
<div class="Cell">
<p>Row 1 Column 10</p>
</div>
<div class="Cell">
<p>Row 1 Column 11</p>
</div>
<div class="Cell">
<p>Row 1 Column 12</p>
</div>
</div>
</div>
Itulah tadi cara menampilkan <div> sebagai pengganti <table> yang sangat berguna ketika anda ingin membuat tubular input yang lebih fleksibel.
SUMBER: http://www.dummies.com/how-to/content/using-the-div-tag-to-create-tables.html