Cara Membuat Tabel, Kotak untuk Posting Blog Anda

Cara membuat tabel di posting artikel blog -Membuat tabel HTML (Hypertext Markup Language) bisa digunakan diposting blog sebagai pelengkap tulisan dan bertujuan untuk mengunggah data-data dalam bentuk infografik sesuai dengan tujuan yang ingin dicapai.

Tabel juga berguna untuk menyampaikan informasi dengan cara yang lebih simpel dan mudah untuk dipahami.

Website atau blog yang berorientasi pada... salah satunya menjual barang (toko online) bisa juga membuat tabel dan menggunakan tabel untuk menyusun data-data seperti: Nama barang, harga, dan lainnya.

Di artikel ini Anda akan mendapatkan panduan cara membuat tabel dengan kode HTML untuk digunakan diposting blog, jadi, cara membuat tabel HTML yang akan dijelaskan dibawah mungkin nantinya tidak sesuai dengan perintah setelan template blog, namun tidak ada salahnya mencoba membuat tabel HTML dan menerapkannya pada posting blog, atau Anda bisa menyimpannya untuk file Anda.

Sebelum memulai membuat tabel HTML alangkah baiknya jika membaca dulu uraian lengkap tentang beberapa tag kode HTML untuk membuat tabel HTML.

Ada 4 tag kode HTML dasar untuk membuat tabel HTML yang akan dijelaskan di artikel ini, selengkapnya lihat infografik dibawah:

No T A G	4 Tag Tabel HTML	Penjelasan 4 Tag Tabel HTML
1	Table	Adalah wadah dari baris dan kolom table atau kotak bingkai bagian paling luar pada tabel HTML
2	Caption	Untuk membuat judul tabel HTML
3	TR (Table Row)	Adalah pembuat baris didalam tabel HTML
4	TD (Table Data)	Adalah pembuat kolom didalam tabel

Sekarang mari kita mulai membuat tabel HTML untuk posting blog atau website Anda.

Dibawah ini adalah cara membuat tabel HTML dengan menggunakan tag Tabel, Caption, TR, dan TD dengan satu baris satu kolom:

<table border="1">

<caption>Contoh </caption>

<tr> <td> Table </td> </tr></table>

Jika kode HTML untuk membuat tabel diatas diunggah di blog maka tampilan tabel nya akan terlihat seperti di bawah ini:

Contoh

Table

Membuat tabel HTML 2 baris 2 kolom:

<table border="1">

<caption>Contoh </caption>

<tr> <td> Meja </td>

<td> Kursi </td> </tr>

<tr> <td> Lemari </td>

<td> Jendela </td> </tr>

</table>

Kode HTML untuk membuat tabel diatas Jika diposting di blog maka tampilan gambar tabel nya akan nampak seperti ini:

Contoh Tabel

Meja	Kursi
Lemari	Jendela

Membuat tabel HTML 3 baris 3 kolom:

<table border="1">

<caption>Contoh Tabel HTML </caption>

<tr> <td> Meja 1</td>
<td> Kursi 1</td>
<td> Lemari 1</td> </tr>

<tr> <td> Meja 2</td>
<td> Kursi 2</td>
<td> Lemari 2</td> </tr>

<tr> <td> Meja 3</td>
<td> Kursi 3</td>
<td> Lemari 3</td> </tr>

</table>

Jika diunggah diposting blog maka kode pembuat tabel HTML diatas hasilnya akan seperti ini:

Contoh Tabel HTML

Meja 1	Kursi 1	Lemari 1
Meja 2	Kursi 2	Lemari 2
Meja 3	Kursi 3	Lemari 3

Selanjutnya...
Membuat tabel HTML 4 baris 4 kolom:

<table border="1">

<caption>Contoh tabel HTML 4 baris 4 kolom</caption>

<tr> <td> Meja 1</td>
<td> Kursi 1</td>
<td> Lemari 1</td>
<td> Jendela 1 </td> </tr>

<tr> <td> Meja 2</td>
<td> Kursi 2</td>
<td> Lemari 2</td>
<td> Jendela 2 </td></tr>

<tr> <td> Meja 3</td>
<td> Kursi 3</td>
<td> Lemari 3</td>
<td> Jendela 3 </td> </tr>

<tr> <td> Meja 4</td>
<td> Kursi 4</td>
<td> Lemari 4</td>
<td> Jendela 4 </td></tr>

