Cara Membuat Tabel di Blog

Sebelum adanya standar CSS yang diterapkan pada setiap web browser, kebanyakan para web developer menggunakan tabel untuk mengatur tata letak sebuah halaman web. 

Namun untuk sekarang ini setelah  diterapkanya CSS, penerapan table HTML untuk layout tampilan halaman web sudah tidak disarankan kembali. Disarankan untuk menggunakan CSS saat mengatur tampilan halaman web.

Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. 

Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.

Ketika kamu membuat tabel dengan kode HTML ada beberapa tag atau elemen HTML yang harus anda ketahui. 

Akan tetapi pada dasarnya anda sudah bisa membuat tabel dengan hanya menggunakan 3 elemen HTML berikut ini:

1. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel
2. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
3. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut ini:

1. Elemen <th> digunakan untuk mendefinisikan header di dalam tabel
2. Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel
3. Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
4. Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel

Daripada semakin bingung dengan elemen-elemen tersebut, mari kita praktikkan saja langsung dengan menggunakan 3 elemen dasar yang umum digunakan dalam membuat tabel.

Untuk dapat membuat tabel di blog pertama silakan rubah tampilan menulis (mode compose) ke tampilan HTML (ke mode HTML) 

1. Silakan perhatikan contoh kode berikut ini, dalam pembuatan tabel 2 kolom satu baris:

<table>

<tr>

<td>Contoh Baris 1 - Kolom 1 </td>

<td>Contoh Baris 2 - Kolom 2 </td>

</tr>

</table>

Hasilnya akan seperti ini :

 

Contoh Baris 1 - Kolom 1

Contoh Baris 1 - Kolom 2

2. Silahkan perhatikan contoh kode berikut ini, dalam pembuatan tabel 2 kolom dua baris:

<table>

<tr>

<td>Contoh Baris 1 - Kolom 1  </td>

<td>Contoh Baris 1 - Kolom 1  </td>

</tr>

<tr>

<td>Contoh Baris 2 - Kolom 2 </td>

<td>Contoh Baris 2 - Kolom 2 </td>

</tr>

</table>

Hasilnya akan seperti ini :

Contoh Baris 1 - Kolom 1	Contoh Baris 1 - Kolom 1
Contoh Baris 2 - Kolom 2	Contoh Baris 2 - Kolom 2

Catatan: Untuk menambahkan satu baris dan 2 kolom tabel dibawahnya lagi dan seterusnya silahkan tambahkan kode lagi <td>nama tabel </td> diatas </table> seperti contoh diatas.

3. Silahkan perhatikan contoh kode berikut ini, dalam pembuatan tabel 3 kolom satu baris:

<table>

<tr>

<td>Contoh Baris 1 - Kolom 1  </td>

<td>Contoh Baris 1 - Kolom 2  </td>

<td>Contoh Baris 1 - Kolom 3  </td>

</tr>

</table>

akan seperti ini :

Contoh Baris 1 - Kolom 1

Contoh Baris 1 - Kolom 2

Contoh Baris 1 - Kolom 3

Catatan: Untuk pembuatan tabel 3 kolom dalam satu baris cukup menambahkan <td>nama tabel</td> diatas </table> seperti contoh kode diatas.

4. Silahkan perhatikan contoh kode berikut ini, dalam pembuatan tabel 3 kolom dua baris:

<table>

<tr>

<td>Contoh Baris 1 - Kolom 1  </td>

<td>Contoh Baris 1 - Kolom 2  </td>

<td>Contoh Baris 1 - Kolom 3  </td>

</tr>

<tr>

<td>Contoh Baris 2 - Kolom 1  </td>

<td>Contoh Baris 2 - Kolom 2  </td>

<td>Contoh Baris 2 - Kolom 3  </td>

</tr>

</table>

Hasilnya akan seperti ini:

 

Contoh Baris 1 - Kolom 1	Contoh Baris 1 - Kolom 2	Contoh Baris 1 - Kolom 3
Contoh Baris 2 - Kolom 1	Contoh Baris 2 - Kolom 2	Contoh Baris 2 - Kolom 3

Catatan: untuk menambahkan 3 kolom dalam baris baris selanjutnya/dibawahnya silahkan tambahkan <td>nama tabel</td> diatas</table> dan seterusnya seperti contoh diatas.

