CARA MEMBUAT TABEL DENGAN KODE HTML

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.

Sumber : https://senakobayakawa21.wordpress.com/2015/08/18/membuat-tabel-dengan-html/

Tweet