</table>

Kode tabel diatas jika dipublikasikan di blog maka browser internet Anda akan terlihat gambar tabel nya seperti berikut ini:

Contoh tabel HTML 4 baris 4 kolom

Meja 1	Kursi 1	Lemari 1	Jendela 1
Meja 2	Kursi 2	Lemari 2	Jendela 2
Meja 3	Kursi 3	Lemari 3	Jendela 3
Meja 4	Kursi 4	Lemari 4	Jendela 4

Membuat tabel HTML 5 baris 5 kolom:

<table border="1">

<caption>Contoh membuat tabel HTML 5 baris 5 kolom</caption>

<tr> <td> Meja 1</td>
<td> Kursi 1</td>
<td> Lemari 1</td>
<td> Jendela 1 </td>
<td> Rumah 1 </td></tr>

<tr> <td> Meja 2</td>
<td> Kursi 2</td>
<td> Lemari 2</td>
<td> Jendela 2 </td>
<td> Rumah 2 </td></tr>

<tr> <td> Meja 3</td>
<td> Kursi 3</td>
<td> Lemari 3</td>
<td> Jendela 3 </td>
<td> Rumah 3 </td> </tr>

<tr> <td> Meja 4</td>
<td> Kursi 4</td>
<td> Lemari 4</td>
<td> Jendela 4 </td>
<td> Rumah 4 </td></tr>

<tr> <td> Meja 5</td>
<td> Kursi 5</td>
<td> Lemari 5</td>
<td> Jendela 5 </td>
<td> Rumah 5 </td></tr>

</table>

Kode untuk membuat tabel HTML diatas jika di unggah di blog akan terlihat hasil tabel nya seperti berikut ini:

Contoh membuat tabel HTML 5 baris 5 kolom

Meja 1	Kursi 1	Lemari 1	Jendela 1	Rumah 1
Meja 2	Kursi 2	Lemari 2	Jendela 2	Rumah 2
Meja 3	Kursi 3	Lemari 3	Jendela 3	Rumah 3
Meja 4	Kursi 4	Lemari 4	Jendela 4	Rumah 4
Meja 5	Kursi 5	Lemari 5	Jendela 5	Rumah 5

Setelah Anda mengetahui bagaimana cara membuat tabel HTML dasar menggunakan tag Table, Caption, TR dan TD diatas, selanjutnya kita akan membuat tabel dengan menambahkan perlengkapan atau Atribut tabel.

Dan berikut ini adalah penjelasan dari 8 atribut kode HTML pendukung dari ke 4 tag kode HTML dasar pembuat tabel diatas, yaitu atribut:

No A T R I B U T	8 Atribut Tabel HTML	Penjelasan 8 Atribut Tabel HTML
1	Colspan	Gunanya untuk menyatukan tabel kolom secara horizontal
2	Rowspan	Gunanya untuk menyatukan tabel baris secara vertikal
3	Height	Gunanya untuk membuat tinggi kotak tabel
4	Width	Gunanya untuk membuat lebar kotak tabel table
5	Cellspacing	Gunanya untuk membuat jarak sel antara kotak tabel
6	Cellpadding	Gunanya untuk memberi jarak antara sel kotak tabel dan isi/tulisan
7	Align	Gunanya untuk membuat perataan teks (Horizontal) dari kiri (left), tengah (center), kanan (right)
8	Valign	Gunanya untuk membuat perataan teks (vertikal) dari atas (top), tengah (middle), dan bawah (bottom)

Setelah membaca uraian diatas diharapkan buat pemula, khususnya saya sendiri dapat menambah lagi sedikit pengetahuan tentang cara membuat tabel dengan kode HTML., bahwa untuk membuat tabel HTML yang lebih menarik lkita perlu menambahkan perlengkapan atau atribut pada tabel

Selanjutnya kita akan membuat tabel HTML dengan menambahkan atribut Colspan pada tabel, gunanya untuk menyatukan kolom dari kiri ke kanan, lihat cara penerapan atribut Colspan yang ditandai warna merah:

Membuat tabel HTML dengan atribut Colspan:

<table border="1">

<tr> <td colspan="3"> Colspan</td> </tr>

<tr><td>Meja 1</td>
<td>Kursi 1</td></tr>

<tr><td>Meja 2</td>
<td>Kursi 2</td></tr></table>

Jika kode tabel HTML diatas diunggah diposting maka hasil akan seperti ini:

