Cara Membuat Tabel di HTML

Tabel yaitu kumpulan baris dan kolom yang tersusun untuk menampilkan data. Dokumen atau atrikel sering kali menggunkan tabel, tidak terkecuali dokumen yang ada di web.

Jika kita membuat tabel dengan word tentunya tinggal memasukkan jumlah baris dan kolom. Bagaimana pula jika kita membuat tabel di web? Tentunya pakai kode html.

Berikut beberapa tag yang anda perlu ketahui untuk membuat tabel.

1. Tag <table>  Fungsinya untuk membungkus tabel.
2. Tag <tr> Fungsinya untuk membuat baris.
3. Tag <td> Fungsinya untuk membuat kolom

Untuk membuat tabel di html kita fokus terhadap baris. Sebagai contoh kita buat tabel satu baris 4 kolom.

<!--nama file tabel1.html-->
<table>
 <tr> <td> No.</td> <td> Nama</td> <td> Alamat </td> <td> No. HP </td> </tr>
</table>

Nah, terlihat untuk membuat tabel dimulai dari tag <table>, kemudian dilanjutkan dengan tag <tr> baru tag <td>. Jadi baris dulu baru kolom-kolom (cell) nya, atau arah pembuatan tabel nya kesamping.

No.

Nama

Alamat

No. HP

Supaya ada bordernya tambahkan atribut border="1" di tag buka tabel.

<!--nama file tabel1.html-->
<table border="1">
 <tr> <td> No.</td> <td> Nama</td> <td> Alamat </td> <td> No. HP </td> </tr>
</table>

No.

Nama

Alamat

No. HP

Ingat, caranya minta baris, kemudian kolom dan kolom seterusnya. Jadi jika kita akan membuat baris kedua dari tabel di atas caranya.

<!--nama file tabel1.html-->
<table border="1">
 <tr> <td> No.</td> <td> Nama</td> <td> Alamat </td> <td> No. HP </td> </tr>
 <tr> <td> 1</td> <td> Budi</td> <td> Medan</td> <td> 001122334455</td> </tr>
</table>

No.	Nama	Alamat	No. HP
1	Budi	Medan	001122334455

Untuk baris selanjutnya tentunya anda sudah bisa sendiri. Sekarang jika anda sudah paham cara membuat tabelnya, kita coba dengan gaya penulisan lainnya.

<!--nama file tabel1.html-->

<table border="1">

 <tr> 

  <td> No.</td>

  <td> Nama</td>

  <td> Alamat </td>

  <td> No. HP </td>

 </tr>

 <tr>

  <td> 1</td> 

  <td> Budi</td> 

  <td> Medan</td>

  <td> 001122334455</td>

 </tr>

</table>

Dari dua cara penulisan ini anda suka yang mana? jawabanya terserah anda.

Selanjutnya anda bisa belajar bagaimana menggabungkan beberapa cell pada tabel. Istilah ini lebih populer dengan sebutan  marger-cells seperti di ms word. Pembahasan tersebut akan saya bahas di tutorial selanjutnya.

Baca Juga Tips Belajar HTML