Membuat table multicolumn dengan div dan css
by tukangsapumasjid on Apr.16, 2009, under Css
Berikut contoh membuat tabel div yang mempunyai 10 kolom (columns) dan 2 baris (rows).
Pertama buat wadah atau container yang fungsinya bertindak sebagai table <table></table>
<div class=”container”></div>
Property cssnya sebagai berikut
.container{
width:100%; /* penuh layar mengikuti ukuran resolusi monitor, gunakan ukuran px untuk fixed */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam kondisi ukuran menggunakan px*/ /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}
Kemudian tambahkan tag baris <tr></tr> didalam tag container tadi,yang fungsinya sebagai baris
<div class=”container”>
<div class=”baris”></baris>
</div>
Property cssnya seperti berikut
.baris{
Width:100%;
}
Kemudian tambahkan tag kolom <td></td> didalam tag baris yang fungsinya sebagai kolom
.kolom{
Width:24%;
Float:left;
}
Hasilnya ntar seperti ini
![]()
<!– /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} p {mso-margin-top-alt:auto; margin-right:0in; mso-margin-bottom-alt:auto; margin-left:0in; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
Untuk menambahkan baris lainnya, baris kedua, ketiga dan seterusnya, cukup ulangi div baris beserta div kolom sebanyak baris yang diperlukan
|
About: Anton: lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
|

April 17th, 2009 on 6:28 am
murid tewel melapor kepada guru badut_asmara :hormat:
mantab bro CSS trik nya :2thumbsUP:
April 20th, 2009 on 9:43 am
hadeerrrrr.. duh dah lam gag ke BB reekkk
May 12th, 2009 on 1:36 pm
Numpang baca-baca
July 27th, 2009 on 3:44 pm
sepertinya ada yang salah bos…
seharusnya
July 27th, 2009 on 4:17 pm
div class=”baris”> baris>
jadi
div class=”baris”> /div>
riber neh gak isa nulis div pakai <
July 28th, 2009 on 10:12 am
oh iya makasih mas atas infonya
April 25th, 2010 on 7:22 pm
betul sperti kata omz xshadow ,
trus yang div class kolom
juga belum disebutin diatas ..
April 27th, 2010 on 8:15 am
oke,thanks infonya