Colspan
Meja 1	Kursi 1
Meja 2	Kursi 2

Cara mengatur nilai satuan atribut Colspan dan Rowspan didalam tabel adalah... misal didalam tabel ada 2 baris kolom maka nilai Colspan di isi dengan 3.
Contoh, 2 baris kolom + 1 Colspan = 3.

Sekarang cara membuat tabel HTML dengan atribut Rowspan untuk menyatukan kotak baris dari atas kebawah, lihat cara penerapan atribut Rowspan pada kode tabel yang diberi warna merah.

Membuat tabel HTML dengan atribut Rowspan:

<table border="1">

<tr> <td rowsspan="4"> Rowspan</td> </tr>

<tr><td>Meja 1</td>
<td>Kursi 1</td></tr>

<tr><td>Meja 2</td>
<td>Kursi 2</td></tr>

<tr><td>Meja 3</td>
<td>Kursi 3</td></tr></table>

Kode diatas jika diposting di blog maka hasil tabelnya terlihat dibawah ini:

Rowspan
	Meja 1	Kursi 1
	Meja 2	Kursi 2
	Meja 3	Kursi 3

Langkah berikutnya cara membuat tabel HTML dengan menambahkan atribut Heigh dan Width untuk mengatur tinggi dan lebar kotak tabel dengan satuan pixel (px), mari simak cara penerapan atribut Height dan Width yang diberi warna merah dibawah.

Membuat tabel HTML dengan atribut Height dan Width:

<table border="1">

<tr height="80"> <td width="100"> Meja 1</td>
<td width="180"> Lemari 1</td> </tr>

<tr height="80"> <td> Meja 2</td>
<td> Lemari 2</td> </tr>

<tr height="80"> <td> Meja 3</td>
<td> Lemari 3</td> </tr>

</table>

Contoh kode HTML untuk membuat tabel diatas Jika diunggah di posting blog maka hasil tabel nya akan terlihat seperti ini:

Meja 1	Lemari 1
Meja 2	Lemari 2
Meja 3	Lemari 3

Jika Anda ingin membuat tabel HTML dengan memberi jarak antara sel kotak tabel, dan memberi jarak tulisan agar tidak terlalu dekat dengan dinding sel garis tabel, maka Anda perlu menambahkan atribut Cellspacing dan Cellpadding.

Berikutnya cara membuat tabel HTML dengan atribut Cellspacing dan Cellpadding, lihat cara menerapkannya dibawah yang ditandai warna merah:

<table border="1" cellspacing="10px"cellpadding="10px">

<tr height="80"> <td width="100"> Meja 1</td>
<td width="160"> Lemari 1</td> </tr>

tr height="80"> <td> Meja 2</td>
<td> Lemari 2</td> </tr>

<tr height="80"> <td> Meja 3</td>
<td> Lemari 3</td> </tr>

</table>

Jika kode tabel HTML diatas diunggah di blog ini maka atribut Cellspacing, Cellpadding, Align dan Valign kurang berfungsi semestinya karena bertentangan dengan perintah CSS di template blog ini.

Namun tidak jadi soal karena atribut diatas tidak terlalu penting untuk diterapkan diposting blog.

Langkah selanjutnya untuk membuat tabel dengan kode HTML kita tambahkan kode diatas dengan atribut Align dan Valign gunanya untuk mengatur peretaan teks.

Atribut Align untuk membuat rata tulisan kiri (left), tengah (center) dan kanan (right).

Atribut Valign untuk membuat rata tulisan atas (top), tengah (middle) dan bawah (bottom).

Sekalian saja cara membuat tabel HTML dengan menggabungkan atribut Width, height, Cellspacing, Cellpadding dan Align, Valign.

Perhatikan contoh penerapan atribut Align dan Valign pada table dibawah yang diberi warna merah:

Membuat tabel HTML dengan atribut Align dan Valign:

<table border="8" cellspacing="12" cellpadding="6">

<tr height="80"> <td width="100" align="left" valign="top"> Meja 1</td>
<td width="100" align="center" valign="bottom"> Kursi 1</td>
<td width="100" align="right" valign="top"> Lemari 1</td> </tr>

<tr height="25"> <td width="100" align="left" valign="middle"> Meja 2</td>
<td width="100" align="center" valign="middle"> Kursi 2</td>
<td width="100" align="right" valign="middle"> Lemari 2</td> </tr>

