Halo kawan, gimana kabarnya ? semoga baik-baik saja. Beberapa hari ini saya tidak post artikel karena ada kesibukan di dunia nyata. Baiklah, kali ini kita akan membahas tutorial HTML sederhana yang mana kita akan membuat tabel dengan border dan tanpa border. Semoga kawan bisa paham dengan penjelasan saya. Dan berikut point dari artikel kali ini.
- Membuat Tabel di HTML
- Membuat Tabel dengan border
- Membuat Tabel dengan css border
- Membuat Tabel dengan tanpa border
Membuat Tabel di HTML
Untuk membuat tabel di html kita menggunakan tag<table>...</table>. Didalam tabel tentu ada
baris dan kolom. Untuk membuat baris di dalam tabel kita menggunakan
tag <tr>...</tr> dan untuk membuat kolom
kita gunakan tag <td>...</td>. Lebih
jelasnya kawan bisa melihat kode di bawah ini.
Tabel di HTML
<table>
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
Dari kode di atas maka akan menghasil seperti dibawah ini.
| Baris 1, kolom 1 | Baris 1, kolom 2 |
| Baris 2, kolom 1 | Baris 2, kolom 2 |
Membuat Tabel dengan border
Untuk membuat tabel dengan border kita akan menambahkan attributetable="1" di dalam tag <table>...</table> maka tagnya akan menjadi <table border="1">...</table>. Agar lebih memudahkan pemahaman kawan berikut kode HTML untuk membuat tabel dengan border.
Tabel dengan border
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
Dari script di atas akan menghasilkan seperti dibawah ini.
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
| Baris 1, kolom 1 | Baris 1, kolom 2 |
| Baris 2, kolom 1 | Baris 2, kolom 2 |
Membuat Tabel dengan css border
Selain dengan attributeborder="1", kita juga bisa menggunakannya dengan penambahan css border: 1px solid #333 di dalam tag tabel tersebut. Perhatikan kode di bawah ini.
Tabel dengan css border
<table>
<tr>
<td style="border: 1px solid #333">Baris 1, kolom 1</td><td style="border: 1px solid #333">Baris 1, kolom 2</td>
</tr>
<tr>
<td style="border: 1px solid #333">Baris 2, kolom 1</td><td style="border: 1px solid #333">Baris 2, kolom 2</td>
</tr>
</table>
Dan lihat tabel yang di hasilkan dari css di bawah ini.
<tr>
<td style="border: 1px solid #333">Baris 1, kolom 1</td><td style="border: 1px solid #333">Baris 1, kolom 2</td>
</tr>
<tr>
<td style="border: 1px solid #333">Baris 2, kolom 1</td><td style="border: 1px solid #333">Baris 2, kolom 2</td>
</tr>
</table>
| Baris 1, kolom 1 | Baris 1, kolom 2 |
| Baris 2, kolom 1 | Baris 2, kolom 2 |
Membuat Tabel tanpa border
Untuk membuat tabel tanpa border kita bisa menghapus attributeborder="1" atau kita ganti dengan border="0", tag yang dihasilkan bisa menjadi <table border="0"> atau <table>. Keduanya akan sama tidak menghasilkan tabel tanpa border. Lihat script di bawah ini.
Tabel tanpa border
<table border="0">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
Dari script di atas akan menghasilkan seperti dibawah ini.
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
| Baris 1, kolom 1 | Baris 1, kolom 2 |
| Baris 2, kolom 1 | Baris 2, kolom 2 |
Kawan bisa berkreasi dengan script tabel di atas dengan menggunakan kreatifitas kawan. Saya lebih menyarankan dengan css karena lebih bagus dan juga mudah diaturnya.
Sekian artikel tentang tutorial HTML tentang Membuat Tabel dengan border dan tanpa border. Semoga bisa bermanfaat bagi kawan, dan jika kawan tidak keberatan silahkan bagikan artikel ini dengan klik tombol bagikan di bawah. Salam dan terima kasih :)
