TIPS DAN TRK MEMBUAT TABEL HTML YANG PANJANG TERBARU

TIPS DAN TRK MEMBUAT
TABEL HTML YANG PANJANG

Cara membuat tabel pada halaman web dengan html saya yakin sudah banyak yang menulis, dan bagi yang sudah terbiasa bukan masalah lagi. Namun akan menjadi masalah atau paling tidak akan memerlukan waktu yang cukup panjang dan terkadang perlu konsentrasi ekstra bila tabel yang akan kita muat pada halaman web panjang dan banyak.
Untuk mengatasi masalah ini saya mempunyai trik dengan menggunakan fasilitas fungsi pada Microsoft Excel.  Tips ini saya berikan dengan asumsi anda sudah paham dengan cara membuat tabel html. Bagi pemula ada baiknya belajar terlebih dahulu tentang cara membuat tabel html .

Adapun caranya adalah :
Buatlah tabel sesuai dengan yang diinginkan pada sheet Ms Excel. Contohnya  untuk Tabel Data Siswa Baru, terlebih dahulu dibuat pada sheet Ms Excel sebegai berikut :

Tabel 1

Dalam penulisan tabel html jumlah kolom sangat menentukan.
Dari Contoh tabel di atas kita memerlukan 4 ( empat ) kolom tabel. Kalau untuk menulis satu baris saja dalam bahasa html sebagai berikut :

<table border=”1”>
<caption>DATA SISWA BARU</caption>
<tr>
<td>1</td>
<td>5274</td>
<td>AGUSTINA  AFRIANI</td>
<td>Sapri</td>
</tr>
</table>

Hasil dari pengetikan tersebut adalah :

DATA SISWA BARU

1

5274

AGUSTINA AFRIANI

Sapri

Kalau hanya untuk membuat tabel seperti di atas tentu tidak sulit. Tetapi jika kita ingin menampilkan tabel dengan data yang banyak tips dan langkah berikut mungkin bisa membantu.

Berikut adalah langkah-langkah yang harus ditempuh dengan contoh untuk mengerjakan tabel 1 untuk mengetik baris-baris berikutnya dilakukan di sheet excel dengan cara :
Pada sel E4 sampai dengan sel E7 diisi angka 1
Pada sel F3 diisi <tr>
Pada sel F4 diisi ="<td>"&E4&"</td>"
Pada sel F5 diisi ="<td>"&VLOOKUP(E5;$A$2:$D$225;2)&"</td>"
Pada sel F6 diisi ="<td>"&VLOOKUP(E5;$A$2:$D$225;3)&"</td>"
Pada sel F7 diisi ="<td>"&VLOOKUP(E7;$A$2:$D$225;4)&"</td>"
Pada sel F8 diisi </tr>

Penjelasan langkah di atas adalah
Letakkan kursor pada E4 ketik 1
Letakkan kursor pada E5 ketik 1
Letakkan kursor pada E6 ketik 1
Letakkan kursor pada E7 ketik 1
Letakkan kursor pada F3 ketik <tr>
Letakkan kursor pada F4 ketik =”<td>"& kemudian klik sel E4 selanjuntya ketik &"</td>" dan enter.

Letakkan kursor pada F5 ketik ="<td>"&VLOOKUP(, klik E5 kemudian blok area tabel yaitu A2 sampai dengan D225 , kemudian tekan keyboard F4 selanjutnya ketik ;2)&"</td>" dan enter.
Letakkan kursor pada F6 ketik ="<td>"&VLOOKUP(, klik E6 kemudian blok area tabel yaitu A2 sampai dengan D225 , kemudian tekan keyboard F4 selanjutnya ketik ;3)&"</td>" dan enter.
Letakkan kursor pada F7 ketik ="<td>"&VLOOKUP(, klik E7 kemudian blok area tabel yaitu A2 sampai dengan D225 , kemudian tekan keyboard F4 selanjutnya ketik ;4)&"</td>" dan enter.
Letakkan kursor pada F8 ketik ="</td>"

         

Gambar penulisan formula fungsi
Jika penulisan formula fungsi tersebut benar maka yang akan tampil adalah :

Selanjutnya
Langkah berikutnya :
Pada sel E10 diisi =E4+1
Pada sel E11 diisi =E5+1
Pada sel E12 diisi =E6+1
Pada sel E13 diisi =E7+1

Berikutnya
Blok/pilih  range F3 sampai dengan F8 copy paste pada sel F9
Hasilnya