<tr height="80"> <td width="100" align="left" valign="bottom"> Meja 3</td>
<td width="100" align="center" valign="top"> Kursi 3</td>
<td width="100" align="right" valign="bottom"> Lemari 3</td> </tr>

<tr height="25"> <td width="100" align="left" valign="middle"> Meja 4</td>
<td width="100" align="center" valign="middle"> Kursi 4</td>
<td width="100" align="right" valign="middle"> Lemari 4</td> </tr>

Contoh kode-kode untuk membuat tabel HTML diatas jika dipublikasikan di blog maka hasilnya akan terlihat seperti ini:


Setelah kita belajar cara membuat tabel HTML menggunakan tag Table, Caption, TR dan TD.

Dan ditambah atribut Colspan, Rowspan, Heigth, Width, Cellspacing, Cellspadding, Align dan Valign.

Sekarang telah tiba saatnya kita akan membuat tabel HTML yang lebih menarik, keren dan lengkap dengan menambahkan atribut Warna pada tabel.

Ok, bagaimana cara membuat tabel HTML berwarna dengan menambahkan atribut Warna, simak caranya dibawah.

Membuat tabel HTML berwarna:

<table style="background-color:silver;border:8px inset violet;cellspacing:0;cellpadding:0;">

<tr height="30">
<td style="background-color:black;" width=" 15px" align="center"valign="middle"> <font color="white">No</font></td>
<td style="background-color:green;" width=" 60px" align="center"valign="middle"> <font color="white">Barang</font></td>
<td style="background-color:red;" width="60px"align="center"valign="middle"><font color="white"> Harga</font></td>
<td style="background-color:blue;" width="180px"align="center"valign="middle"><font color="white"> Minat Klik Beli</font></td> </tr>

<tr height="60px">
<td style="background-color:black;" width=" 15px" align="center"valign="middle"> <font color="white">1</font></td>
<td width="60px"align="center"valign="middle"> Kaos</td>
<td width="60px"align="center"valign="middle"> 90k / Pc</td>
<td width="180px"align="center"valign="middle"> Beli</td> </tr>

<tr height="60px">
<td style="background-color:black;" width=" 15px" align="center"valign="middle"> <font color="white">2</font></td>
<td width="60px"align="center"valign="middle"> Handuk</td>
<td width="60px"align="center"valign="middle"> 120k / Pc</td>
<td width="180px"align="center"valign="middle"> Beli</td> </tr>

<tr height="60px">
<td style="background-color:black;" width=" 15px" align="center"valign="middle"> <font color="white">3</font></td>
<td width="60px"align="center"valign="middle"> Topi <font color="blue"><b>C</font><font color="red">S</font><font color="green">B</b></font></td>
<td width="60px"align="center"valign="middle"> 200k / buah</td>
<td width="180px"align="center"valign="middle"> Beli</td> </tr>

</table>

Kode untuk membuat tabel HTML berwarna diatas jika diposting di blog atau website maka akan terlihat lebih menarik, lihat dibawah:

No	Barang	Harga	Minat Klik Beli
1	Kaos	90k / Pc	Beli
2	Handuk	120k / Pc	Beli
3	Topi CSB	200k / buah	Beli

Sudah cukup sampai disini tentang cara membuat table dengan kode HTML untuk posting blog, langkah selanjutnya silahkan kreasikan sendiri.

Kesimpulan: Dengan memahami kode HTML dasar diatas untuk membuat tabel, Anda pun dapat mengkreasikan sendiri tampilan tabel sesuai dengan yang Anda mau, seperti menambah baris tabel, menambah kolom tabel, mengatur tinggi dan lebar kolom tabel, menambah warna pada tabel dan lainnya.

Walaupun kode HTML pembuat tabel diatas masih terbilang tahap dasar akan tetapi itu sudah termasuk menu lengkap untuk membuat tabel. Dan jika Anda ingin menambah cantik dan keren tampilan tabel, maka Anda perlu lagi menambahkan atribut lainnya, seperti menambahkan atribut warna, teks berjalan, gambar, link atau tautan dan lainnya.

Untuk membuat tabel lebih menarik dengan menambahkan aneka warna, baca juga: Cara membuat kode warna di posting blog sampai bisa sendiri

Posted by Sakri

Jika artikel ini cukup bermanfaat silahkan bagikan artikel ini ke:

Facebook Twitter Google+