You Now Here »

tutorial cara Membuat table multicolumn menggunakan div dan css  (Read 4858 times - 56 votes) 

DANNY

G-Plus Author
  • ADMINISTRATOR
  • More Share Forum Topic
  • [MS] kepala suku
  • *
  • DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!
  • Rep Power: 6
  • Join: September 30, 2009
  • Posts: 11,931
  • Poin: 193.409
    • WWW
  • IP member tracker Logged


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>

Quote
Code: [Select]
<div class=”container”></div>

Property cssnya sebagai berikut



Quote
Code: [Select]
.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

Quote
Code: [Select]
<div class=”container”>

<div class=”baris”></baris>

</div>

Property cssnya seperti berikut

Quote
Code: [Select]
.baris{
Width:100%;
}

Kemudian tambahkan tag kolom <td></td> didalam tag baris yang fungsinya sebagai kolom

Quote
Code: [Select]
.kolom{
Width:24%;
Float:left;
}

Hasilnya ntar seperti ini



Quote
Code: [Select]
<!– /* 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

sumber

  :beer:


View Mobile Web Short URL: