Cara Membuat File Tabel Part 2

Membuat Tabel Menggunakan scrip HTML seperti ini terkadang sangat merepotkan dan lama karena harus di tulis secara manual lagi satu per satu dari data yang akan di tampilkan, tapi kita dapat mengakali hal tersebut dengan cara membuat tabel kosong terlebih dahulu dengan menggunakan scrip HTML, dan setelah tabel di buat baru anda mengisi data yang di butuhkan tersebut. perlu di ingat tabel di buat sebanyak data yang di perlukan.

Perhatikan scrip berikut ini :

<table border="1" style="width: 400px;">
<tbody>
<tr bg="bg" ff="ff"><td align="center"><b>Nama</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Alamat</b></td>
</tr>
<tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> </tr>
<tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> </tr>
<tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> </tr>
<tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> </tr>
</tbody></table>


Dari serangkaian scrip di atas akan menghasilkan Tabel data seperti di bawah ini :

Nama	Kelas	Alamat
kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1
kolom 1 baris 2	kolom 2 baris 2	kolom 3 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3
kolom 1 baris 4	kolom 2 baris 4	kolom 3 baris 4

Jika anda perhatikan scripdi atas dan anda pikir-pikir panjang untuk membuat tabel yang banyak, contoh seperti membuat absen kelas yang siswanya lebih dari 30. akan terlihat susah dan memusingkan kepala anda. itu kalau anda pikirkan, tetapi hal tersebut tidak perlu anda pikir karena kalau dipikir akan memusaingkan kepala melihat scrip yang banyak.

hal yang perlu anda lakukan gak usah pake mikir, adalah mencopy scrip HTML diatas dan hapus tulisan kolom dan baris, dan hapus sebagian scrip hingga seperti berikut ini :

<table border="1" style="width: 400px;">
<tbody>
<tr bg="bg" ff="ff"><td align="center"><b>Nama</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Nilai</b></td>
</tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
</tbody></table>

Maka Hasilnya akan menjadi seperti berikut ini :

Nama	Kelas	Nilai
-	-	-
-	-	-
-	-	-
-	-	-

Sehingga pada tabel kosong diatas anda akan lebih mudah untuk mengisi data yang akan anda masukkan dan tidak pusing lagi mikir scrip yang kacau beliau itu.

dan untuk menambah kolom anda tinggal mengcopi scrip ini
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>

sebanyak yang anda perlukan dan pastekan tepat dibawah scrip yang sama pada halaman HTML anda tadi sehingga jadi begini kalau scrip nya banyak :


<table border="1" style="width: 400px;">
<tbody>
<tr bg#3366ff">#E0F8E0">
<td align="center"><b>Nama</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Nilai</b></td>
</tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
 <tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
<tr> <td>-</td> <td>-</td> <td>-</td> </tr>
 </tbody></table>

dan hasilnya akan menjadi seperti  ini ni :

Nama	Kelas	Nilai
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-
-	-	-

Nah tu sudah banyak tabel nya anda sudah menjadi jauh lebih mudah untuk menyelesaikan pekerjaan anda
dan untuk merubah ketebalan dan besar nya tabel anda dapat mengganti anka yang tertera pada
<table border="1" style="width: 400px;">
semakin besar angka yang anda ganti semakin besar tabel yang anda buat.
angka yang anda ganti tersebut harus di sesuaikan dengan kebutuhan data anda . dan untuk menambah jumlah kolom anda dapat menambahkan  scrip <td>-</td>, sehingga kalau di buat contohnya menjadi seperti ini:

<table border="1" style="width: 400px;">
<tbody>
<tr bg="bg" ff="ff"><td align="center">
<b>Nama</b></td><td align="center">
<b>Kelas</b></td><td align="center">
<b>B. Indonesia</b></td><td align="center">
<b>B. Inggris</b></td><td align="center">
<b>M T K</b></td><td align="center">
<b>IPA</b></td><td align="center">
<b>Jumlah</b></td><td align="center">
</tr>
<tr> <td>-</td> <td>-</td> <td>-</td> <td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr> <td>-</td> <td>-</td> <td>-</td> <td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr> <td>-</td> <td>-</td> <td>-</td> <td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr> <td>-</td> <td>-</td> <td>-</td> <td>-</td><td>-</td><td>-</td><td>-</td></tr>
 </tbody></table>

Maka scrip HTML di atas akan menghasilkan tabel seperti berikut ini :

Nama	Kelas	B. Indonesia	B. Inggris	M T K	IPA	Jumlah
-	-	-	-	-	-	-
-	-	-	-	-	-	-
-	-	-	-	-	-	-
-	-	-	-	-	-	-
-	-	-	-	-	-	-

Nah tidak susah kan membuat tabel nya.

Kalau anda pikir susah itu akan susah dan sulit, itu kalau dipikirkan, akan tetapi saya tidak meminta anda berpikirhanya mengikuti apa yang tertulis pada halaman ini, dan agar tulisan dapat di letakkan di telah atau center anda dapat menggunakan perataan naskah yaitu pilih menu center. mudah dan gampang kan ketimbang anda melihat dan mempelajari scrip HTML yang telah anda rubah seperti tabel di atas setelah menggunakan center scrip nya menjadi seperti berikut ini :


<table border="1" style="width: 400px;">

<tbody>
<tr bg="bg" ff="ff">
<td align="center"><b>Nama</b></td>
<td align="center"><b>Kelas</b></td>
<td align="center"><b>B. Indonesia</b></td>
<td align="center"><b>B. Inggris</b></td>
<td align="center"><b>M T K</b></td>
<td align="center"><b>IPA</b></td>
<td align="center"><b>Jumlah</b></td>


</tr>
<tr> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td></tr>
<tr> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td></tr>
<tr> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td></tr>
<tr> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td><td style="text-align: center;">-</td></tr>
</tbody></table>

Terlalu panjang dan memusingkan bukan, saya aja yang lihat dah mual kepala dan pusing perut melihat nya.
untuk itu tidak perlu di pikir akan tetapi di pelajari bagaimana caranya agar lebih mudah dan lebih cepat mengerjakan nya, cari solusi terbaik dan tercepat. lebih baik membuat baru dari pada mengedit.

Sekian cara membuat File Tabel

Semoga bermanfaat bagi anda

Artikel Terkait: