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.

Artikel terkait :

Cara membuat blog atau website profesional dengan mudah
Belajar SEO – cara mudah no.1 di Google nggak pake lama

Related Post to Cara Membuat Tabel Dengan Kode Html

Belajar SEO, Materi Ini Yang Wajib Anda Kuasai

Posted at September 11, 2018

Belajar SEO. Berikut ini adalah materi yang harus anda kuasai untuk menembus peringkat 1 di Google.  Sebelum menyinggung bagaimana kita belajar... Read More

Cara Membuat Blog Gratis Dan Menghasilkan Uang

Posted at August 4, 2018

Cara membuat blog gratis dan menghasilkan uang yang merupakan pengalaman pribadi, dan sudah banyak dibuktikan oleh para internet marketer dunia, dan... Read More

Pengertian Apa Itu Hosting Dan Fungsinya

Posted at June 12, 2018

Apa itu hosting? Berikut ini adalah pengertian hosting dan fungsinya, pelajari selengkapnya berikut ini.   PENGERTIAN HOSTING Dalam dunia internet, istilah... Read More

Siapa Saja Yang Perlu Memiliki Blog Atau Website

Posted at October 24, 2017

Jika kita mendengar istilah blog atau website, pertanyaan mendasar yang ada di pikiran kita adalah “untuk apa sih memiliki blog?” atau... Read More

Perlunya Belajar SEO Untuk Blog Kesayangan Anda

Posted at October 2, 2017

Blog atau website sangat berhubungan erat dengan SEO ( Search Engine Optimization ). Sebenarnya SEO itu apa sih? SEO tidak lain... Read More