MEMBUAT TABLE

Sekarang saatnya kita belajar bagaimana membuat table di HTML. Kita mulai dengan table yang sederhana dulu hingga menuju table yang lebih rumit dan ruwet nantinya. Sebelum saya teruskan, saya menyarankan untuk membuat table hanya untuk tabel. Jangan gunaka table sebagai layout web. Selain memberatkan, juga tidak efektif. Saya masih melihat banyak template-template web yang keren-keren menggunakan table. Ini tentunya sangat tidak sehat bagi kecepatan load web anda. So, gunakan table untuk tabel saja.

Ada 3 komponen utama dalam pembuatan tabel yaitu:

– Penanda table <table>
– Penanda baris <tr>
– Penanda kolom <td>

Dan inilah contoh sebuah table sederhana dengan 3 kolom dan 2 baris:

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

Hasilnya akan seperti ini:

Kolom 1 Baris 1 Kolom 2 Baris 1 Kolom 3 Baris 1
Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3 Baris 2

Anda paham bagaimana cara membuatnya bukan? Untuk mempermudah membuat table, saya biasanya pakai rumus ini:

1. Saya tulis dulu tablenya seperti ini:

<table>
</table>

2. Saya masukkan barisnya. Misalnya kita mau bikin 2 baris, maka saya tinggal pasang 2 tag TR seperti ini:

<table>
<tr>
</tr>
<tr>
</tr>
</table>

3. Sekarang tinggal masukkan kolomnya aja di tiap baris seperti ini:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>

Baris kedua saya biarkan agar anda bisa fokus di baris pertama dulu.

4. Terakhir memasukkan isi kolomnya

<table>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
</tr>
</table>

Selesai deh! Mudah sekali bukan? Insya Allah artikel berikutnya kita akan bahas tabel yang lebih rumit lagi. Sampai jumpa nanti ya

 

SUMBER : http://gudanginfo.web.id/html/

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s