Nah... Kali ini kita akan membuat sebuah Tabel yang sangat sederhana menggunakan Text Editor yang sobat punya, seperti Notepad, Notepad++, Sublime Text 3, dan lain-lain.
Coba Kalian copy dan paste kode dibawah ini ke Text Editor kalian dan simpan dengan nama tabel.html
<head>
</head>
<body>
<table border="1">
<tr>
<td>No</td>
<td>Nama</td>
</tr>
<tr>
<td>1.</td>
<td>Agus Stiawan</td>
</tr>
<tr>
<td>2.</td>
<td>Ridlo Suhardi</td>
</tr>
<tr>
<td>3.</td>
<td>Naufal Alief</td>
</tr>
</table>
</body>
</html>
</head>
<body>
<table border="1">
<tr>
<td>No</td>
<td>Nama</td>
</tr>
<tr>
<td>1.</td>
<td>Agus Stiawan</td>
</tr>
<tr>
<td>2.</td>
<td>Ridlo Suhardi</td>
</tr>
<tr>
<td>3.</td>
<td>Naufal Alief</td>
</tr>
</table>
</body>
</html>
Setelah kalian copy dan kalian simpan, coba jalankan file tersebut di browser kalian. Sudah?. Ini adalah contoh hasil dari kode HTML diatas.
| No | Nama |
| 1. | Agus Stiawan |
| 2. | Ridlo Suhardi |
| 3. | Naufal Alief |
Penjelasan :
<table border="1">
<table> merupakan tag untuk membuat suatu tabel. Sedangkan "border" merupakan garis tepi dari tabel tersebut, nilai satuannya ada pixel dan biasanya ditulis dengan "px". Semakin besar nilai pada border, maka semakin tebal juga garis pada border. Tapi, bagaimana jika kita tidak menuliskan border di dalam tag <table> ?. Jika kita tidak menuliskan border, maka hasilnya akan menjadi seperti ini :
| No | Nama |
| 1. | Agus Stiawan |
| 2. | Ridlo Suhardi |
| 3. | Naufal Alief |
Nah... Selain properti border, ada juga properti "cellpadding", Kegunaannya adalah untuk mengatur jarak tulisan pada tabel. Cara penulisannya sama seperti border <table border="1" cellpadding="10">. Isi nilai properti cellpadding dengan angka. Semakin besar nilai pada cellpadding, maka semakin besar juga ukuran pada tabel kita. Ini merupakan perbedaan tabel yang menggunakan cellpadding dengan tabel yang tidak menggunakan cellpadding. cellpaddingnya saya coba isi dengan angka 10.
| No | Nama |
| 1. | Agus Stiawan |
| 2. | Ridlo Suhardi |
| 3. | Naufal Alief |
| No | Nama |
| 1. | Agus Stiawan |
| 2. | Ridlo Suhardi |
| 3. | Naufal Alief |
Berbeda bukan?
<tr>
<td>No</td>
<td>Nama</td>
</tr>
<td>No</td>
<td>Nama</td>
</tr>
<tr> merupakan tag yang digunakan untuk membuat baris baru pada sebuah tabel. Sedangkan <td> merupakan tag yang digunakan untuk membuat colom baru. Adapun tag <th> yang fungsinya hampir sama dengan tag <td>. Perbedaannya adalah tag <td> menuliskan teks tanpa dekorasi kecuali ditambahkan skrip dibelakang tag <td.... >, sedangkan <th> memiliki teks dekorasi bold dan rata tengah/align center.
Sekian pembahasan dari Cara Membuat Tabel Menggunakan Text Editor. Terima kasih.
0 komentar