Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Html 10 Feb 2025 5 min read

Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML

Erick Iwansyah
Erick Iwansyah
Author
22 views

Hai lagi! Gimana belajarnya? Semoga makin lancar, ya. Kali ini kita akan bahas cara membuat tabel di HTML. Tabel sering digunakan untuk menampilkan data dalam bentuk yang rapi dan terstruktur, misalnya jadwal, daftar harga, atau statistik. Yuk, kita bahas dari dasar sampai ke cara mempercantiknya!

Struktur Dasar Tabel di HTML

Di HTML, tabel dibuat dengan tag

. Di dalamnya, ada beberapa elemen penting:

(Table Row): Untuk membuat baris tabel.
    • dan .

    Contoh:
    

    
 (Table Data): Untuk membuat sel (isi tabel).

    		•  (Table Header): Untuk membuat sel judul di tabel.


    Contoh Dasar:
    

    

    

    
  
    
    Nama
    Umur
    Pekerjaan
  
    
  
    
    Ani
    25
    Dokter
  
    
  
    
    Budi
    30
    Guru
  
    

    

    

    

    

    Hasilnya di browser:
    

    


    
Nama
Umur
Pekerjaan

    

    
Ani
25
Dokter

    

    
Budi
30
Guru

    


    

    Keterangan:
    

      

    		 biasanya digunakan untuk header tabel (judul kolom). Teksnya otomatis tebal dan rata tengah.

    		•  digunakan untuk data biasa (isi).

  • Atribut border="1" menambahkan garis tepi pada tabel (ini opsional).
    • 


    

    Menambahkan Header dan Footer pada Tabel
    

    Kalau tabelmu punya banyak baris, kamu bisa tambahkan bagian header atau footer supaya lebih jelas. Gunakan 
    
  
    
    
      Nama
      Umur
      Pekerjaan
    
    
      
  
    
    
      Total: 2 Orang
    
    
      
  
    
    
      Ani
      25
      Dokter
    
    
    
    
      Budi
      30
      Guru
    
    
      

    


    

    

    Hasilnya:
    Tabel dengan header di atas dan footer di bawah.
    

    

    Menggabungkan Sel dengan colspan dan rowspan
    

    Kadang kamu perlu menggabungkan beberapa kolom atau baris di tabel. Gunakan atribut colspan (menggabungkan kolom) atau rowspan (menggabungkan baris).
    

    Contoh:
    

    

    

    
  
    
    Nama
    Informasi
  
    
  
    
    Ani
    25
    Dokter
  
    
  
    
    Budi
    30
    Guru
  
    
  
    
    35
    Dosen
  
    

    

    

    

    

    Hasilnya:
    

    


    
Nama
Informasi

    

    
Ani
25
Dokter

    

    
Budi
35
Guru

    

    
35
Dosen

    


    

    

    Mempercantik Tabel dengan CSS
    

    Tabel bawaan HTML mungkin terlihat biasa aja. Tambahkan gaya dengan CSS untuk mempercantik tampilannya.
    

    Contoh:
    

    

    

    
  
    
    
      Nama
      Umur
      Pekerjaan
    
    
      
  
    
    
      Ani
      25
      Dokter
    
    
    
    
      Budi
      30
      Guru
    
    
      

    

    

    

    

    Hasilnya: Tabel lebih rapi dengan garis halus dan warna latar bergantian.
    

    

    Praktik Langsung
    

    Coba buat file baru dan tambahkan kode berikut:
    

    

    

    

  
    
    Belajar HTML: Tabel
  
  
    
    Tabel Sederhana
    

    
    
      
        
    
          Nama
          Umur
          Pekerjaan
        
    
          
      
        
    
          Ani
          25
          Dokter
        
    
        
    
          Budi
          30
          Guru
        
    
          
    
    
  


    

    

    

    Simpan dan buka file ini di browser. Tabel sederhana akan muncul.
    

    

    Tantangan untuk Kamu
    

      

    1. Buat tabel untuk jadwal harian kamu (misalnya Senin sampai Minggu).
      2. 

    2. Tambahkan fitur seperti header, footer, dan penggabungan sel.
      3. 

    3. Eksperimen dengan CSS untuk memperindah tampilan tabel.
      4. 

    

    

    Membuat tabel di HTML itu penting banget buat menampilkan data dengan rapi. Artikel ini membahas dasar-dasarnya sebelum kamu lanjut ke tutorial berikutnya di www.code80vity.com.
                    
    

                
                            
    
        
    

        
                    
    
                
    Tutorial Terkait
    
                
    
                                        
    
                        
    
                            
    
                                
                                    Html
                                
                                6 months ago
                            
    
                            
                            
    
                                
                                    Belajar HTML #6: Membuat Formulir  di HTML
                                
                            
    
                            
                            
    Halo teman-teman! Semoga kalian semua sehat dan semangat belajar. Kali ini kita akan bahas sesuatu y...
    
                        
    
                    
    
                                        
    
                        
    
                            
    
                                
                                    Html
                                
                                6 months ago
                            
    
                            
                            
    
                                
                                    Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
                                
                            
    
                            
                            
    Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat websi...
    
                        
    
                    
    
                                        
    
                        
    
                            
    
                                
                                    Html
                                
                                6 months ago
                            
    
                            
                            
    
                                
                                    Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
                                
                            
    
                            
                            
    Hai lagi! Kali ini kita akan belajar bagaimana cara menambahkan gambar ke halaman web kamu. Gambar b...
    
                        
    
                    
    
                                    
    
            
    
        
        
        
    
            
    
                
    
                    
    Comments
    
                    
                    
                                            
    
                            
    
                                Login 
                                to leave a comment.
                            
    
                        
    
                    
                    
                    
    
                        
    
                            
                        
    
                    
    

                    
                    
    
                        
    
                            
                                
                                
                            
                            Loading comments...
                        
    
                    
    

                    
                
    
            
    
        
    
    
    







        
        


    
    
    
        
    Siap Mengembangkan Project IT Anda?
    
        
    Konsultasi gratis untuk membahas kebutuhan software dan solusi IT bisnis Anda
    
        
    
            
                Hubungi Kami
            
            
                WhatsApp