TUTORIAL BELAJAR HTML: CARA MEMBUAT TABEL DI POSTINGAN

Oke sahabat blogger, kali ini saya ingin menjelaskan tentang bagaimana cara membuat tabel dengan HTML.

Coba anda lihat 2 tabel di bawah ini:
1. Tabel sederhana/biasa.

1.cara-membuat-tabel-HTML-di-postingan.jpg

  1. Tabel berwarna:

2.-cara-membuat-tabel-di-postingan.jpg

Setelah melihat kedua tabel tersebut yuk kita mulai belajar membuatnya.Dalam sebuah tabel terdapat 3 tag utama yaitu:

Tag tabel
Tag tabel merupakan tag utama untuk membentuk sebuah tabel:

<table border=”1″>
……
</table>

 
Dalam tag table pembuka diatas terdapat atribut tambahan yaitu border=”1″. Atribut border berfungsi untuk membuat garis-garis dalam tabel. “1” menandakan ketebalan garisnya. Selain attribut border kita juga bisa menambahkan attribut cellpadding=”2″ untuk membuat jarak antara tulisan dan garisnya. Nilai dari atribut border dan cellpadding bisa anda ganti sesuka hati. Untuk cellpadding anda mempunyai 2 opsi yaitu menambahkan atau tidak menambahkan, cellpadding tidak memberikan efek yang berpengaruh besar terhadap efek tampilan tabel.

<table border=”1″ cellpadding=”2″>
……
</table>

 
Nah untuk membuat judul tabel seperti nama tabel diatas tadi maka kita membutuhkan tag tambahan yaitu tag <caption align=”top”>

<caption align=”top”>
..Judul tabel..
</caption>

 
Align=”top” mengartikan bahwa judul tabel akan ditampilkan diatas tabel, gunakan align=”bottom” jika ingin membuat judul di bawah tabel.

Penulisan lengkapnya:

<table border=”1″ cellpadding=”2″>
<caption align=”top”>
..Judul tabel..
</caption>
……
</table>

 
Tag baris dan tag tabel data

Setelah tadi kita membuat tag tabel pembuka, kemudian menambahkan atribut border, cellpadding dan juga caption, sekarang kita akan melanjutkan ke tahap berikutnya yaitu membuat baris. Untuk membuat baris kita membutuhkan tag baris <tr> yang merupakan singkata dari tabel rows. Nah dalam tabel <tr> inilah nanti akan di isi dengan data (tabel data), tag tabel data ditulis dengan <td>

Untuk membuat jumlah kolom kita harus menambahkan atribut= colspan=”3″. Nilai 3 silahkan isi dengan jumlah kolom yang di butuhkan pada baris pertama yang mana biasanya di baris pertama ini berisi tentang Nama tabel

Contoh:

<table border=”1″ cellpadding=”2″>
<caption align=”top”>
..Judul tabel..
</caption>

<tr>
<td colspan=”3″> <center>Baris 1 untuk nama tabel</center></td>
</tr>

<tr>
<td>Kolom 1 baris 2</td>
<td>kolom 2 baris 2 </td>
<td>kolom 3 baris 2</td>
</tr>

<tr>
<td>Kolom 1 baris 3</td>
<td>kolom 2 baris 3</td>
<td>kolom 3 baris 3</td>
</tr>

 
Oke lagi-lagi jurus jitu belajar coding adalah praktek, praktek dan praktek, jadi mari kita praktek, silahkan anda tulis coding diatas tadi kemudian simpan dengan nama :Tabel.html. Silahkan anda lihat, maka akan muncul tampilan seperti berikut di layar:

3.-cara-membuat-tabel-di-postingan-blog.jpg

Gimana mudah kan? Sudah bisa membaca arti tabel diatas kan? Saya jelaskan lagi tentang baris dan kolom diatas,

<tr>
<td colspan=”3″> <center>Baris 1 untuk nama tabel</center></td>
</tr>

 
Dari kode diatas bisa disimpulkan bahwa tag <tr> pertama merupakan awal baris tabel pertama, baris pertama. Colspan=”3″ menandakan bahwa dalam tabel tersebut akan ada 3 kolom, tapi khusus di baris pertama ini colspan=”3″ menandakan 3 kolom yang digabung menjadi 1 kolom.

<tr>
<td>Kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
<td>kolom 3 baris 2</td>
</tr>

 
Dari kode diatas bisa disimpulkan bahwa tag <tr> merupakan tag pembuka untuk baris kedua. Tag </tr> sebagai tag penutup baris ke 2. Nah dalam baris ini ada 3 kolom data sebagai isi baris yaitu kolom 1, 2 dan 3 yang ditandai dengan tag <td> dan ditutup dengan tag </td>. Nah setelah baris selesai juga jangan lupa di tutup dengan tag penutup baris </tr>

