Membuat Tabel Dengan HTML

Membuat tabel 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.

Tweet

Artikel keren lainnya:

Ditulis oleh famadaya pada hari Thursday, January 8, 2015