Membuat Tabel di Blog dengan HTML

Untuk menampilkan sebuah tabel pada blog tidaklah begitu sulit, kita hanya perlu sedikit mengetahui beberapa kode yang diperlukan dalam pembuatan tabel pada blog atau website kita. Pada tulisan ini Saya mencontohkan beberapa tabel dengan menggunakan kode HTML (Hypertext Markup Language).

Sebelumnya Saya akan menjelaskan sekilas beberapa fungsi-fungsi dasar umum yang sering digunakan dalam membuat tabel.

Kode	Fungsi
<table> akhiri dengan </table>	definisi sebuah tabel
<tr> akhiri dengan </tr>	definisi table row / baris
<td> akhiri dengan </td>	definisi table data / kolom / Cell

Berikut ini beberapa contoh tampilan tabel dan kode HTML yang Saya gunakan.

Tabel 1

Judul :	Tabel 1
Keterangan :	Sangat Simpel

Untuk membuat Tabel 1 seperti contoh di atas (ukuran lebarnya otomatis), gunakan skrip kode di bawah ini :

<table border="1">     <!-- fungsi Tabel dg border -->

<tr>             <!** fungsi Baris ke-1 **>

<td>            <!-- fungsi kolom 1 -->

Judul :            <!-- Text, angka, link gambar -->

</td>             <!-- akhir fungsi kolom 1 -->

<td>            <!-- fungsi kolom 2 -->

Tabel 1            <!-- Text, angka, link gambar -->

</td>            <!-- akhir fungsi kolom 2 -->

</tr>             <!** akhir Fungsi Baris ke-1 **>

<tr>             <!** Fungsi Baris 2 **>

<td>            <!-- fungsi kolom 1 -->

Keterangan :        <!-- Text, angka, link gambar -->

</td>            <!-- akhir fungsi kolom 1 -->

<td>            <!-- fungsi kolom 2 -->

Sangat Simpel        <!-- Text, angka, link gambar -->

</td>            <!-- akhir fungsi kolom 2 -->

</tr>             <!** akhir Fungsi Baris 2 **>

</table>         <!-- akhir fungsi Tabel—>

Tabel 2

1. Tabel ini menggunakan	2. lebar tabel yang ditentukan ukurannya	3. kata-kata yang diketik akan turun otomatis
kata-kata di kolom ini rata kiri	kata-kata di kolom ini posisi di tengah	kata-kata di kolom ini rata kanan

Untuk membuat Tabel 2 di atas (ukuran lebarnya ditentukan), gunakan skrip kode di bawah ini :

<table border="1">

<tbody>

<tr>

<td width="100" align="left">1. Tabel ini menggunakan</td>

<td width="100" align="center">2. lebar tabel yang ditentukan ukurannya</td>

<td width="100" align="right">3. kata-kata yang diketik akan turun otomatis</td></tr>

<tr>

<td width="100" align="left"><em>kata-kata di kolom ini rata kiri</em></td>

<td width="100" align="center"><em>kata-kata di kolom ini posisi di tengah</em></td>

<td width="100" align="right"><em>kata-kata di kolom ini rata kanan</em></td></tr></tbody></table></p>

Tabel 3

Si-A	Si-B	Si-C	Si-D	Si-E
Kelompok I		Kelompok II

Untuk membuat kreasi seperti Tabel 3 di atas, gunakan skrip kode di bawah ini :

<table border="1">

<tbody>

<tr>

<td>Si-A </td>

<td>Si-B </td>

<td>Si-C </td>

<td>Si-D </td>

<td>Si-E </td></tr>

<tr>

<th colspan="2">Kelompok I 

<th colspan="3">Kelompok II </th></tr></tbody></table>

Silahkan ganti angka border=”1” menjadi “2, 3, dst” untuk ketebalan garis/ border, dan “0” untuk menghilangkan garis/ border tabel. Selain itu, ganti juga teks atau kata-kata yang ada dalam “cell tabel contoh” di atas dengan teks, angka, atau link gambar Anda.

Untuk latihan Anda, bisa juga dengan mencoba menambah dan menghapus fungsi baris atau kolom untuk menyesuaikan dengan kebutuhan tabel Anda.

Mau mencoba dan melihat hasilnya, silahkan copy dan paste-kan kode HTML tabel tersebut pada website atau blog Anda. Alternatif lain bisa juga dengan menggunakan editor Notepad.

Selamat mencoba, semoga bermanfaat. (jf).

Artikel lainnya di blog ini, silakan dibaca :