CARA MEMBUAT TABEL DENGAN KODE HTML

 Cara Membuat Tabel Dengan Kode HTML


Kali ini saya akan berbagi cara membuat tabel dengan kode HTML 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, browser akan menampilkan gambar tabel seperti di bawah ini :

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, browser akan menampilkan gambar tabel seperti di bawah ini :

 

 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, browser akan menampilkan gambar tabel seperti di bawah ini :

 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, browser akan menampilkan gambar tabel seperti di bawah ini :

 

 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, browser akan menampilkan gambar tabel seperti di bawah ini :

 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, browser akan menampilkan gambar tabel seperti di bawah ini :

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, browser akan menampilkan gambar tabel seperti di bawah ini :

 

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, browser akan menampilkan gambar tabel seperti di bawah ini :

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, browser akan menampilkan gambar tabel seperti di bawah ini :

Selamat Mencoba & Semoga bermanfaat :)