Membuat Tabel dengan HTML

Pada dasarnya HTML merupakan struktur dalam membuat suatu program maupun aplikasi berbasis web. HTML seperti halnya kerangka dari sebuah pondasi rumah yang belum didesain. Jadi, HTML wajib ada dalam membangun sebuah pemrogramn karena merupakan kerangka dalam merancang website kita. Pada tutorial kali ini saya akan berbagi tutorial membuat tabel dengan html.

Tabel dalam HTML adalah komponen yang sangat penting untuk dipahami. Dalam membuat sebuah aplikasi berbasis web, tabel sangat sering dipakai oleh para developer terutama dalam menampilkan data baik secara statis atau dinamis. yang akan dibuat pada tutorial ini adalah cara membuat tabel sederhana yang datanya langsung kita masukkan secara manual. berikut adalah cara membuat tabel dengan html yaitu :
  1. Buka text editor (vscode, sublime, atom, dll), Teks editor yang saya pakai ini menggunakan vscode.
  2. Buat file bernama index.html, dengan klik menu file > New File > Ctrl+S
  3. Ketikkan perintah berikut (dipraktekkan dulu sbelum dicopas ya wkwk), dan jangan lupa disave
  4. Buka File yang telah dibuat tadi melalui web browser, dan hasilnya sebagai berikut :

Penjelasan Tutorial

Nama Tag Attribut Keterangan / Fungsi
<html>
   <head>
       <title> Belajar Tabel dengan HTML </title>
   </head>
   <body>
        <!– Disini tempat menaruh konten / isi –>
   </body>
</html>
Struktur standar pada pembuatan layout html
<table> border=”0″ , cellpadding=”5″, cellspacing=”0″ Membuat struktur tabel
  • Border : Membuat tebal pada garis tabel
  • Cellpadding: Menentukan Jarak isi sel dengan garis (border)
  • Cellspacing: Menentukan jarak antar sel
<tr> Table Row : Membuat baris tabel
<th> Table Head : Membuat judul tabel
<td> Tabel Data : Membuat isi tabel
<!– Membuat komentar pada html
isi dari komentar ini tidak dieksekusi / tidak ditampilkan
Mudah Bukan ? Masih banyak lagi yang akan dipelajari pada HTML ini dan akan terus berlanjut, simak terus dan ikuti tutorial selanjutnya. jika masih ada yang belum berhasil mempraktekkannya, kalian dapat melihat tutorial di video berikut.

2 comments
  1. indra
    indra
    9 October 2019 at 6:15 pm

    mantaapp

    Reply
    • Trisna N
      Trisna N • Post Author •
      9 October 2019 at 6:21 pm

      terimakasih atas apresiasinya

      Reply
Leave a Reply

Your email address will not be published. Required fields are marked *