Cara Membuat Tabel HTML yang Bagus dan Berwarna

· 7 menit untuk membaca
Cara Membuat Tabel HTML yang Bagus dan Berwarna

Dalam pembuatan website, salah satu elemen penting yang kamu butuhkan adalah tabel. Pada umumnya, tabel berfungsi untuk menampilkan data tertentu dalam suatu kolom dan baris. Agar mudah memahami data yang berada dalam tabel HTML, kamu harus mampu membuat tampilan yang enak dipandang mata dan user friendly.

Contohnya, kamu membuat tabel dengan warna-warni yang mempermudah kamu atau orang lain saat membaca data yang ada di dalam tabel. Sehingga, tabel tampak hidup dan tidak terlalu monoton ketika kamu menyajikannya pada laman website.

Laman website yang berisikan tabel biasanya dibutuhkan oleh situs web bidang bisnis atau pemerintahan. Karena cenderung sering menampilkan data-data seperti nama-nama customer, penduduk, penerima bantuan, atau stok barang.

Komponen Dasar Membuat Tabel HTML

Sebelum memahami cara pembuatan tabel menggunakan HTML, kamu perlu tahu apa saja komponen pada tabel. Komponen utama yang perlu kamu ketahui terdiri dari baris, kolom, sel, dan juga border (garis).

Baris merupakan bagian tabel yang bentuknya mendatar, tabel biasanya terdiri dari beberapa baris. Sedangkan kolom adalah bagian yang berbentuk vertikal atau atas menuju bawah, pada setiap kolom dalam tabel biasanya terdapat nama-nama kolom untuk mengisi data.

Kemudian sel adalah kotak-kotak yang terdapat pada tabel dan border merupakan garis-garis yang membentuk satu tabel utuh. Ketika keempat komponen tersebut bersatu, maka akan menjadi sebuah tabel yang sempurna yang mampu menampilkan data secara efektif.

Tag HTML untuk Membuat Tabel

Setelah memahami komponen tabel, selanjutnya kamu harus mengetahui apa saja tag dasar yang digunakan untuk membuat tabel HTML. Berikut ini beberapa tag dasar beserta fungsinya masing-masing, antara lain:

  • <table> berfungsi mendeklarasikan pembuka dan juga penutup pada tabel.
  • <tr> adalah tag untuk membuat baris atau table row pada tabel.
  • <td> berfungsi dalam pembuatan kolom pada setiap baris tabel menggunakan HTML sehingga akan menghasilkan sel atau table data.

Sedangkan untuk tag opsional lain dalam HTML, yaitu :

  • <th> berfungsi mendefinisikan header pada tabel.
  • <thead> membungkus konten yang terletak pada bagian judul atau kepala tabel.
  • <tbody> mendeklarasikan konten pada bagian isi atau tubuh tabel.
  • <tfoot> membungkus konten yang terletak pada kaki tabel.

Dari kumpulan tag diatas, tag dasar pada HTML tetap menjadi hal paling penting yang harus kamu ingat. Sementara tag yang bersifat opsional boleh kamu gunakan atau tidak tergantung kebutuhan tabelmu. Tetapi, bila ingin tampilan tabel pada laman website kamu tampak sempurna. Maka padu padankanlah beberapa tag di atas.

Struktur Dasar Membuat Tabel pada HTML

Tabel merupakan salah satu komponen di dalam struktur html. Selain itu, tabel juga memiliki struktur tersendiri ketika kamu membuatnya menggunakan HyperText Markup Language.

Pada artikel ini, akan dibahas terlebih dahulu satu per satu tentang struktur dasar membuat tabel HTML yang sangat penting untuk kamu ketahui, seperti berikut ini:

1. Tabel

Seperti yang sudah terdapat pada penjelasan sebelumnya bahwa tabel tersusun dalam kumpulan baris dan kolom yang berisi daftar informasi. Baris berupa kotak ke arah samping, sedangkan kolom berupa kotak ke arah bawah.

2. Tag

Tabel HTML terdiri dari beberapa struktur tag seperti yang sudah dijelaskan di atas. Berikut ini penulisan struktur tag jika kamu membuat tabel menggunakan HyperText Markup Language:

  • <table> cara menulisnya yaitu secara berpasangan antara tag pembuka <table> dengan tag penutup </table>.
    <table>
        <!-- Content nya disini ygy -->
    </table>
  • <thead> adalah singkatan dari table header. Cara penulisannya berada dalam tag <table> dan hanya satu tag <thead> dalam tabel HTML, yaitu merupakan bagian kepala dari tabel yang kamu buat.
    <table>
        <thead>
            <!-- Content nya disini ygy -->
        </thead>
    </table>
  • <tbody> cara menulisnya sebagai pembungkus isi dari tabel, seperti dibawah ini.
    <table>
        <thead>
            <!-- Content headnya disini ygy -->
        </thead>
    
        <tbody>
            <!-- Content bodynya disini ygy -->
        </tbody>
    </table>
  • <tfoot> ditulis setelah <tbody> namun hanya ada satu tag pada tabel, yaitu terletak dalam kaki tabel.
    <table>
        <thead>
            <!-- Content headnya disini ygy -->
        </thead>
    
        <tbody>
            <!-- Content bodynya disini ygy -->
        </tbody>
    
        <tfoot>
            <!-- Content footernya disini ygy -->
        </tfoot>
    </table>
  • <tr> adalah singkatan dari table row dimana di dalamnya terdapat satu atau lebih tag <th> dan <td>.
    <table>
      <thead>
        <tr>
          <!-- content nya disini ygy -->
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <!-- content nya disini ygy -->
        </tr>
      </tbody>
    
      <tfoot>
        <tr>
          <!-- content nya disini ygy -->
        </tr>
      </tfoot>
    </table>
  • <th> dapat berisi satu atau lebih tag. Cara penulisannya berada dalam tag <thead> atau dalam kepala tabel.
    <thead>
      <tr>
        <th>Tahun</th>
    
        <th>Penjualan</th>
      </tr>
    </thead>
  • <td> juga dapat terdiri dari satu atau lebih tag. Cara penulisannya berada dalam tag <tbody> atau tubuh tabel.
    <thead>
        <tr>
          <th>Tahun</th>
      
          <th>Penjualan</th>
        </tr>
      </thead>
      
      <td>
        juga dapat terdiri dari satu atau lebih tag. Cara penulisannya berada dalam tag
        <tbody>
          atau tubuh tabel.
        </tbody>
        <tbody>
          <tr>
            <td>2020</td>
      
            <td>100.000</td>
          </tr>
      
          <tr>
            <td>2021</td>
      
            <td>200.000</td>
          </tr>
        </tbody>
      </td>