Kemudian blok/pilih range E9 sampai dengan F13 copy dan paste pada sel E15, paste pada sel E21, paste pada E27 dan seterusnya sampai nomor terakhir tabel tampil pada kolom E126
tabel no 23 pada sel E126
Untuk lebih paham tentang cara di atas sebaiknya anda mempelajari tentang fungsi Vlookup.
Setelah semua langkah di atas dilakukan selanjutnya anda dapat  mencopy dari sel F3 sampai dengan F126 untuk halaman web anda. Atau untuk lebih memudahkan sebaiknya anda copy terlebih dahulu pada Notepad setelah dilengkapi dengan teks awal dan akhir ,jika dianggap sudah tepat barulah di copy pada halaman web.
Secara keseluruhan jika langkah-langkah di atas dilakukan maka pada design web sebagai berikut :
<table border=”1”>
<caption>DATA SISWA BARU</caption>

<tr>
<td>1</td>
<td>5274</td>
<td>AGUSTINA  AFRIANI</td>
<td>Sapri</td>
</tr>
<tr>
<td>2</td>
<td>5275</td>
<td>AHMAD  ZAKARIYA</td>
<td>Muhamad</td>
</tr>
<tr>
<td>3</td>
<td>5276</td>
<td>APRISA  FITRIANI</td>
<td>Achmad  Ernady</td>
</tr>
<tr>
<td>4</td>
<td>5277</td>
<td>ATIKA  SURI</td>
<td>Imran Syarif</td>
</tr>
<tr>
<td>5</td>
<td>5278</td>
<td>AYUNI</td>
<td>Hadis</td>
</tr>
<tr>
<td>6</td>
<td>5280</td>
<td>BAIQ  NOVI  HAFIZAH</td>
<td>Lalu Damir</td>
</tr>
<tr>
<td>7</td>
<td>5281</td>
<td>CITRA  DIAN  PURNAMI</td>
<td>I Wayan Artha</td>
</tr>
<tr>
<td>8</td>
<td>5282</td>
<td>DESI  PURNAWATI</td>
<td>I Made Putra</td>
</tr>
<tr>
<td>9</td>
<td>5283</td>
<td>DIAH  AYU  PURWANTI</td>
<td>Wahyu Suprapto</td>
</tr>
<tr>
<td>10</td>
<td>5284</td>
<td>EVY  JUNIARTI</td>
<td>Marsah</td>
</tr>
<tr>
<td>11</td>
<td>5285</td>
<td>EVRIANA  MARISA</td>
<td>M. Saleh</td>
</tr>
<tr>
<td>12</td>
<td>5286</td>
<td>FAIZATUL  RAHMI</td>
<td>Sudirman</td>
</tr>
<tr>
<td>13</td>
<td>5287</td>
<td>FAUZIAH</td>
<td>Rumesah</td>
</tr>
<tr>
<td>14</td>
<td>5288</td>
<td>FEBRIYANI  NURMAYANTI</td>
<td>Muhammad Nur</td>
</tr>
<tr>
<td>15</td>
<td>5289</td>
<td>FIRDA  AZIZAH</td>
<td>Junaidi</td>
</tr>
<tr>
<td>16</td>
<td>5290</td>
<td>HAIRI  PRAMUJI</td>
<td>Mahsun</td>
</tr>
<tr>
<td>17</td>
<td>5291</td>
<td>HARDIANTI</td>
<td>Japri</td>
</tr>
<tr>
<td>18</td>
<td>5292</td>
<td>HENDRA  HARI  PUTRA</td>
<td>Budi Sujana</td>
</tr>
<tr>
<td>19</td>
<td>5294</td>
<td>I  PUTU  JATMIKA</td>
<td>I Wayan Eka Subagia</td>
</tr>
<tr>
<td>20</td>
<td>5295</td>
<td>INDI  NIRWANA</td>
<td>Suherman</td>
</tr>
<tr>
<td>21</td>
<td>5296</td>
<td>KHAERUL  FATWA</td>
<td>Abdul Jalil</td>
</tr>
<tr>
<td>22</td>
<td>5297</td>
<td>KURNIAWATI  BUANASARI</td>
<td>Imran ,A.MA</td>
</tr>
<tr>
<td>23</td>
<td>5298</td>
<td>LENI  SURANITA</td>
<td>AM.Sidik Daeng</td>
</tr>
</table>

Related Posts:

Tweet