Membuat Tabel Dengan Kode HTML

Dalam pembuatan tabel diperlukan 3 tag dasar yaitu : TABLE, TR, TD. Tag  TABLE  untuk menandai sebuah tabel, TR untuk membentuk baris, TD untuk membentuk kolom. Secara default nilai border=0, jadi tabel akan tampil pada browser tanpa bingkai.  Untuk dapat menampilkan bingkai, maka nilai border harus diberi nilai minimal =1.

Contoh , di bawah ini adalah serangkaian kode HTML  untuk membuat tabel :

<table border="1">
<tr>
<td>tanggal</td>
</tr>
</table>

Hasilnya :

tanggal

CARA MEMBUAT TABEL  1 BARIS 2 KOLOM

Berikut ini adalah cara  membuat tabel  dengan kode HTML 1 baris 2 kolom, lihat penerapannya di bawah ini  :

<table border="1">
<tr>
<td>tanggal</td>
<td>nama</td>
</tr>
</table>

Hasilnya :

tanggal

nama

CARA MEMBUAT TABEL 3 BARIS  1 KOLOM

Berikut ini adalah cara membuat tabel dengan kode HTML 3 baris 1 kolom adalah sebagai berikut :

<table border="1">
<tr>
<td>tanggal</td>
</tr>
<tr>
<td>kota</td>
</tr>
<tr>
<td>jenis kelamin</td>
</tr>
</table>

Hasilnya :

tanggal

kota

jenis kelamin

CARA MEMBUAT TABEL DENGAN ATRIBUT CELLSPACING

Atribut CELLSPACING digunakan untuk menentukan jarak antar sel pada sebuah tabel. Lihat penerapan CELLSPACING  pada kode HTML berikut ini :

<table border="1" cellspacing="10">
<tr>
<td>becak</td>
<td>sepeda</td>
</tr>
<tr>
<td>mobil</td>
<td>motor</td>
</tr>
</table>

Hasilnya :

becak	sepeda
mobil	motor

CARA MEMBUAT TABEL DENGAN ATRIBUT CELLPADDING

Atribut CELLPADDING  digunakan  untuk member jarak antara sel dengan tulisan. Lihat penerapannya pada kode HTML berikut ini :

<table border="1" cellpadding="10">
<tr>
<td>becak</td>
<td>sepeda</td>
</tr>
<tr>
<td>mobil</td>
<td>motor</td>
</tr>
</table>

Hasilnya :

becak	sepeda
mobil	motor

CELLSPACING DAN CELLPADDING  DIPAKAI BERSAMA – SAMA

Jika kedua atribut tersebut dipakai bersamaan dalam pembuatan tabel, maka penerapannya seperti kode HTML berikut ini :

<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td>becak</td>
<td>sepeda</td>
</tr>
<tr>
<td>mobil</td>
<td>motor</td>
</tr>
</table>

Hasilnya :

becak	sepeda
mobil	motor

MENENTUKAN LEBAR KOLOM DENGAN PROSENTASE ( WIDTH=100% )

Jika lebar kolom ditentukan 100 %, maka tampilan tabel akan melebar memenuhi lebar halaman. Jika lebar setiap kolom tidak ditentukan,  maka lebar 100% akan terbagi sama lebar untuk setiap kolomnya. Apabila jumlah kolomnya 2, maka tabel tersebut akan terbagi menjadi 2 sama lebar, masing – masing 50%.

Lebar kolom pada tabel dapat ditentukan tidak sama lebar, artinya masing – masing kolom lebarnya tidak sama. Lihat contoh penerapannya pada kode HTML berikut ini :

<table border="1" width="100%">
<tr>
<td width="25%">becak</td>
<td width="75%">sepeda</td>
</tr>
<tr>
<td width="25%">mobil</td>
<td width="75%">motor</td>
</tr>
</table>

Hasilnya :

becak	sepeda
mobil	motor

MENENTUKAN LEBAR DAN TINGGI KOLOM DENGAN SATUAN PIXEL

Untuk membuat tabel, lebar kolom ( WIDTH ) dan tinggi kolom ( HEIGHT ) dapat ditentukan dengan satuan pixel. Lihat penerapannya dengan kode HTML berikut ini :

<table border="7" >
<tr height="40">
<td width="150">becak</td>
<td width="250">sepeda</td>
</tr>
<tr height="80">
<td width="150">mobil</td>
<td width="250">motor</td>
</tr>
</table>

Hasilnya :

becak	sepeda
mobil	motor

PERATAAN TULISAN DALAM TABEL

Perataan tulisan dalam sebuah tabel menggunakan tag ALIGN  ( untuk perataan horizontal )  dan VALIGN ( untuk perataan vertical ). Untuk lebih memahaminya lihat contoh kode HTML berikut ini :

<table border="7" >
<tr height="40">
<td width="150" align=left valign=top>becak</td>
<td width="250" align=right valign=middle>sepeda</td>
</tr>
<tr height="80">
<td width="150" align=right valign=bottom>mobil</td>
<td width="250" align=center valign=middle>motor</td>
</tr>
</table>

Hasilnya :

becak	sepeda
mobil	motor

Tweet