Friday, January 8, 2016

Pengertian dan Penggunaan Table Dalam HTML

Table?
Apa itu?
Sebuah Meja?

Bukan, table bukanlah sebuah meja melainkan sebuah bagian dari bahasa pemrograman HTML yang berfungsi untuk menampilkan informasi dalam bentuk sel yang terdiri dari bari dan kolom seperti di dalam microsoft office milik microsoft corp.

Didalam table ada beberapa tag yang dapat di fungsikan seperti tag berikut ini : <table></table> ,  <caption></caption>, <tr></tr>, <th></th> , dan <td></td>. Sebenarnya ada lagi beberapa tag di dalam table yang bisa digunakan namun setelah pembaruan yang terus dilakukan oleh pihak pengembang HTML tag berikut ini tidak lagi berfungsi di dalam browser : <thead></thead> , dan <tfoot></tfoot>.


Nah, sekarang saatnya kita bahas satu-persatu mengenai tag di atas dan cara penggunaannya!
<table></table> digunakan sebagai penanda bahwa tag tersebut adalah sebuah table yang artinya akan di isi oleh beberapa baris dan kolom.

CAPTION atau <caption></caption> adalah sebuah tag yang berfungsi untuk memberikan sebuah judul dari sebuah table yang di tampilkan di sisi atas table tersebut.

<tr></tr> atau table row adalah sebuah tag yang digunakan untuk membuat sebuah baris didalam table. memisahkan baris yang satu dengan yang lainnya.

Di dalam tr ada tag yang berfungsi sebagai kolom yaitu th dan td.
Mari kita bahas lagi.

TH atau <th></th> (table heading) adalah sebuah tag yang berfungsi hampir sama dengan tag td hanya saja di dalam tag TH, kata-kata yang kita tuliskan akan ditampilkan lebih tebal dari pada tag td, dan tulisan yang berada di dalamnya akan menempati posisi di tengah-tengan kolom.

TD atau <td></td> (table data) adalah sebuah tag yang berfungsi dalam membuat sebuah kolom.

Nah sampai disini apakah Anda sudah mengerti sedikit tentang penjelasan di atas yauitu mengenai table?

Jika sudah mari kita lanjutkan lagi dengan pembahasan beberapa attribut di dalam table yang bisa Anda gunakan untuk mempercantik tampilan table Anda.

Yang pertama adalah attribut bgcolor biasa digunakan untuk memberikan warna latar belakang pada table. Jika Anda pasang pada tag TR maka akan memberi warna pada satu baris saja. Dan jika Anda memasangnya di dalam tag TD maka sudah di ketahui bahwa akan ada sebuah kolom yang berpengaruh.

Kedua, adalah width digunakan untuk memberikan nilai lebar dari sebuah table yang Anda buat.
Valuenya bisa Anda gunakan pixel atau PX ataupun juga Persentase atau %.

Yang ketiga ada CELLSPACING yaitu pemberian jarak atar sel atau kolom dan baris di dalam table.

Yang keempat adalah CELLPADDING yaitu pemberian jarak antara tulisan dengan sel yang ada.

Yang Kelima da yang dinamakan dengan ALIGN atau perataan secara horizontal.

Dan yang keenam ada VALIGN atau perataan secara vertikal.

Ketujuh ada yang namanya BORDER atau garis pinggir yang memisahkan anatar sel.

Mari kita aplikasikan kedalam bentuk utuh sebuah table data siswa berikut :

<!DOCTYPE html>
<html>
<head>
<title>Table Data Siswa</title>
</head>
<body>

<table border="1" bgcolor="lime">
<caption>Table Data Siswa</caption>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Jenis Kelamin</th>
<th>T/T/L</th>
</tr>

<tr>
<td>1</td>
<td>Fittra Ferdiansyah</td>
<td>Laki-Laki</td>
<td>30/Desember/1996</td>
</tr>
</table>

</body>
</html>

Maka hasilnya akan seperti berikut ini :

html table


Terima Kasih
#ADMIN FITTRA FERDIANSYAH

No comments:

Post a Comment