<table>

Menggabungkan Sel pada Tabel diblog

Saat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk menggabungkan beberapa sel menjadi satu. 

Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa anda gunakan seperti berikut :

1. Atribut rowspan digunakan untuk menggabungkan baris pada tabel
2. Atribut colspan digunakan untuk menggabungkan kolom pada tabel

Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode  berikut :

 <table>

        <tr>

            <th rowspan="2">Nama</th>

            <th colspan="3">Nilai</th>

        </tr>

        <tr>

            <th>Matematika</th>

            <th>Kimia</th>

            <th>Fisika</th>

        </tr>

        <tr>

            <td>Raden</td>

            <td>76</td>

            <td>80</td>

            <td>81</td>

        </tr>

        <tr>

            <td>Rendi</td>

            <td>84</td>

            <td>70</td>

            <td>75</td>

        </tr>

        <tr>

            <td>Rama</td>

            <td>96</td>

            <td>70</td>

            <td>71</td>

        </tr>

    </table>

Pada kode di atas atribut rowspan memiliki nilai 2 artinya baris yang akan digabung berjumlah 2 baris. 

Sedangkan atribut colspan memiliki nilai 3 artinya kolom yang akan digabung berjumlah 3 kolom. 

Kode di atas juga terdapat tag th yang berfungsi sebagai kepala tabel. Saat ditampilkan data yang ada dalam tag th akan memiliki efek tebal atau bold dibandingkan dengan data yang ada di tag td.

Hasilnya akan seperti ini:

Nama	Nilai
	Matematika	Kimia	Fisika
Raden	76	80	81
Rendi	84	70	75
Rama	96	70	71

Memberikan Warna dan Jarak Antar Sel pada tabel HTML

Pada contoh kode program sebelumnya, tabel yang dihasilkan terkesan saling berdekatan antar satu sel dengan sel yang lain. 

Untuk mengatasi hal itu HTML telah menyediakan atribut cellpadding yang bisa anda gunakan untuk mengatur jarak antar sel. 

Atribut cellpadding ini bisa diterapkan langsung pada tag table seperti berikut:

<table border="1" cellpadding="8">

     ....

</table>

Semakin tinggi nilai yang ada pada atribut cellpadding maka jarak antar sel akan semakin lebar begitupun sebaliknya. 

Anda juga bisa memberikan warna latar belakang pada sel atau tabel dengan menggunakan atribut bgcolor kemudian diisi dengan warna. 

Misal kita akan beri warna latar belakang kuning pada nilai dan abu-abu pada nama. Maka anda hanya perlu menambahkan atribut bgcolor pada tag th seperti berikut ini :

<th bgcolor="grey" rowspan="2">Nama</th> <th bgcolor="yellow" colspan="3">Nilai</th>

Setelah ditambahkan atribut cellpadding pada tag table dan atribut bgcolor pada tag th maka tabel tadi akan tampil seperti pada gambar di bawah ini :

 

Nama	Nilai
	Matematika	Kimia	Fisika
Raden	76	80	81
Rendi	84	70	75
Rama	96	70	71

Cara Memberi Warna pada Background Tabel 

Hampir sama dengan cara memberi warna pada teks tabel, untuk memberi warna pada background tabel, kita hanya perlu menambahkan kode style='background-color:warna' di dalam tag yang akan diberi warna, sehingga menjadi 

Sebagai contoh, saya akan memberi warna  pada background dalam tabel 2 kolom berikut kodenya:

<table border="1" cellpadding="8">

<tr>

<td style='background-color:Chartreuse'>Contoh baris 1 - Kolom 1 </td>

<td>Contoh Baris 1 - Kolom 1 </td>

</tr>

</table>

Hasilnya akan seperti ini :

Contoh baris 1 - Kolom 1

Contoh Baris 1 - Kolom 1

Cara untuk membuat teks /tulisan berada ditengah dengan menggunakan atribut "align" seperti contoh kode dibawah:

<p align="center">Tulisan ditengah</p>

atau

<center>Tulisan ditengah</center>

Demikian Cara Membuat Tabel di Blog. Sangat mudah sekali Silahkan anda praktekan sendiri diblog kalian. Terima kasih atas kunjungannya. Semoga berhasil ya.