Cara Membuat Tabel HTML dan Contoh Coding HTML untuk Praktek Langsung

0
2494
Cara Membuat Tabel HTML dan Contoh Coding HTML untuk Praktek Langsung
Cara Membuat Tabel HTML dan Contoh Coding HTML untuk Praktek Langsung

Bidhuan.id – Cara membuat tabel HTML? Pastinya bagi anda yang sudah berkecimpung di dunia ilmu komputer khususnya untuk fokus pada pengembangan web, tentu saja sudah sangat paham ya sobat. Ilmu tersebut juga bisa membantu dalam proses mendalami penggunaan laptop, karena pada dasarnya ilmu komputer saling berkoneksi antara satu dengan yang lain sehingga bisa menciptakan perkembangan digital yang hebat di era modern seperti sekarang ini.

Belajar Membuat Tabel HTML
Belajar Membuat Tabel HTML

HTML bisa dikatakan sebagai akar tumbuhnya web sampai sekarang ini yang masih terus diupayakan perkembangannya agar lebih mudah lagi proses pembuatannya. Bisa anda lihat saat ini, pengembang website tidaklah sembarang orang dan bisa dihitung dengan jari berapa teknisi ahli yang mampu menguasai web secara menyeluruh. Hal ini dipengaruhi oleh adanya faktor seperti pengetahuan dasar tentang pemrogramman dan juga skill penguasaan logika. Untuk itu cara membuat tabel HTML tidak sembarang orang yang menguasainya.

Baca juga kemdikbud berikan panduan sistem rating video game untuk orang tua

Perlu anda ketahui sebelum adanya pengembangan teknik membangun web dengan menggunakan CSS di sekitar tahun 2000 – an (tahun milenium), hampir semua programmer menggunakan HTML untuk membuat tabel – tabel sehingga terciptalah sebuah web. Sayangnya penggunaan HTML sendiri dirasa kurang efektif jika digunakan untuk membuat banyak tabel yang rumit sobat.

Prosesnya akan memakan waktu yang lama dan belum lagi jika terjadi error, pusingnya bukan maen mencari kesalahannya ada dimana. Kemudian dengan munculnya CSS pembuatan web menjadi lebih simpel lagi meskipun masih belum sempurna seperti halnya jika menggunakan PHP yang merupakan generasi penerus HTML dan juga CSS. Sudah simpel makin simpel ya sobat. Semua ini perlu penulis sampaikan agar anda tahu bagaimana perkembangan pembuatan web dari masa ke masa sehingga ilmu komputer anda menjadi semakin luas.

Melihat kemudahan – kemudahan yang sekarang ini ditawarkan pada ulasan di atas, tujuannya tidak bukan hanya sekedar pengetahuan sebagai ilmu dasar saja, yang penulis ingin bahas lebih detail lagi ialah cara membuat tabel HTML. Yuk sobat simak penjelasan lengkapnya di bawah ini :

Persiapkan 3 Tag Utama Sebagai Dasar Pembuatan Tabel

Tag Pada HTML
Tag Pada HTML

Untuk membuat tabel di HTML anda wajib mengerti tentang tag – tag yang akan digunakan terlebih dahulu ya sobat. Agar nantinya anda tahu apa maksud dan tujuannya menggunakan tag – tag tersebut. Tag – tag yang penulis maksudkan antara lain sebagai berikut :

  • <table>
  • <tr>
  • <td>

Nah setelah anda menggunakan ketiga tag tersebut, anda juga wajib mengetahui pasangannya sobat, tanpa adanya pasangan ketiga tag di atas tidak akan berfungsi. Tidak hanya manusia saja yang berpasang – pasangan ya ternyata, tag saja juga ikut berpasangan. Inilah pasangan tag yang dibutuhkan, antara lain sebagai berikut :

  • </table>
  • </tr>
  • </td>

Tag yang dituliskan tanpa slash digunakan sebagai pembuka, sedangkan tag yang dituliskan dengan slash digunakan sebagai penutupnya. Jadi tag – tag tersebut menjadi tersusun sempurna sobat. Berikut terdapat contoh penulisan tag – tag yang benar dalam proses pembuatan sebuah tabel dengan menggunakan HTML.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border=”1″>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>

Pahami Fungsi Masing – Masing Tag yang Digunakan

Fungsi Tag Pada HTML
Fungsi Tag Pada HTML

Saat anda sudah mengetahui tag – tag yang akan digunakan dalam proses pembuatan tabel HTML, selanjutnya anda wajib mengetahui apa saja fungsi dari masing – masing tag tersebut. Pengetahuan mengenai fungsi akan sangat bermanfaat dalam menyusun kodingan yang teramat banyak. Coba saja anda bayangkan, bagaimana tabel HTML yang anda inginkan bisa tampil dengan baik, jika fungsi tag – tagnya saja tidak tau. Taunya hanya berupa kode berpasang – pasangan yang penulis bahas pada poin pertama.

Baca juga akhirnya punya sosmed setelah gabungkan buddypress dan bbpress

Tentukan Lembar Kerja yang Akan Digunakan

Lembar Kerja Notepad dan Notepad++
Lembar Kerja Notepad dan Notepad++

