HTML Tutorial - Membuat Tabel

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

Untuk lebih jelasnya maka kita akan coba menjabarkan masing-masing dari point diatas.

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>

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 attribute table="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.

Baris 1, kolom 1	Baris 1, kolom 2
Baris 2, kolom 1	Baris 2, kolom 2

Membuat Tabel dengan css border

Selain dengan attribute border="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.

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 attribute border="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.

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 :)