Membuat Tabel (table) HTML

Permisi agan2 igin2, kali ini saya akan sedikit cerita tentang cara membuat tabel dalam HTML. Tabel dalam website banyak digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom agar tampak lebih rapi dan mudah dipahami. Dengan kode HTML sederhana Kita dapat membuat tabel statis , Informasi yang muncul dari data yang ditulis dalam kode HTML sederhana. Dalam web desain, tabel juga bisa membuat penampilan lebih cantik dan rapi . Dalam html tabel diawali dengan tag <table> dan diakhiri tag </table> ,kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris baru pada tabel kemudian tag <td> (table data) adalah sebagai tempat data yang ditampilkan. Tabel bersarang (nested table) juga dapat dibuat dalam HTML . Berikut adalah contoh kode membuat table sederhana dalam html :

<table border=”1″>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil kode html tabel di atas adalah:

Keterangan tag dalam membuat tabel dan atribut html:

a . tag <table> ….. </table>
tag awal dan akhir membuat tabel di html . tag tabel memiliki beberapa atribut seperti height, width, border lainnya untuk mengatur tinggi tabel, lebar tabel, dan tebal garis tepi, dan masih banyak lagi atribut table dalam html.

b . tag <th> ….. </th>
Tag <th> pengganti tag <td> digunakan untuk membuat header titel dari baris maupun kolom. Secara default teks pada tag <th> menggunakan teks tebal dan letaknya di tengah pada baris.

c . tag <caption> ….. </caption>
Tag caption digunakan untuk membentuk judul pada table . Judul dapat ditandai dengan apa pun . Posisi default di bagian atas table.

d . tag <tr> ….. </tr>
Mendefinisika baris dalam tabel. Kita dapat mengatur teks dalam satu baris banyak kolom menggunakan : atribut color (warna), letak teks,dll seperti rata kiri, rata kanan, warna teks merah, dll.

e . tag <td> ….. </td >
tag td digunakan untuk membuat kolom tabel yang berisi data. Tag td memiliki beberapa atribut di antaranya color, background. Pada table kita bisa membuat banyak kolom dengan tag td.

f . atribut <colspan>
Atribut colspan pada html tabel digunakan untuk menggabungkan dua atau lebih kolom agar lemih menarik. Nilai bisa variasi tergantung kebutuhan, misalnya <td colspan=”2″>…</td>. Yang artinya menggabungkan 2 kolom.

h. atribut <rowspan>

Dalam html sederhana atribut rowspan digunakan untuk menggabungkan dua atau lebih baris pada tabel html. contoh: <td rowspan=”2″> artinya menggabungkan 2 baris menjadi satu baris. yang lainnya titetap 2 baris.

Mengatur lebar dan tinggi tabel (table) html

Kita bisa mengatur lebar table dan tinggi tabel dalam html dengan menggunakan atribut width dan height. Kita juga bisa mengatur tabel menggunakan CSS agar lebih indah dan cantik. he….! Ingat satuan dalam mengatur tinggi dan lebar tabel menggunakan satuan pixel dan persen.

Berikut  contoh tabel sederhana dalam html dengan lebar300px dan  tinggi baris 1 adalah 20px. Atau bisa menggunakan persentase, contohnya width=40% yang berarti mempunyai lebar 40% dari ukuran halaman web/html.

<table border=”1″ width=”300″ height=”100″>
<tr>
<tdstyle="height:40px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Output dari pengaturan ukuran tabel html:

Menggabungkan kolom dan baris pada tabel html

Perintah untuk menggabungkan dua atau lebih baris dan kolom adalah atribut rowspan dan colspan seperti penjelasan di atas. Kita sebaiknya menggunakan atribut ini tidak banyak2 gan gin. Oke…..

<table border=”1″>
<tbody>
<tr>
<td style=”width: 50%;” rowspan=”2″>Gabungan 2 baris</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td colspan=”2″>Gabungan 2 kolom</td>
<tr>
<tbody>
</table>

Hasilnya dari gabungan dua kolom html:

Membuat background pada tabel html

Kali ini saya cerita membuat tabel background agar lebih menarik. Untuk membuat background pada tabel kita gunakan atribut style seperti css dengan atrbut background. Berikut contoh tabel dengan background warna abu2  dengan heading warna biru.

<table style=”background: yellow;” width=”75%” border=”1″>
<tr>
<th style=”background: green; width: 50%;”>Header Kolom 1</th>
<th style=”background: green;”>Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
</table>

Output kode html membuat bakground pada tabel html:

Mengatur letak Tabel HTML pada halaman, apakah diletakan di kiri, kanan, atau tengah. Berikut cara mengatu letak tabel html dengan atribut align:

<table border=”1″ align=”center”>  //tengah

<table border=”1″ align=”right”>  //kanan

<table border=”1″ align=”left”>  //kiri

Contoh Membuat Website Statis dengan Tabel (Table) HTML Bisa agan lihat dibawah ini kode dan hasilnya:

<html>
<head>
<title>Halaman Hobby</title>
</head>
<body bgcolor=”green”>
<center>
<table width=”60%” border=”1″ bgcolor=”white”>
<tr>
<td colspan=”2″ bgcolor=”yellow”><h1>Website Ganang</h1></td>
</tr>
<tr>
<td width=”26%” bgcolor=”B6FAF8″>
<a href=”biodata.html”> Halaman Biodata</a><br>
<a href=”galery.html”> Halaman Galery</a>
</td>
<td width=”74%”>
<h3>Halaman Hobby Ganang</h3>
<p>Halaman ini berisi hobby saya dan kegemaran saya baik yang sering lakukan maupun jarang. </p>
<p>Berikut Hobby saya:</p>
<ol>
<li>Lari-lari</li>
<li>Badminton</li>
<li>Bersepeda</li>
<li>Internetan</li>
<li>Memancing</li>
</ol>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”yellow”><center>© Copyright 2014</center></td>
</tr>
</table>
</center>
</body>
</html>

Hasil Membuat Tabel HTML untuk Website Statis sebagai berikut:

Selain Membuat HTML untuk website, Tabel HTML juga digunaka untuk daftar no, nama dan kelas seperti tabel pada umumnya. Berikut cara membuat tabel HTML untuk daftar nama atau list.

<table border=”1″>
<tr bgcolor=”yellow”>
<td>No</td>
<td>Nama</td>
<td>Kelas</td>
</tr>
<tr>
<td>1</td>
<td>Ganang Julianto</td>
<td>XI-TM1</td>
</tr>
<tr>
<td>2</td>
<td>Arif Fudin</td>
<td>XI-TM2</td>
</tr>
<tr>
<td>3</td>
<td>Bayu Muhammad</td>
<td>XI-TM2</td>
</tr>
<tr>
<td>4</td>
<td>Dimas Subagyo</td>
<td>XI-TM1</td>
</tr>
</table>

Hasil Membuat daftar nama dengan tabel HTML sebagai berikut:

Nah itulah sedikita sharing saya mengenai cara mudah membuat tabel dan pengaturannya.  Semoga bermanfaat ya. Mkasih, jgn komentar ya!! he