Kali ini penulis menyarankan untuk menggunakan lembar kerja Notepad atau Notepad ++ sebagai software pendukung proses perancangan tabel HTML. Keduanya memang sangat membantu proses perancangan tabel, namun jika anda ingin lebih mudah, sebaiknya gunakan saja Notepad ++. Karena jika terdapat ketidak sesuaian, lembar kerja tersebut akan segera memberikan tanda, entah itu kode garis atau pun warna, sehingga anda langsung menyadari sebelum masalah fatal terjadi.

Sebaliknya penggunakan lembar kerja Notepad, tidak memberikan peringatan – peringatan otomatis, sehingga anda tidak akan tau dari awal jika terjadi kesalahan. Hal ini tentu saja akan sangat merugikan jika kesalahan terjadi, khususnya pada saat pencariannya diperlukan kesabaran ekstra dan banyak waktu yang terbuang.

Perhatikan Susunan dan Struktur Koding

Susunan Pengkodingan yang Baik
Susunan Pengkodingan yang Baik

Untuk menentukan letak tabel di sisi mana akan ditampilkan, berapa jumlah tabel, ukuran tabel dan komponen lainnya, diperlukan keahlian dalam mengelola koding. Susunan dan struktur yang baik dalam pengkodingan akan sangat berpengaruh terhadap hasil yang ditampilkan pada browser saat dijalankan sobat.

Tentukan Browser Mana yang Akan Digunakan

Pemilihan Browser yang Tepat
Pemilihan Browser yang Tepat

Browser yang akan digunakan untuk mencoba menjalankan koding yang sudah anda buat sangat penting sobat. Pilihlah browser yang anda rasa nyaman dan pengoperasiannya cepat. Agar nantinya diharapkan saat proses menjalankan akan lebih mudah tanpa kendala suatu apapun (istilahnya user friendly).

Misalnya saja menggunakan Mozilla Firefox, penulis dulu saat masih belajar di bangku kuliah, pertama kali dosen mengenalkan Mozilla Firefox sebagai browser yang cukup nyaman dan compatible untuk dipakai dalam menjalankan pengkodingan yang telah dibuat. Hanya saja Mozilla Firefox tidak semulus yang diajarkan, ada beberapa komputer keluaran pabrikan tertentu lemot saat menjalankan browser tersebut. Intinya menggunakan browser mana saja boleh, yang penting nyaman sobat.

Proses Menjalankan Lembar Kerja HTML
Proses Menjalankan Lembar Kerja HTML

Seperti yang sudah penulis jelaskan bahwasannya untuk menjalankan lembar kerja HTML yang sudah anda buat di Notepad ++, sudah tersedia di lembar kerja tersebut. Caranya pun sangat mudah, anda hanya perlu cari fungsi run yang berada di deretan atas tampilan lembar kerja Notepad ++, kemudian klik kiri ya sobat. Nanti akan muncul beberapa pilihan browser yang bisa anda gunakan sesuai dengan kenyamanan anda saat menggunakannya. Pilihannya antara lain sebagai berikut :

  • Launch in Firefox
  • Launch in IE (Internet Explorer)
  • Launch in google Chrome
  • Launch in Safary

Dengan menggunakan Notepad ++ ternyata anda sangat dimanjakan ya sobat, berbagai kemudahan pun ditawarkan untuk mendukung kinerja anda. Sehingga hasilnya pun bisa maksimal seperti yang anda inginkan atau pun anda bayangkan. Jika menginginkan mendapatkan hasil tabel yang baik sebaiknya anda buat rancangannya terlebih dahulu, selanjutnya ide tersebut baru anda tuangkan pada barisan – barisan kode. Dengan demikian kinerja akan menjadi lebih cepat dan terstruktur dan tentu saja versi tampilan webnya akan sama dengan yang sudah anda buat rancangan. Tetap semangat ya sobat!

Penulis yakin anda yang sering menggunakan browser untuk menunjang aktivitas harian, pasti pernah mengalami hal yang buruk. Misalnya saja proses pencarian sangat lemot dan ujung – ujungnya not responding. Uhhhh…ini yang membuat kesal ya sobat, sudah lama – lama menunggu ternyata zonk karena tidak bisa berjalan dengan baik.

Bisa diambil kesimpulan dari ulasan di atas sobat, proses membangun sebuah software khususnya berbasis web, langkah demi langkahnya wajib anda perhatikan dengan baik untuk mendapatkan hasil yang maksimal. Pasalnya tanpa adanya ketekunan, website yang menarik dan berkualitas tampaknya akan sulit untuk dikembangkan.

Kemudian bagi anda yang masih pemula jika mengikuti dan memperhatikan langkah demi langkah yang sudah penulis ajarkan, Insya Allah anda akan paham dalam waktu yang relatif singkat. Namun untuk pembelajaran kodingnya wajib memperbanyak latihan. Di kesempatan lain doakan saja penulis bisa membahas kodingannya lebih detail lagi.

Mungkin tidak banyak informasi yang bisa penulis berikan pada kesempatan kali ini mengenai cara membuat tabel HTML. Namun harapan besar dari penulis tetap ada untuk memberikan sedikit manfaat bagi sobat semua. Mohon maaf atas segala kekurangan dan keterbatasan ilmu yang penulis miliki. Semoga pada kesempatan selanjutnya kita bisa berjumpa kembali dengan pembahasan – pembahasan yang lebih menarik lagi. Terima kasih atas perhatian anda. Salam hangat selalu dari penulis. Tetap semangat untuk menebar manfaat antar sesama.

BACA JUGA