Cara Membuat Tabel Di HTML

Tabel digunakan untuk menampilkan data dalam bentuk baris (row) dan kolom (column). Tabel pada HTML memakai tag table. Tabel tidak bisa berdiri sendiri dan harus mempunyai tag pendukung di dalam tag table. Beberapa tag pendukung penting seperti tag th untuk membuat header pada tabel, tag tr untuk membuat baris baru pada tabel, tag td untuk membuat kolom baru pada suatu baris dan beberapa tag lain. Di bawah ini cara membuat tabel di HTML, berikut contoh pemakaian tag table, tag th, tag tr dan tag td untuk menampilkan data dalam bentuk tabel.

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

Jalankan Contoh

Atribut border digunakan untuk memberikan garis batas antara baris dan kolom pada tabel.

Tag tr dan td

Tag tr adalah tag untuk menambahkan baris (row) baru di dalam tabel. Sedangkan tag td adalah tag untuk menambahkan kolom baru di dalam baris yang dibuat oleh tag tr. Dua tag ini membentuk barisan data pada tabel dalam bentuk baris dan kolom. Setiap data di dalam baris dan kolom tertentu dinamakan cell.

Referensi Elemen Table

<table border="1">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table> 

Jalankan Contoh

Tag th

Tag th adalah tag untuk menambahkan kolom baru di dalam tag tr. Tag ini dipakai untuk membuat kolom-kolom header pada tabel. Tag th fungsinya hampir sama dengan tag td, bedanya tag th diperuntukkan khusus untuk membuat kolom pada header tabel.

 <table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Jalankan Contoh

Atribut colspan

Atribut colspan dipakai pada tag th dan td. Atribut colspan berguna untuk menggabungkan beberapa kolom menjadi satu kolom.

 <table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table> 

Jalankan Contoh

Atribut rowspan

Atribut rowspan dipakai pada tag th dan td. Atribut rowspan berguna untuk menggabungkan beberapa baris menjadi satu baris.

 <table border="1">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table> 

Jalankan Contoh

Tag thead, tbody dan tfoot

Tag thead, tbody dan tfoot dipakai secara bersamaan untuk mengelompokkan header, body dan footer di dalam tabel.

 <table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table> 

Jalankan Contoh

Tutorial sebelumnya : Cara Membuat List Di HTML
Tutorial setelahnya : Membuat Halaman Web Dengan HTML Dan CSS
Semua Tutorial HTML : Tutorial HTML