Cara Membuat Tabel di Html, Lengkap dan Mudah

Palingit.com – Ketika kamu membuat suatu website, kadang kamu memerlukan kolom untuk kebutuhan tertentu, misalnya data siswa, atau yang lainnya. Namun bagi kamu yang masih tahap pemula dalam dunia pemrograman, cara membuat tabel di HTML mungkin masih agak membingungkan.

Maklum saja, karena dalam bahasa pemrograman, semuanya berdasarkan kode, sehingga tak sembarangan orang bisa membuatnya. Seseorang harus menghafal atau mengetahui kode tertentu sesuai kebutuhan pembuatan projek.

Nah, sebelum membahas lebih jauh mengenai cara membuat tabel dengan bahasa HTML yuk, berkenalan dulu dengan html.

Pengertian HTML

Dari segi bahasa, HTML memiliki kepanjangan Hypertext Markup Language. Secara sederhana, html adalah salah satu bahasa pemrograman yang berfungsi untuk membuat suatu website, di mana nantinya halaman website tersebut dapat diakses melalui mesin pencarian atau browser.

Sebagaimana pengertiannya bahwa HTML adalah singkatan dari Hypertext Markup Language, masing-masing kata tersebut memiliki arti yang saling melengkapi.

Hypertext adalah metode yang difungsikan untuk pergi dari halaman web ke halaman web lainnya dengan cara mengeklik simbol atau tulisan yang tersedia. Lalu markup adalah suatu kinerja dari tag html terhadap teks yang berada di dalam tag-nya.

Sedangkan kata yang terakhir adalah language yang berarti bahasa pemrograman yang berupa tak-tak tertentu, kemudian diterjemahkan ke dalam teks atau visual yang dapat Anda dilihat dalam halaman web.

Mengenal Komponen HTML

Agar kamu tidak bingung dalam mengikuti langkah-langkah membuat tabel di dalam HTML, kamu harus kenal terlebih dahulu dengan komponen yang ada pada HTML. Ada tiga komponen dalam HTML, yaitu Tak, Elemen, dan Atribut.

1. Tag

Tag adalah tanda awal dan akhir dari perintah HTML yang akan dideteksi oleh web browser. Tag dalam HTML menggunakan kurung kaku, yang mana di dalam kurung tersebut adalah nama tagnya.

Misalkan tag bold <b>, di mana tag ini akan memerintahkan browser untuk menampilkan teks yang tebal.

2. Elemen

Elemen adalah komponen dari HTML yang semua kode tag pembuka hingga tag penutup. Ini sebabnya, elemen berisikan teks dan simbol yang terdiri tag pembuka, konten, dan tag penutup.

Contoh simpel dari elemen adalah: <bold>Belajar Tabel HTML</bold>.

3. Atribut

Atribut adalah informasi tambahan yang berada pada elemen. Fungsi dari atribut ini adalah memberikan ketegasan instruksi tag pada elemen. Misalkan atribut berikut:

<img src=”gambar.png”alt”Mobil Sport”>.

tag <img> mempunyai atribut sendiri, yakni (src) dan (alt) yang berarti browser harus menampilkan gambar.png dengan alt text “Mobil Sport”. Atribut sendiri ada yang hanya dapat digunakan pada tag-tag tertentu saja, namanya adalah atribut khusus, yaitu:

• Atribut (src) hanya dapat digunakan pada tag <img>, <embed>, <audio>, dan <iframe>.
• Atribut (href) hanya dapat digunakan di tag <a> dan <link>.
• Atribut (action) hanya dapat digunakan pada tag <form>.
• Atribut (autoplay) hanya dapat digunakan di tag <audio> dan <video>.

Cara Membuat Tabel di Html

Setelah kamu cukup berkenalan, saatnya untuk membuat tabel yang kamu butuhkan menggunakan HTML

1. Membuat Tag

Dalam pembuatan tabel melalui HTML, setidaknya ada 4 tag yang harus kamu buat. Tag-tag tersebut adalah tak <table>, tak <thead>, tag <tbody>, dan tak <tfoot>, yang mana masing-masing memiliki perannya sendiri-sendiri.

• Tag <table> berperan sebagai kontainer
• tag <thead> berfungsi sebagai tempat untuk meletakkan judul atau nama kolom yang berada di baris pertama/paling atas.
• tag <tbody> berfungsi untuk area menampilkan data
• Sedangkan tag <tfoot> berfungsi untuk membuat bagian terakhir atau yang paling bawah dari tabel, biasa juga disebut dengan “footer”.

