Cara Membuat Tabel di HTML Termudah, Pemula Pasti Bisa!

Siapa yang tidak kesal saat mengunjungi sebuah website untuk mencari data, tapi ternyata cara penyajiannya berantakan? Jangan sampai hal tersebut terjadi di website Anda sendiri! Solusinya yaitu dengan cara membuat tabel di HTML.

Apalagi misalnya Anda punya website acara atau toko online. Anda harus menampilkan data secara terstruktur, misalnya daftar event atau daftar produk Anda. Nah, dengan mengetahui cara buat tabel di HTML, Anda bisa mengatur data dengan rapi.

Sebenarnya membuat tabel HTML juga tidak sulit, kok. Mau tahu langkah-langkah dan contoh coding HTML yang bisa Anda gunakan? Yuk lanjutkan scroll artikel ini karena kami akan membantu Anda belajar HTML untuk membuat tabel, lengkap dengan kodenya.

Mari mulai tutorialnya!

Cara Membuat Tabel HTML untuk Pemula

HTML adalah salah satu solusi yang paling mudah untuk menambahkan berbagai elemen di website, termasuk tabel. Elemen tabel HTML memiliki banyak fungsi berguna, termasuk untuk menampilkan data secara lebih rapi.

Selain itu, Anda juga bisa bereksperimen dengan kode-kode HTML untuk menampilkan tabel dengan berbagai gaya, bahkan menambahkan gambar di dalam tabel. Tenang, kami akan menjelaskan cara membuat tabel di HTML di bagian ini.

1. Mengenal Komponen Tabel HTML

Sebelum masuk lebih jauh, mari kenali dulu komponen dasar yang membentuk tabel HTML. Setiap tabel memiliki empat bagian, yaitu:

• Sel. Sel adalah kotak kecil di dalam tabel. Setiap kotak bisa berisi teks, angka, atau gambar.
• Baris. Baris merupakan deretan sel di dalam tabel.
• Kolom. Kolom dalam tabel HTML adalah bagian vertikal dari tabel yang terdiri dari sel-sel yang sejajar. Kolom dalam tabel HTML adalah bagian vertikal dari tabel yang terdiri dari sel-sel yang sejajar.
• Border. Border merupakan garis tepi yang mengelilngi tiap sel, baris, dan kolom dalam tabel. Garis tepi ini membantu pembaca melihat batas-batas antara informasi yang berbeda dalam tabel.

Silakan lihat ilustrasi di bawah ini untuk mengetahui letak bagian-bagian tersebut.

Setelah Anda mengenal komponen dasar yang membentuk tabel di HTML, mari pelajari tag-tag HTML untuk membuat tabel.

Di HTML, Anda membutuhkan beberapa tag khusus untuk membuat dan mengatur tampilan tabel. Berikut adalah tag-tag utamanya:

• <table>: Tag table mendefinisikan awal dan akhir dari tabel. Semua elemen tabel akan diletakkan di antara tag ini.
• <tr>: Tag ini digunakan untuk mendefinisikan baris dalam tabel. Setiap baris akan diletakkan di antara tag ini.
• <td>: Tag ini digunakan untuk mendefinisikan sel dalam tabel. Setiap sel akan diletakkan di antara tag ini. Anda dapat mengisinya dengan teks, angka, gambar, atau bahkan elemen-elemen lain.
• <th>: Tag ini digunakan untuk membuat heading (judul) dalam tabel. Biasanya digunakan untuk judul baris atau kolom. Seperti <td>, Anda juga bisa mengisinya dengan teks, angka, atau elemen lain.

Sekarang, dengan pemahaman mengenai komponen dasar dan tag-tag HTML, Anda sudah siap untuk memulai pembuatan tabel HTML yang menarik dan informatif.

2. Membuat Tabel HTML Sederhana

Hanya dengan mengetahui tag table dan tag dasar yang sudah Anda pelajari sebelumnya, Anda sudah bisa menciptakan sebuah table sederhana.

Ini adalah contoh coding HTML untuk tabel sederhana:

<table>
   <tr>
      <th>Judul Kolom 1</th>
      <th>Judul Kolom 2</th>
   </tr>
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
   <tr>
      <td>Data 3</td>
      <td>Data 4</td>
   </tr>
