Membuat Tabel dengan menggunaakan HTML

Membuat Tabel (table) HTML

Assalammualaikum wr. wb

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:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

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>
<td style="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:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

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:

Gabungan 2 baris	Baris 1 Kolom 2
	Baris 2 Kolom 2
Gabungan 2 kolom

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:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2

Nah itulah sedikita sharing saya mengenai cara mudah membuat tabel dan pengaturannya.  Semoga bermanfaat ya 

Share on Google Plus

About ariefffnh@gmail.com