Keempat tak tersebut merupakan kerangka dasar untuk membuat suatu tabel. Adapun untuk membuat baris dan kolom, kamu memerlukan 3 tag, yaitu tag <tr>, tag <td>, dan tag <th>.

tag <tr> berfungsi untuk membuat baris (tabel row). Adapun tag <td> berperan sebagai tempat membuat sel (table data). Sedangkan tag <th> berfungsi untuk membuat judul dalam header (table head).

Langsung saja kita aplikasikan sebagai berikut:

Maka tampilan di halaman webnya akan seperti ini:

Dalam tahap ini memang belum ada garisnya, karena belum ditambahkan atribut border di tabelnya. Untuk itu, berikan atribut border=”1” di dalam tag <table>. Seperti ini:

Maka akan muncul garis sebagai berikut:

2. Mengatur Jarak Sell dengan Atribut Cellpadding

Atribut cellpadding merupakan atribut yang digunakan untuk mengatur jarak antara teks dengan garis dalam sel. Masukkan atribut cellpadding ke dalam tag <table> setelah atribut border seperti berikut ini:

Angka 10 setelah cellpadding adalah ukuran jarak teks dan garis. Sehingga akan menghasilkan jarak seperti ini:

3. Memberikan Warna pada Sel dan Baris

Tabel tak akan menarik jika tak ada warna di setiap sel dan barisnya. Oleh karena itu untuk menambahkan warna berikan atribut bgcolor pada tag <td> atau tag <tr>. Lihat gambar berikut ini:

Untuk mengisi warna pada atribut bgcolor, kamu bisa isi dengan nama warna dalam bahasa Inggris atau kode warna tertentu yang bisa kamu cari di Google. Jika nilai atribut bgcolor kamu isikan seperti di atas, maka akan menghasilkan warna sebagai berikut:

4. Cara Menggabungkan Sel Tabel

Ada dua atribut yang digunakan untuk menggabungkan sel tabel, yaitu atribut rowspan dan atribut colspan. Adapun atribut rowspan berguna untuk menggabungkan baris, sedangkan atribut colspan berfungsi untuk menggabungkan kolom.

Dua atribut tersebut dapat kamu masukkan di tag <td> dan <th> seperti berikut ini:

 

Sehingga akan menghasilkan tabel sebagai berikut:

 

5. Menambahkan Elemen Lain dalam Sel

Dalam tabel tertentu ada yang membutuhkan berbagai visual dalam selnya. Jika itu termasuk dalam kebutuhanmu juga, kamu dapat menambahkan elemen html berupa gambar, video, atau link di dalam sel <td> atau <th>. Misalnya seperti gambar di bawah.

Maka, kamu akan menghasilkan tabel yang memiliki elemen gambar sebagai berikut:

Fungsi HTML

Sebenarnya banyak sekali fungsi dari bahasa pemrograman HTML. Akan tetapi berikut ini fungsi-fungsi utama dari HTML:

• Membuat halaman web jadi lebih mudah dipahami dan dibaca oleh pengguna.
• Menampilkan semua informasi pada suatu browser
• Memberikan tanda teks di sebuah halaman, dalam halaman dokumen HTML disisipi dengan tag  atau kode tertentu  dengan fungsinya masing-masing. Misalnya tag <b> </b> yang membuat teks di dalamnya menjadi tebal. tag <i> </i> membuat teks di dalamnya menjadi miring. Dan masih banyak lagi.
• Untuk dasar dalam pembuatan website, pastinya semua website didesain dengan memiliki banyak fitur, yang mana fitur-fitur tersebut dibuat menggunakan bahasa pemrograman Javascript, CSS, PHP. Akan tetapi semua bahasa tersebut hanya bisa diterapkan jika website tersebut didasari dengan bahasa pemrograman HTML.
• Memunculkan visual gambar, video dan masih banyak lagi di halaman website.
• Dengan kode HTML tertentu, ini berguna untuk membuat link yang menuju menu web lainnya atau menuju halaman web lainnya.
• Menandai elemen serta membuat formulir digital. Selain itu bahasa pemrograman HTML juga berfungsi sebagai penanda pada bagian-bagian dalam website, misalnya adalah header, navigation, footer, main, dan lain sebagainya.

Demikianlah ulasan lengkap mengenai cara membuat tabel di HTML yang mudah dan lengkap. Semua akan terasa sulit jika baru pertama mencoba, namun akan menjadi mudah jika sering kamu berlatih. Semoga bermanfaat.