Belajar HTML Bagian 12 : Cara Membuat Tabel di HTML

Tabel adalah sebuah data tabular dalam bentuk grid yang terdiri atas kolom, baris dan sel. Penggunaan tentunya menjadikan informasi lebih ringkas dan padat serta membuat orang mudah membacanya dan mengerti informasi yang di dalamnya.

Membuat Tabel di HTML

Tag - tag yang umum digunakan untuk membuat tabel di HTML antara lain :

Tag	Fungsi
<table>	Mendefinisikan sebuah table
<tr>	Merupakan singkatan dari table row, yang digunakan untuk membuat baris tabel
<th>	Merupakan singkatan dari table header , yang digunakan untuk mendefinisikan sebuah judul
<td>	Merupakan singkatan dari table data, yang digunakan untuk menginput data ke tabel

Berikut ini contoh penggunaan tag <table>, <tr> dan <td> untuk membuat tabel di HTML :

<table>
 <tbody>
  <tr>
   <th>Tag</th>
   <th>Fungsi</th>
  </tr>
  <tr>
   <td><code>&lt;table&gt;</code></td>
   <td>Mendefinisikan sebuah table</td>
  </tr>
  <tr>
   <td><code>&lt;tr&gt;</code></td>
   <td>Merupakan singkatan dari <i>table row</i>, yang digunakan untuk membuat baris tabel</td>
  </tr>
  <tr>
   <td><code>&lt;th&gt;</code></td>
   <td>Merupakan singkatan dari <i>table header</i> , yang digunakan untuk mendefinisikan sebuah judul</td>
  <tr>
   <td><code>&lt;td&gt;</code></td>
   <td>Merupakan singkatan dari <i>table data</i>, yang digunakan untuk menginput data ke tabel</td>
  </tr>
 </tbody>
</table>

Jika dibuka dibrowser, tampilannya akan seperti gambar dibawah ini :

Mungkin sobat akan bingung kenapa tebel tersebut tidak memiliki garis tepi seperti halnya yang terdapat di ms.excel. Hal itu karena kita belum memberikan atribut border di tag <table>.

Contoh penggunaan atribut border di tag <table> :

<table border="1">
 <tbody>
  <tr>
   <th>Tag</th>
   <th>Fungsi</th>
  </tr>
  <tr>
   <td><code>&lt;table&gt;</code></td>
   <td>Mendefinisikan sebuah table</td>
  </tr>
  <tr>
   <td><code>&lt;tr&gt;</code></td>
   <td>Merupakan singkatan dari <i>table row</i>, yang digunakan untuk membuat baris tabel</td>
  </tr>
  <tr>
   <td><code>&lt;th&gt;</code></td>
   <td>Merupakan singkatan dari <i>table header</i> , yang digunakan untuk mendefinisikan sebuah judul</td>
  <tr>
   <td><code>&lt;td&gt;</code></td>
   <td>Merupakan singkatan dari <i>table data</i>, yang digunakan untuk menginput data ke tabel</td>
  </tr>
 </tbody>
</table>

Pada contoh kode diatas Saya memberikan nilai "1" di atribut border, sehingga jika dibuka di browser tabel memiliki garis tepi sebesar 1 pixel seperti gambar diatas.

Penggunaan tabel di HTML tidak boleh digunakan untuk mendesain tampilan website. Dahulu mungkin sering digunakan tapi setelah CSS diimplementasikan ke semua browser, maka penggunaan tabel untuk mendesain tampilan website tidak dianjurkan.

Untuk pembahasan selanjutnya sobat akan mempelajari Cara Menambahkan Komentar di HTML.

Share this post