Tutorial Html Table Lengkap terperinci

October 02, 2018
Contoh Table full kode
Html Code 1.1
Html source kode Memahami table secara detail terperinci - dalam pelajaran Html kode sebelumnya telah di pelajari tentang tutorial hml table namun dalam pelajaran kali ini kita akan bahas secara lebih detail tentang pembuatan table secara terperinci beserta bagian bagian table tersebut.

Mari kita mulai pembahasan kode html table tersebut dengan kode kode dan bagian terpentig dari table serta bagaimana kita medesain table tersebut dengan tepat dan bersetandarSEO.

Hal pertaman yang perlu kita pahami adalah kerangka table, oh ya sebelum kita mulai kita harus tau dulu untuk apa table tersebut.

  • Untuk membuat model dan struktur
  • Untuk pengelompokan data
  • Memudahkan dalam pemilihan data


Untuk tujuan table selengkapnya mungkin teman teman sering bermain Ms word dan excel, excel merupakan programs yang berisi pengelompokan pengelompokan data.


Mari kita mulai belajar excel dengan lengkap.

kerangka pokok table

Pokok Kerangka table
xxxx
data
xxxx


Hasil script table seperti ini. 


data

kemudian untuk cara pembuatan colom dan baris table seperti ini.

Pokok Kerangka table
 <table border="1px solid black">
  <tr>
  <th>Menu 1</th>
  <th>menu 2</th>
  <th>menu 3</th>
  </tr>
  <tr>
  <td>bagian 1</td>
  <td>bagian 2</td>
  <td>bagiqn 3</td>
  </tr>
  <tr>
  <td>bagian 4</td>
  <td>bagian 5</td>
  <td>bagian 6</td>
  </tr>
  </table>


Hasilnya seperti ini. 


Menu 1menu 2menu 3
bagian 1bagian 2bagiqn 3
bagian 4bagian 5bagian 6

untuk membari barna dan color table serta ketebalan dan tepi seperti ini.

Example table komplit
<table border="1px solid black" style="width:300px;border-collapse:collapse;">
  <tr style="background:silver;color:black">
  <th colspan="2">Menu</th>
  <th>No.</th>
  </tr>
  <tr align="center">
  <td>cek 1</td>
  <td>cek 2</td>
  <td>1.</td>
  </tr>
  <tr align="center">
  <td>isi 1</td>
  <td>isi 2</td>
  <td>2.</td>
  </tr>
  </table>


Hasilnya seperti ini. 


MenuNo.
cek 1cek 21.
isi 1isi 22.

pelajaran html table sudah saya terangkan secara bertahap sengaja agar lebih memahami, sebenarnya masih ada penambahan fungsi seperti background-image, font yang bisa di tambahkan di fungsi style.

Namun hal tersebut sudah bisa terbayangkan oleh teman teman untuk modul Html table tersebut, untuk kreasi selanjutnya silahkan anda kembangkan sendiri.

Cukup sekian dan terima kasih.

Share this

Related Posts

Previous
Next Post »