Cara Membuat Tabel HTML untuk Posting Blog Anda
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.
Diartikel 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 tidak sesuai dengan perintah setelan tabel CSS (Cascading Style Sheets) di template blog Anda, namun tidak ada salahnya Anda 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:
Tabel HTML 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.
Cara membuat tabel HTLM satu baris dan 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:
Cara 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 |
Cara 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...
Cara 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 |
Cara 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:
Tabel HTML 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:
Cara 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.
Cara 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.
Cara 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.
Sebagai ganti dari gambaran kode diatas telah saya siapkan hasil dari file aplikasi, oh iya, mungkin ini berhasil diterapkan di posting Anda. lihat hasil sebenarnya dari atribut Cellpacing dan Cellpadding dibawah:
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:
Cara 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.
Cara 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.
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