</table>

Dengan baris-baris ini, Anda sudah membuat tabel 2×2 yang mengandung empat sel dengan data yang berbeda.

Selanjutnya, mari tambahkan border pada table tersebut.

3. Menambahkan Border ke Tabel

Agar tabel terlihat lebih terstruktur, mari tambahkan atribut border ke baris pada tabel Anda Langkah ini akan memudahkan pengunjung website dalam membedakan antara baris dan kolom.

Berikut penerapan atribut border pada tabel Anda.

<table border="1">
   <tr>
      <th>Judul Kolom 1</th>
      <th>Judul Kolom 2</th>
   </tr>
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
   <tr>
      <td>Data 3</td>
      <td>Data 4</td>
   </tr>
</table>

Dengan menambahkan atribut border=”1″ pada tag table, Anda memberikan border dengan ketebalan 1 pixel di sekitar seluruh tabel. Ini adalah cara sederhana untuk memberikan border langsung pada tabel menggunakan atribut HTML.

Nah agar tata letak tabel agar informasi lebih nyaman untuk dibaca, mari mengatur jarak tulisan dalam border.

4. Mengatur Tata Letak Tabel

Tampilan tabel bukan hanya tentang border. Anda juga bisa mengatur jarak antara tulisan dengan border serta memberikan ruang yang cukup agar tabel terlihat lebih rapi.

Anda dapat menggunakan atribut HTML align untuk mengatur perataan konten di dalam sel-sel tabel. Berikut cara Anda dapat memodifikasi kode dasar untuk mengatur jarak konten di dalam sel-sel:

<table border="1">
   <tr>
      <th align="center">Judul Kolom 1</th>
      <th align="center">Judul Kolom 2</th>
   </tr>
   <tr>
      <td align="left">Data 1</td>
      <td align="right">Data 2</td>
   </tr>
   <tr>
      <td align="center">Data 3</td>
      <td align="justify">Data 4</td>
   </tr>
</table>

Di bawah ini adalah hasil pengaturan tata letak tabel dengan kode HTML di atas:

Jika Anda bingung dengan pengaturan perataan teks, silakan simak penjelasan singkat ini:

• align=”center” mengatur perataan konten secara horizontal di tengah sel.
• align=”left” mengatur perataan konten ke kiri di dalam sel.
• align=”right” mengatur perataan konten ke kanan di dalam sel.
• align=”justify” mengatur perataan konten di dalam sel sehingga terjadi jarak merata antara kata-kata.

Oh ya selain menggunakan atribut align, Anda juga bisa mengatur tata letak table dengan atribut padding. 

<table border="1" cellpadding="10">
   <tr>
      <th>Judul Kolom 1</th>
      <th>Judul Kolom 2</th>
   </tr>
   <tr>
      <td>Baris 1 Kolom 1</td>
      <td>Baris 1 Kolom 2</td>
   </tr>
   <tr>
      <td>Baris 2 Kolom 1</td>
      <td>Baris 2 Kolom 2</td>
   </tr>
</table>

Dalam contoh ini, Anda melihat penggunaan atribut cellpadding=”10″ di tag table. Atribut ini berfungsi untuk memberikan jarak sekitar 10 piksel antara tepi luar setiap sel dan konten yang ada di dalamnya.

Selanjutnya, mari pelajari cara menggabungkan sel-sel dalam tabel.

5. Menggabungkan Sel dalam Tabel (Merging)

Menggabungkan sel dalam tabel HTML penting karena membantu mengatur tampilan dan struktur tabel dengan lebih baik.

Misalnya, ketika ada informasi yang terkait atau jika Anda ingin menyoroti judul atau informasi penting, menggabungkan sel memungkinkan Anda menciptakan sel yang lebih lebar atau lebih tinggi.

Anda bisa melakukan merging dengan atribut colspan dan rowspan. Berikut contohnya:

<table border="1" cellpadding="10">
   <tr>
      <th>Judul Kolom 1</th>
      <th colspan="2">Judul Kolom 2 Gabungan</th>
   </tr>
   <tr>
      <td>Baris 1 Kolom 1</td>
      <td rowspan="2">Baris 1 dan 2 Kolom 2 Gabungan</td>
   </tr>
   <tr>
      <td>Baris 2 Kolom 1</td>
   </tr>
