Cover image

Cara Mudah Membuat Tabel HTML Menggunakan Text Editor

Apakah anda pernah menggunakan microsoft excell? Mungkin seperti itulah sedikit gambaran tabel yang akan kita buat menggunakan markup html yaitu tag table.

Di dalam tag HTML table sendiri kita dapat menyisipkan elemen gambar, teks, dan link menjadi baris dan kolom atau yang kita sebut row dan coll.

Kemudian untuk membuat elemen tabel kita akan menggunakan tag <tr> dan <td>.

Tag AwalKeterangan
<table>Mendefinisikan sebuah tebel dalam HTML.
<tr>Mendefinisikan baris pada tabel
<th>Mendefinisikan sel header tabel
<td>Mendefinisikan sebuah sel data tabel

Table Of Contents

#1 Struktur Tabel HTML

Berikut merupakan struktur penulisan dari tabel:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>

   <body>
      <table border = "1">
         <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>

   </body>
</html>

Dan berikut adalah hasilnya:

Baris 1, Kolom 1Baris 1, Kolom 2
Baris 2, Kolom 1Baris 2, Kolom 2

Dari tabel diatas dapat anda lihat bahwa kita membuat tabel dengan tag <table> kemudian didalmnya kita menambhakan tag <tr> untuk menambah baris (struktur kebawah)

Dan terakhir didalam baris kita membuat kolom dengan tag <td>.

#2 Contoh Tabel HTML dengan Heading

Silahkan perhatikan kode berikut ini:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>

   <body>
     <table border="1">
        <tr>
           <th>NPM</th>
           <th>Nama</th>
           <th>Jenis Kelamin</th>
           <th>IPK</th>
        </tr>
        <tr>
           <td>16.0504.0146</td>
           <td>Damas Amirul Karim</td>
           <td>Laki-Laki</td>
           <td>3.62</td>
        </tr>
     </table>
   </body>

</html>

Dan Hasilnya adalah sebagai berikut:

NPMNamaJenis KelaminIPK
16.0504.0146Damas Amirul KarimLaki-Laki3.62

Yang membedakan ada pada tag <td> digantikan tag <th> khusus untuk header kolom.

#3 Atribut Cellpadding dan Cellspacing

Yang membedakan kedua atribut tersebut adalah:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>

   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Nama</th>
            <th>Gaji</th>
         </tr>
         <tr>
            <td>Andi</td>
            <td>$5000/tahun</td>
         </tr>
         <tr>
            <td>Budi</td>
            <td>$7000/tahun</td>
         </tr>
      </table>
   </body>

</html>

Dalam kode diatas kita membuat sebuah file .html yang isinya berupa tabel dengan judul atau header nama dan gaji. Kemudian pada baris selanjutnya kita mengisi seperti biasa.

Berkut catatan saya:

AtributKeterangan
cellspacinguntuk mengatur jarak antar cell
cellpaddinguntuk memberi jarak antara cell border dengan konten di dalam cell

#4 Perbedaan collspan dan rowspan

Langsung saja silahkan perhatikan kode berikut ini:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>

   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan="3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>

</html>

Sehingga anda akan mendapatkan hasil seperti ini:

Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

Dan berikut adalah sedikit catatan dari saya:

AtributKeterangan
rowspanUntuk menggabungkan 2 atau lebih baris
collspanuntuk menggabungkan 2 atau lebih kolom

#5 Beberapa Atribut Tambahan

Sama seperti tag html lainnya, kita dapat menambahkan beberapa atribut untuk elemen html:

AtributKeterangan
bgcolorUntuk Mengubah background elemen tabel
heightUntuk mengatur tinggi cell
widthUntuk mengatur lebar kolom
alignMengatur perataan text horizontal (left, center, right)
valignMengatur perataan text vertikal (top, middle, bottom)

Tabel dalam html juga bisa dibagi menjadi 3 elemen yaitu header, body dan footer.

Berikut masing-masing fungsinya:

  • <thead> − untuk membagi kepala tabel

  • <tbody> − untuk mengindikasikan konten utama tabel

  • <tfoot> − untuk membagi kaki Tabel

Untuk lebih jelasnya kita langsung ke contoh berikut:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>

   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>

         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>

         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>

      </table>
   </body>

</html>

Demikianlah penjelasan membuat tabel. Jangan lewatkan seri panduan belajar html kami.

Apakah artikel ini bermanfaat untuk anda?

Anda bisa mendukung kami hanya dengan secangkir kopi ☕

☕ Support via Saweria