Cara Membuat Tabel Dengan Kode Html

TAG DASAR

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 :

Mudah – mudahan materi belajar HTML tentang cara membuat tabel dengan kode HTML di atas bermanfaat bagi anda.