Tag <tr> berikutnya menandakan awal dari baris ke-3 beserta tabel data/isinya dan seterusnya. Jangan lupa akhir tabel beri tag </table> sebagai tag penutup tabel.

Oke untuk membuat contoh tabel biasa mari kita coba tuliskan kode di bawah ini kemudian simpan dengan nama: tabel1.html

<table border=”1″ cellpadding=”2″>
<caption align=”top”>
<b>Tabel Dibuat Via Handphone <br>
Feryarya.com</b></caption>

<tr>
<td colspan=”4″> <center>Daftar Siswa SMPN 4 Mandiraja</center></td>
</tr>

<tr>
<td>No</td>
<td>Nama </td>
<td>Tgl.lahir</td>
<td>Alamat</td>
</tr>

<tr>
<td>1</td>
<td>Wulandari Ayu P</td>
<td>13-05-1998</td>
<td>Jalatunda</td>
</tr>

<tr>
<td>2</td>
<td>Ratna Ayu</td>
<td>22-01-1997</td>
<td>Jalatunda</dt>
</tr>

<tr>
<td>3</td>
<td>Diah dwi S</td>
<td></td>
<td>Jalatunda</td>
</tr>

<tr>
<td>4</dt>
<td>Endah puspita</td>
<td>27-09-1998</td>
<td>Merden</td>
</tr>

<tr>
<td>5</td>
<td>Dian dwi T</td>
<td>28-04-1997</td>
<td>Kaliwungu</td>
</tr>

<tr>
<td>6</td>
<td>Ajeng Prameswari</td>
<td>28-10-199</td>
<td>Kaliwungu</td>
</tr>
</table>

 
Tampilan di browser:

1.cara-membuat-tabel-HTML-di-postingan.jpg

Selain menggunakan tag pembuka dan penutup < center> dan < /center> untuk membuat posisi nama tabel ditengah kita juga bisa mengggunakan tag head <th> dan </th>

Untuk membuat tabel jadi memiliki background warna maka kita tinggal memasukan/menyisipkan atribut bgcolor=”blue” ke dalam setiap tag <tr> yang akan diberi warna, sedang nilai warnanya silahkan ganti sesuka anda. Contoh penulisannya menjadi:

<tr bgcolor=”blue”>

 
Yuk kita coba buat, tulis kembali koding praktek yang kita buat tadi dan kita edit sedikit dengan menambahkan attribut bgcolor=”blue” ke dalam tag <tr> .

<table border=”1″ cellpadding=”2″>
<caption align=”top”><b>Tabel Dibuat Via Handphone <br>
Feryarya.com</b> </caption>

<tr bgcolor=”blue”>
<td colspan=”4″> <center>Daftar Siswa SMPN 4 Mandiraja</center></td>
</tr>

<tr bgcolor=”red”>
<td>No</td>
<td>Nama </td>
<td>Tgl.lahir</td>
<td>Alamat</td>
</tr>

<tr bgcolor=”pink”>
<td>1</td>
<td>Wulandari Ayu P</td>
<td>13-05-1998</td>
<td>Jalatunda</td>
</tr>

<tr bgcolor=”pink”>
<td>2</td>
<td>Ratna Ayu</td>
<td>22-01-1997</td>
<td>Jalatunda</dt>
</tr>

<tr bgcolor=”pink”>
<td>3</td>
<td>Diah dwi S</td>
<td></td>
<td>Jalatunda</td>
</tr>

<tr bgcolor=”pink”>
<td>4</dt>
<td>Endah puspita</td>
<td>27-09-1998</td>
<td>Merden</td>
</tr>

<tr bgcolor=”pink”>
<td>5</td>
<td>Dian dwi T</td>
<td>28-04-1997</td>
<td>Kaliwungu</td>
</tr>

<tr bgcolor=”pink”>
<td>6</td>
<td>Ajeng Prameswari</td>
<td>28-10-199</td>
<td>Kaliwungu</td>
</tr>
</table>

 
Silahkan anda simpan dengan nama: tabelwarna.html dan kemudian silahkan anda buka file hasil editan anda. Maka akan muncul tampilan seperti berikut di browser:

4.cara-membuat-tabel.jpg

Oke gan saya kira cukup sekian dulu tutorial cara membuat tabel sederhana dan berwarna, jika ada kesalahan atau kekurangan dalam penulisan mohon berikan komentar, semoga tutorial ini bermanfaat. Sampai jumpa di artikel-artikel berikutnya.

Tinggalkan Balasan