Cara Membuat Tabel HTML yang Bagus dan Mudah, Coba yuk!

Cara membuat tabel HTML yang bagus sangat sederhana dan bahkan orang yang tidak mengerti sistem koding rumit dapat mempelajarinya dengan mudah. Anda dapat belajar membuat website HTML termasuk gambar, tabel, dan lain sebagainya.

Apa Saja Kode HTML?

Ada beberapa kode yang harus Anda mengerti untuk dapat membuat tabel dengan baik di HTML. Pada umumnya ada 3 elemen utama, akan tetapi penting juga untuk mengetahui beberapa kode lainnya.

• <table> merupakan kode untuk membuat tabel secara keseluruhan>

• <tr> adalah kode untuk membuat baris dalam sebuah tabel

• <td> adalah kode untuk membuat kolom pada tabel dalam html

Ketiganya merupakan elemen utama dalam membuat sebuah tabel. Akan tetapi, Anda dapat menggunakan berbagai elemen dank ode lainnya untuk menghias dan membuat tabel menjadi lebih indah.

Beberapa kode tersebut diantaranya:

• <th> adalah untuk dapat membuat judul ada header

• <tbody> dapat membungkus tubuh tabel

• <thead> dapat membungkus bagian kepala dari tabel

Cara Membuat Tabel HTML yang Bagus

Selanjutnya Anda dapat membuat tabel HTML sederhana dengan menggunakan contoh kode berikut ini. Pertama bukalah program html di dalam laptop. Hampir semua PC atau laptop mempunyai program ini karena merupakan program coding sederhana.

Coba ketikkan kode berikut ke dalam tabel halaman tersebut sehingga nanti ketika menjalankannya akan muncul sebuah tabel.

<table border=”1”>
<tr>
		<td>Murid Nilainya Lebih dari 60</td>
		<td>Murid Nilainya Kurang dari 60</td>
</tr>
<tr>
		<td>Siswa Memiliki Nilai Lebih dari 80</td>
		<td> Siswa Memiliki Nilai Kurang dari 80</td>
</tr>
</table>

Angka 1 dalam border tadi menunjukkan garis tabel yang Ada gunakan. Semakin besar angkanya, maka garis juga akan semakin tebal. Dari kode tersebut, Anda mendapatkan sebuah tabel dengan sosok sebagai berikut:

Begitu seterusnya apabila Anda ingin membuat koding tabel ke bawah. Jika ingin membuat row maka dapat meneruskannya dengan membuka gunakan kode <tr>. Selalu tutup row baru yang Anda buka dengan menggunakan kode (/) yaitu </tr>.

Mengatur Jarak Teks dengan Garis

Dalam tabel yang sudah ada diatas, maka Anda dapat membuat dan mengatur jarak dalam kolom agar tulisan tidak terlalu sempit ke dalam garis. Sehingga dapat lebih nyaman melihat tabel tersebut. Hal ini mirip dengan cara membuat kotak di HTML. 

Caranya adalah dengan menggunakan cellpadding. Anda tinggal menambahkan kode cellpadding pada bagian border. Adapun caranya adalah sebagai berikut:

<table border=”1” cellpading=”20”>

Maka contoh tabel yang Anda dapatkan akan menjadi seperti berikut ini.

Mewarnai Tabel

Anda juga dapat memberikan warna pada tabel dengan menggunakan kode. Caranya sangat mudah juga dengan menambahkan sisipan coding pada bagian pembuka tabel <tr>. Untuk lebih jelasnya maka, Anda bisa tambahkan kode berikut ini.

<table border=”1”>

<tr bgcolor=”yellow”>

Anda juga dapat menambahkan pada baris yang kedua 

<tr bgcolor=”green”>

		<td>Baris 2 kolom 1</td>

Maka selanjutnya tabel yang Anda dapatkan akan seperti ini

Kedepannya bahkan Anda juga bisa mempelajari cara membuat tabel gambar HTML sehingga tampilan tabel menjadi lebih menarik.

Penutup

Itulah cara membuat tabel HTML yang bagus dengan berbagai kode untuk dapat menghiasnya. Sebenarnya ada cara mudah dengan menggunakan CSS seiring dengan perkembangan jaman. Akan tetapi, untuk pemula lebih baik menggunakan kode-kode tersebut karena sangat mudah untuk memahaminya.