Tutorial Html Table Lengkap terperinci

Baca Juga

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 1	menu 2	menu 3
bagian 1	bagian 2	bagiqn 3
bagian 4	bagian 5	bagian 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. 

Menu		No.
cek 1	cek 2	1.
isi 1	isi 2	2.

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.