Jika kamu ingin membuat garis dalam tabel, maka perlu menambahkan atribut border=”1” yang terletak pada tag <table> seperti berikut :

<table border="1">
	<!-- content nya disini ygy -->
</table>

Menggabungkan Tabel HTML

Setelah mengetahui strukturnya, kamu bisa langsung saja menggabungkan tag-tag tersebut menjadi sebuah tabel yang informatif. Berikut ini contoh tabel html sebagai referensi kamu untuk praktek membuat tabel:

<!DOCTYPE html>

<html>
  <head>
    <title>Belajar membuat tabel di html</title>
  </head>

  <body>
    <table style="width: 100%" border="1">
      <tr>
        <th>Tahun</th>

        <th>Penjualan</th>
      </tr>

      <tr>
        <td>2020</td>

        <td>100.000</td>
      </tr>

      <tr>
        <td>2021</td>

        <td>200.000</td>
      </tr>

      <tfoot style="text-align: center">
        <tr>
          <td>Jumlah</td>

          <td>300.000</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
membuat tabel html
jadi nya kek gini ygy

Saat membuat tabel, terkadang ada jumlah kolom yang berbeda antara baris pertama dan baris lain, sehingga perlu menggabungkan sebuah sel tabel dengan sel lain. Dalam hal ini, HTML menyediakan atribut bernama rowspan dan colspan. Atribut tersebut terletak pada tag <td> dari sebuah tabel. Berikut ini contoh penggunaannya :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Colspan dan Rowspan Tag Tabel</title>
  </head>
  <body>
    <h1>Contoh atribut colspan dan rowspan</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 colspan="2">Baris 2, Kolom 2 & 3</td>
      </tr>
      <tr>
        <td rowspan="2">Baris 3 & 4, Kolom 1</td>
        <td>Baris 3, Kolom 2</td>
        <td>Baris 3, Kolom 3</td>
      </tr>
      <tr>
        <td>Baris 4, Kolom 2</td>
        <td>Baris 4, Kolom 3</td>
      </tr>
    </table>
  </body>
</html>
Contoh Colspan dan Rowspan Tag Tabel
Jadinya kek gini ygy

Mengatur Jarak Sel pada Tabel HTML

Saat membuat tabel, kamu pasti terkadang melihat bahwa jarak antar tabel tidak enak untuk dipandang, misalnya terlalu dekat antara satu data dengan data lain. Hal itu juga biasa terjadi dengan jarak antar teks terhadap bingkai tabel.

Sehingga tabel terkesan sangat rapat dan tidak rapi serta membuat kamu tidak pede untuk menampilkannya pada laman situs web milikmu. Oleh karena itu, kamu memerlukan atribut cellpadding untuk membuat tampilan jarak antar sel tabel lebih renggang.

Selain itu, kamu juga perlu menambahkan atribut cellspacing untuk mengatur ukuran kerenggangan antar sel tabel pada halaman website. Dengan menambahkan kedua atribut tersebut, maka akan membuat tampilan tabel di website kamu tampak lebih profesional.

Cara Membuat Tabel HTML Berwarna

Setelah kamu mengetahui struktur dasar dan atribut pada HyperText Markup Language, maka agar tabel yang kamu buat lebih menarik. Artikel ini juga akan memberikan penjelasan tentang cara membuat tabel html berwarna.

Caranya cukup mudah, yaitu kamu hanya perlu menambahkan atribut background-color dalam tag <table> dan <tr>. Deklarasikan warna yang kamu inginkan pada atribut tersebut, seperti contoh berikut :

<table border="1" >
<tr style="background-color: blue;">
cara mewarnai tabel html
udah dikasi warna

Kamu juga bisa menggunakan kode warna html untuk mendeklarasikan warna tabel. Umumnya, terdiri atas 3 jenis kode, yakni nama warna, hexa, dan juga RGB. Contoh di atas menggunakan kode nama warna dalam bahasa Inggris, yakni blue.

Ayo Berlatih Membuat Tabel HTML Sekarang!

Mempelajari html adalah kewajiban bagi kamu yang ingin membuat website. Setelah membaca penjelasan pada artikel ini tentang tabel HTML. Sebaiknya kamu segera berlatih dengan cara memodifikasi kode di atas, sehingga menjadi tabel yang lebih menarik. Cara membuat tabel HTML yang bagus tentu perlu kombinasi berbagai tag dan atribut juga warna yang sesuai dengan isi datanya. Jika kamu ingin membuat tabel yang lebih bagus, maka kamu bisa mengkombinasikan HTML dengan CSS. Maka dari itu, kamu juga perlu mempelajari terlebih dahulu cara membuat website dengan html dan css.