</table>

Hasil penggabungannya bisa Anda lihat pada gambar di bawah ini.

Selanjutnya, mari beri warna pada sel dan baris untuk tampilan tabel yang lebih menarik.

6. Memberikan Warna Sel dan Baris

Tampilan tabel bisa lebih hidup dengan memberikan warna pada sel dan baris. Anda bisa menggunakan atribut bgcolor pada tag <td> dan <th> untuk memberikan warna latar belakang pada sel dan baris.

Berikut adalah cara memberikan warna dengan kode HTML:

<table border="1" cellpadding="10">
   <tr>
      <th bgcolor="#3498DB">Judul Kolom 1</th>
      <th colspan="2" bgcolor="#3498DB">Judul Kolom 2 Gabungan</th>
   </tr>
   <tr>
      <td bgcolor="#AED6F1">Baris 1 Kolom 1</td>
      <td rowspan="2" bgcolor="#AED6F1">Baris 1 dan 2 Kolom 2 Gabungan</td>
   </tr>
   <tr>
      <td bgcolor="#AED6F1">Baris 2 Kolom 1</td>
   </tr>
</table>

Anda bisa mengganti nilai atribut bgcolor dengan kode warna HTML yang sesuai dengan preferensi Anda. Dengan menambahkan warna pada sel dan baris, tabel Anda akan terlihat lebih menarik. 

7. Menambahkan Gambar dalam Sel

Selain teks dan angka, Anda juga dapat menyisipkan gambar ke dalam sel-sel tabel HTML untuk memberikan tampilan yang lebih visual dan informatif. Proses ini cukup sederhana, dan Anda dapat melakukannya menggunakan elemen img.

Ini dia contoh penggunaan elemen <img> pada tabel HTML:

<table border="1" cellpadding="10">
   <tr>
      <th bgcolor="#3498DB">Judul Kolom 1</th>
      <th colspan="2" bgcolor="#3498DB">Judul Kolom 2 Gabungan</th>
   </tr>
   <tr>
      <td bgcolor="#AED6F1">Baris 1 Kolom 1</td>
      <td rowspan="2" bgcolor="#AED6F1">
         <img src="link_gambar_anda.jpg" alt="Gambar Contoh" width="100" height="100">
      </td>
   </tr>
   <tr>
      <td bgcolor="#AED6F1">Baris 2 Kolom 1</td>
   </tr>
</table>

Hasilnya kira-kira seperti di bawah ini. Gambar akan muncul tepat di dalam tabel.

Catatan penting, saat memasukkan gambar di HTML, pastikan file-nya sudah tersimpan dalam folder yang sama dengan file HTML. Jika tidak, maka gambar tidak akan bisa ditampilkan.

8. Menambahkan Heading Baris dan Kolom

Menambahkan heading pada baris dan kolom akan memberikan konteks yang jelas tentang data yang ditampilkan dalam tabel.

Dengan adanya heading baris dan kolom, Anda memberikan keterangan lebih lanjut tentang struktur dan isi tabel kepada pengunjung, sehingga membuat pengalaman pembaca menjadi lebih baik dan lebih informatif.

Ini dia contoh tabel HTML dengan heading:

<table border="1" cellpadding="10">
   <tr>
      <th></th>
      <th>Judul Kolom 1</th>
      <th>Judul Kolom 2</th>
   </tr>
   <tr>
      <th>Heading Baris 1</th>
      <td>Baris 1 Kolom 1</td>
      <td>Baris 1 Kolom 2</td>
   </tr>
   <tr>
      <th>Heading Baris 2</th>
      <td>Baris 2 Kolom 1</td>
      <td>Baris 2 Kolom 2</td>
   </tr>
</table>

Menggunakan elemen th sebagai heading akan membedakan heading dari data biasa. Ini dia contoh hasilnya:

9. Menerapkan CSS untuk Desain Tabel

Dengan CSS, Anda dapat mengubah tampilan tabel secara fleksibel. Anda bisa menambahkan elemen desain seperti border, font, dan latar belakang untuk menciptakan tampilan tabel yang sesuai dengan gaya halaman web Anda.

