Beranda / Tutorial

Cara Membuat Tabel di HTML Lengkap Dan Mudah

Oleh Ervan Repana
Dengan tabel kita bisa menginformasikan data dengan simple dan jelas. Format tabel itu sendiri terdiri dari satu atau banyak kolom (colum) dan satu baris atau banyak baris (rows) dan ditandai dengan garis pembatas antar kolom dan baris. Yang ditandai dengan pembatas antar kolom dan baris dinamakan cell. Tentunya sahabat ingin mengetahui cara membuat table pada html.
Format table pada html ditandai tag-tag html table di setiap baris atau kolom ditandai dengan tag rows dan colums. Kemudian begitu pun untuk kepala baris atau colom sebagai judul yang mewakili kolom maupun baris.

Dimana dalam html terutama html5 pembuatan tabel html menggunakan kode html tabel (coding html table) untuk membuat tabel di web atau blog dengan html.

HTML Table Codes


Berikut kode tag html tabel dimana untuk membuat tabel sahabat perlu megingat kode hml table yang diantaranya

1. <table> tag html ini berfungsi sebagai pembungkus atau menandai table di html

2. <thead> dimana table html tag ini untuk membungkus atau menandai kepala table

3. <tbody> berguna untuk membungkus badan table

4. <td> berfungsi untuk membungkus data table

5. <tr> tag ini mempunyai kegunaan untuk membatasi atau membungkus baris table

6. <th> tag untuk membuat heading table untuk membuat judul baru pada table.

Setiap html5 tag pembuka akan diikuti html tag penutup. Pada tabel dimana baris daoat kita ketahui secara horizontal dan kolom secara vertical.
Code

<html>
<body>
<table >
<tr>
 <td>Baris 1 Kolom 1</td>
 <td>Baris 1 Kolom 2</td>
 <td>Baris 1 Kolom 3</td>
  </tr>
<tr>
 <td>Baris 1 Kolom 1</td>
 <td>Baris 1 Kolom 2</td>
 <td>Baris 1 Kolom 3</td>
  </tr>
</table>
</body>
</html>

Contoh table
Tabel pada html tanpa border
Untuk preview diatas kode html table diatas bisa menggunakan tools html editor baik di komputer atau di smartphone.

Pembatas antar cell

Penambahan garis pembatas antara cel, baris dan kolom menggunakan <tabel border="1"> untuk menggunakan dua garis ganti 1 dengan 2. Border sendiri merupakan css (case cadding style)


<html>
<body>
<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>Baris 2 Kolom 2</td>
   <td>Baris 2 Kolom 3</td>
  </tr>
</table>
</body>
</html>

Contoh
Tabel html menggunakan border

Penambahan jarak teks

Membahkan jarak teks dengan pembatas antara border (garis pembatas) dengan teks menggunakan atribut cellpading sehingga <table border="1"> jika ingin diperbesar jaraknya dengan mengganti 1 menjadi 2 dan seterusnya.

<html>
<body>
<table border="1" cellpadding="8">
<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>Baris 2 Kolom 2</td>
 <td>Baris 2 Kolom 3</td>
  </tr>
</table>
</body>
</html>

Contoh
Tabel html dengan cellpadding

Menambah jarak spasi

Penambahan jarak spasi antara cell dan border (garis pembatas cell) dengan menggunakan <table border="1" cellspacing="5">


<html>
<body>
<table border="1" cellspacing="2">
<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>Baris 2 Kolom 2</td>
 <td>Baris 2 Kolom 3</td>
  </tr>
</table>
</body>
</html>

Contoh
Tabel html dengan cellspacing


Mewarnai tabel

Demikian pula jika sahabat ingin memberi warna pada cell tabel dengan menambahkan bgcolor="css_warna" misal bgcolor="#004EFF" bisa digunakan pada td, atau pada tag tabel secara langsung.

<html>
<body>
<table border="1" cellpadding="1">
<tbody>
 <tr>
  <td bgcolor="#004EFF">Baris 1 Kolom 1</td>
  <td bgcolor="#004EFF">Baris 1 Kolom 2</td>  
<td bgcolor="#004EFF">Baris 1 Kolom 3</td>
   </tr>
 <tr>  
<td bgcolor="#004EFF">Baris 2 Kolom 1</td>
  <td bgcolor="#004EFF">Baris 2 Kolom 2</td> 
 <td bgcolor="#004EFF">Baris 2 Kolom 3</td>
   </tr> 
</tbody>
</table>
</body>
</html>
Contoh
Table html dengan warna

Penggabungan kolom atau baris 

Anda juga bisa menggabungkan kolom atau baris, dimana menyatukan kolom menjadi 1 dengan html tag <colspan> dan untuk baris <rowspan> baik pada colums atau rows (th, td).

<html>
 <body>
  <title>Cara membuat Table HTML sederhana</title>
<table border="1" cellspacing="1">
  <tr>
   <th border="2" rowspan="2" bgcolor="#FF7C00" >Pertumbuhan</th>
   <th border="2" colspan="2" bgcolor="#00BCFF">Investasi</th>
   <th border="2" rowspan="2" bgcolor="#00F0FF" >Bisnis</th>
  </tr>
  <tr>
   <th>Surat Berharga</th>
   <th>Emas</th>
  </tr>
  <tr>
   <td>1</td>
   <td>0.5%</td>
   <td>0.3%</td>
   <td>1%</td>
  </tr>
  <tr>
   <td>2</td>
   <td>0.7%</td>
   <td>0.4%</td>
   <td>1.5%</td>
  </tr>
  <tr>
   <td>3</td>
   <td>0.8%</td>
   <td>0.5%</td>
   <td>1.6%</td>
  </tr>
  <tr>
   <td>3</td>
   <td>0.9%</td>
   <td>0.7</td>
   <td>1.8%</td>
  </tr>
</table>
</body>
</html>

Contoh

Table html dengan merger dua kolom atau baris lebih

Agar table html responsive di semua perangkat smartphone, tablet dan komputer atau pc. Gunakan <div style="overflow-x:auto">
Kode html table
</div>
Demikian cara membuat table pada html dari omevan semoga bermanfaat.