Menyisipkan Tabel Ke Dalam Dokumen HTML

Tabel HTML adalah tabel yang terdapat pada halaman website ataupun blog. Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Selain itu dalam pengolahan data yang terkelompok tidak bisa dipungkiri lagi bahwa Anda harus menggunakan tabel. Anda mungkin berpikir bahwa mengurutkan dan menyaring data secara langsung di halaman website adalah mustahil. Nah, dengan bantuan tabel data Anda bisa dirurutkan dan ditat rapi sedemikian rupa.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>. Untuk membuat tabel harus diawali dengan tag <table> dan diakhiri dengan tag </table>. Baris-baris dalam tabel dibuat dengan diawali tag <tr> dan diakhiri tag </tr>. Dari dalam baris kemudian dibuat kolom-kolom dengan tag <td> dan diakhiri tag </td>. Untuk header (baris paling atas dari tabel) kolom-kolomnya biasanya dibuat denga tag <th> dan </th>.

<TABLE>
Terdiri dari atribut :

• align = perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor = warna latar belakang (background) dari tabel.
• border = ukuran lebar border tabel (dalam pixel).
• cellpadding = jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing = jarak antar cell (dalam pixel).
• width = ukuran tabel dalam pixel atau percent.

Contoh :

<TABLE align="center" bgcolor="#0000FF" border="2″" cellpadding="2" cellspacing="2" width="90%">

<TR>

Tag <TR> atau Table Row digunakan untuk membuat baris baru (pada tabel). Tag ini terdiri dari atribut:

• align = perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor = warna latar belakang dari baris.
• valign = perataan vertikal : top, middle atau bottom.

Contoh :

<TR align="right" bgcolor="#0000FF" valign="top">

<TD>

Tag <TD> atau Table Data digunakan untuk membuat sel atau kolom baru pada tabel. Adapun atribut pada tag <TD> ini adalah:

• align = perataan
• background = image yang digunakan sebagai latar belakang dari kolom.
• bgcolor = warna latar belakang
• colspan = lihat gambar contoh
• height = ukuran tinggi cell dalam pixels.
• nowrap = membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan = lihat gambar contoh
• valign = perataan vertikal : top, middle atau bottom.
• width = ukuran kolom dalam pixel atau percen.

Berikut adalah contoh sebuah tabel

<table border=2>

<tr>

	<th>header1</th>

	<th>header2</th>

	<th>header3</th>

</tr>

<tr>

	<td>baris 1 kolom 1</td>

	<td>baris 1 kolom 2</td>

	<td>baris 1 kolom 3</td>

</tr>

<tr>

	<td>baris 2 kolom 1</td>

	<td>baris 2 kolom 2</td>

	<td>baris 2 kolom 3</td>

</tr>

</table>

Dan hasilnya dapat Anda lihat di browser seperti ini:

Pada pembahasan mengenai cara pembuatan tabel di dalam dokumen HTML, telah saya jelaskan dasar-dasarnya. Untuk membuat tabel dimulai dengan memasukkan tag <TABLE> untuk menandai bahwa kita akan menyisipkan tabel. Setelah itu kita masukan baris tabel dengan menyisipkan tag <TR> di antara tag <table> dan </table> dan ditutup dengan </TR>. Naah... di dalam table row ini kita bebas menyisipkan berapa baris data (kolom) yang ingin kita masukkan dengan cara memasukkan tag <TD>...</TD>. Hal ini dapat diilustrasikan pada tabel berikut:

Berdasarkan ilustrasi gambar di atas, yang berwarna merah adalah perintah dengan tag <TR> dan yang berwarna hijau adalah perintah dengan tag <TD>. Banyaknya tabel data (kolom) dapat Anda tentukan sendiri sebanyak yang Anda mau. Satu kali memasukkan tag <TD>...</TD> berarti Anda telah membuat satu kolom dan satu baris.

Dalam satu <TR>...</TR>, Anda bisa memasukkan sejumlah tag <TD>...</TD> sejumlah yang Anda mau dan kolom akan berjajar terus ke sebelah kanan.  Lihat contoh berikut.

<TR>

	<td>data 1</td> => Kolom 1

	<td>data 2</td> => Kolom 2

	<td>data 3</td> => Kolom 3

	<td>data ...</td> => Kolom ...

  .... (dst)

</TR>

Oya... satu hal yang mungkin diperlukan adalah menambahkan beberapa atribut pada tag <TABLE>. Atribut yang sekiranya penting ditambahkan pada tag <TABLE> (bahkan pada <TD> juga) adalah width untuk menentukan lebar tabel (satuan pixel atau persen). Jika Anda memberi satuan unit pixel Anda cukup menambahkan angka saja, misalnya width="500" atau boleh juga width="500px". Sedangkan jika memberi dalam bentuk persentase lebar layar cukup ditambahkan perintah persen (%), misalnya width="100%". dan yang kedua untuk tag <TABLE> adalah atribut border yang dapat diisi dengan nilai angka (satuan pixel), misalnya border="1" sehingga menjadi

<TABLE width="500" border="1">.......</TABLE>

Mari kita aplikasikan pada contoh berikut!

<table width="500" border="1">

<tr>

	<td>1</td>

	<td>2</td>

	<td>3</td>

	<td>4</td>

</tr>

<tr>

	<td>5</td>

	<td>6</td>

	<td>7</td>

</tr>

</table>

Memodifikasi Sel Tabel Data

Pada pembahasan awal mengenai tabel disebutkan bahwa tag <TD> memiliki beberapa atribut, namun kali ini saya akan mencoba membahas dulu atribut width, height, align, valign, border dan bgcolor. Mari kita lihat pada contoh berikut

<table border="6">

<tr>

   <td>Tabel sederhana dengan menggunakan border="6".</td>

</tr>

</table>

Adapun untuk contoh yang lebih kompleksnya adalah:

<table border="1" width="253" height="173">

<tr>

	<td width="28" height="41">No.</td>

	<td width="128" height="41">Nama</td>

	<td height="41">Warna</td>

</tr>

<tr>

	<td width="28" align="center" height="34">1</td>

	<td width="128" height="34" valign="top"><p align="center">Adi</td>

	<td bgcolor="#008000" height="34">hijau</td>

</tr>

<tr>

	<td width="28" align="center" height="31">2</td>

	<td width="128" height="31"><p align="right">Dea</td>

	<td bgcolor="#FF0000" height="31"><p align="right">merah</td>

</tr>

<tr>

	<td width="28" align="center">3</td>

	<td width="128" valign="bottom">Ari</td>

	<td bgcolor="#0000FF">biru</td>

</tr>

</table>

Oke deh, mungkin Anda sudah cukup mengerti untuk pembuatan tabel ini, bila masih ada yang ingin Anda tanyakan silakan hubungi saya melalui media kontak yang saya sediakan, silakan lihat di sidebar atau klik di sini dan untuk kode warna, silakan klik di sini