Inilah beberapa contoh kode CSS untuk mendesain tabel:

Mengatur Margin dan Padding pada Paragraf

p {
  margin: 10px;
  padding: 5px;
}

Mengubah Ukuran dan Jenis Font

p {
  font-size: 16px; /* Ubah ukuran font sesuai kebutuhan */
  font-family: Arial, sans-serif; /* Ubah jenis font sesuai kebutuhan */
}

Mengubah Warna Background Halaman

body {
  background-color: #F2F2F2;
}

Mengubah Warna Link dan Efek Hover

a {
  color: #E74C3C;
  text-decoration: none;
}
a:hover {
  color: #C0392B;
  text-decoration: underline;
}

Mengubah Warna Latar Belakang Tombol

button {
  background-color: #2ECC71;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #27AE60;
}

Mengatur Lebar Gambar

img {
  max-width: 100%;
  height: auto;
}

Sebagai contoh, di bawah ini adalah desain CSS yang utuh untuk membuat tabel di HTML:

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  th, td {
    padding: 15px;
    text-align: left;
  }
  th {
    background-color: #3498DB;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tr:hover {
    background-color: #AED6F1;
    transform: scale(1.01);
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
</style>
</head>
<body>
<table>
   <tr>
      <th>Judul Kolom 1</th>
      <th>Judul Kolom 2</th>
   </tr>
   <tr>
      <td>Baris 1 Kolom 1</td>
      <td>Baris 1 Kolom 2</td>
   </tr>
   <tr>
      <td>Baris 2 Kolom 1</td>
      <td>Baris 2 Kolom 2</td>
   </tr>
   <tr>
      <td>Baris 3 Kolom 1</td>
      <td>Baris 3 Kolom 2</td>
   </tr>
</table>
</body>
</html>

Hasil jadinya kira-kira seperti di bawah ini. Tabel akan memiliki warna dan efek hover ketika pengguna mengarahkan cursor ke baris yang dituju.

Anda dapat mengubah nilai border, padding, width, dan atribut lainnya untuk memodifikasi tampilan tabel sesuai dengan preferensi Anda.

10. Membuat Tabel HTML yang Responsif

Tampilan yang responsif adalah suatu keharusan agar tabel website tetap terbaca dengan baik saat diakses di berbagai jenis perangkat. Mulai dari desktop hingga mobile.

Untuk itu, tambahkan atribut stle dan gunakan media query agar tabel di HTML agar responsif. Berikut contohnya.

<!DOCTYPE html>
<html>
<head>
<style>
  /* Style umum untuk tabel */
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div style="overflow-x: auto;">
  <table style="max-width: 100%;">
    <tr>
      <th>Judul Kolom 1</th>
      <th>Judul Kolom 2</th>
    </tr>
    <tr>
      <td>Baris 1 Kolom 1</td>
      <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
      <td>Baris 2 Kolom 1</td>
      <td>Baris 2 Kolom 2</td>
    </tr>
  </table>
</div>
</body>
</html>

Sekarang, tabel HTML akan menyesuaikan tampilan sesuai perangkat yang pengunjung website gunakan.

Website Jadi Rapi dengan Mengetahui Cara Membuat Tabel HTML!

Kini Anda telah memahami langkah-langkah utama dalam pembuatan tabel HTML yang menarik dan fungsional. Mulai dari pemahaman komponen dasar tabel hingga penambahan warna, gambar, dan penerapan CSS.

Itu artinya, Anda memiliki wawasan untuk membuat tabel yang menarik di halaman web Anda. Jadi, jangan ragu untuk bereksperimen dan mencoba sendiri.

Namun untuk memastikan agar situs web bisa diakses dengan baik oleh semua orang, Anda harus memakai hosting andal. Nah, di Niagahoster, Anda bisa menemukan Web Hosting terbaik sesuai kebutuhan.

Dengan Web Hosting Niagahoster, Anda akan mendapatkan website dengan kecepatan akses yang kencang, keamanan berlapis, hingga kemudahan mengelola website.

Yuk, wujudkan kreativitas Anda sekarang juga!

[FAQ] Pertanyaan Umum Tentang Cara Membuat Tabel di HTML