Membuat Tabel di HTML

Pemanfaatan Tabel

Tabel biasanya digunakan untuk menempatkan data secara spreadset, tapi untuk desain suatu web, selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar.

Dengan menggunakan tabel, teks ataupun gambar dapat disusun menjadi lebih rapi. Tampilan halaman web akan menjadi lebih baik, apabila dasar/kerangkanya menggunakan tabel.

Tag Pembuatan Tabel

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :

Elemen	Kegunaan
TABLE	Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag <TABLE>..<TABLE>
TR	Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag <TR>..</TR>
TD	Data tabel, yaitu tempat dimana informasi/data dimasukkan dalam tabel. tabel data adalah colom dari suatu baris tabel. tabel data dinyatakan dengan tag <TD>..<TD>
TH	Judul tabel, biasnya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yan terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah <TH>…</TH>
CAPTION	Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag <CAPTION>..</CAPTION>

Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :

Atribut	Nilai	Keterangan
Border	Angka 0, 1 dst	Digunakan untuk menentukan tebal garis batas tepi tabel
Cellspacing	Angka 1,2,3 dst	Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel
Cellpadding	Angka 1,2,3 dst	Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel
width	Pixel / persentase	Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi %
Align	Left, center.right	Digunakan untuk perataan tabel secara horizontal
Valign	Middle, bottom, baseline	Digunakan untuk perataan tabel secara vertikal
bgcolor	Warna/bil.hexadesimal	Warna latar dari tabel atau pada sel
Rowspan	Angka 1,2,3 dst	Menggabungkan beberapa baris tabel
Colspan	Angka 1,2,3 dst	Menggabungkan beberapa kolom tabel

Tabel Sederhana

Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel. Tag TABLE digunakan sebagai awal pembuatan tabel, tag TR digunakan untuk mendifinisikan berapa banyak baris pada tabel, dan tag TD digunakan untuk menampung sel data dari tabel tersebut.

<table>

<tr>

<td>Tabel sederhana Tanpa border</td>

</tr>

</table>

Untuk membuat garis batas, dapat ditambahkan dengan atribut border seperti berikut :

<tr>

<td>Tabel sederhana dengan menggunakan border.</td>

</tr>

</table>

Lebar dari border dapat diatur dengan memberikan nilai pada atribut tersebut

<tr>

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

</tr>

</table>

Tabel Dua Dimensi

Tabel biasanya tidak hanya terdiri dari dari 1 dimensi atau 1 kolom saja , tapi bisa 2, 3 atau sesuai dengan kebutuhan kita. Contoh berikut adalah pengembangan dari tabel diatas dengan dengan menambahkan 2 kolom lagi didalamnya.

<tr>

<td>Tabel Kolom Pertama </td>

<td>Tabel Kolom Kedua </td>

<td>Tabel Kolom ketiga </td>

</tr>

</table>

Untuk membuat tabel dua dimensi, dibutuhkan elemen TR sebanyak 2 kemudian kolom tabel disusaikan dengan data yang akan diisikan.

<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>

Judul Tabel

Suatu tabel biasanya memiliki judul. Judul pada tabel dibedakan menjadi tiga macam yaitu, judul tabel itu sendiri, judul kolom tabel, dan judul baris tabel.

Untuk membuat judul diluar tabel, tag yang digunakan adalah CAPTION, sedang untuk membuat judul kolom atau baris pada tabel menggunakan tag TH. Bagian yang merupakan judul tabel akan ditebalkan penulisannya.

<caption><b>Judul Tabel dengan Caption</b></caption>

<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>

<br>

<caption><b>Judul Tabel dengan Tabel Header</b></caption>

<tr>

<th>Baris 1 Kolom 1 </th>

<th>Baris 1 Kolom 2 </th>

<th>Baris 1 Kolom 3 </th>

</tr>

<tr>

<th>Baris 2 Kolom 1 </th>

<td>Baris 2 Kolom 2 </td>

<td>Baris 2 Kolom 3 </td>

</tr>

</table>

Sel Kosong

tabel yang memiliki judul kolom dan judul baris biasanya memiliki suatu sel kosong pada bagian kiri atasnya. Untuk membuatnya, cukup dengan mendefinisikan sel tersebut dengan elemen TD atau TH tanpa diisi dengan data apapun.

<caption><b>Jadwal Dokter

Jaga</b> </caption>

<tr>

<th>Senin</th>

<th>Selasa</th>

</tr>

<tr>

<td>Dr Santi </td>

<td>Dr Irawan </td>

</tr>

<tr>

<th>Siang </th>

<td>Dr Andri </td>

</tr>

<tr>

<th>Malam </th>

</tr>

</table>

<caption><b>Jadwal Dokter

Jaga</b> </caption>

<tr>

<th>Senin</th>

<th>Selasa</th>

</tr>

<tr>

<td>Dr Santi </td>

<td>Dr Irawan </td>

</tr>

<tr>

<th>Siang </th>

<td>Dr Andri </td>

</tr>

<tr>

<th>Malam </th>

</tr>

</table>

Pada kode yang pertama, sel yang dikosongkan tampak tidak terlihat. Untuk memunculkan sel tersebut, diberikan perintah BR untuk memunculkan sel tersebut.

Perataan Tabel

Tabel dapat diratakan baik secara horizontal maupun secara vertikal. Seperti diketahui perataan horizontal mempunyai orientasi ke kiri, kanan dan tengah. Sedang perataan vertikal orientasinya ke atas, bawah dan tengah.

Atribut	Elemen	Value
ALIGN	CAPTION	top,bottom
ALIGN	TH, TR, TD	left, right, center

Atribut	Elemen	Value
VALIGN	TH, TR, TD	top, middle, bottom, baseline

Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN.

<caption><h4> Perataan Pada Tabel</h4>

</caption>

<tr>

<th><h3>Tengah</h3></th>

<th><h3>Kanan </h3></th>

</tr>

<tr>

</tr>

<tr>

<th><h3>Tengah </h3></th>

</tr>

<tr>

<th><h3>Bawah </h3></th>

</tr>

</table>

Mengatur Lebar Tabel

Lebar suatu tabel diatur besarnya dengan menggunakan atribut WIDTH. Atribut WIDTH digunakan untuk mengubah lebar tabel maupun lebar kolom suatu tabel. Elemen-elemen yang dapat disisipi dengan atribut WIDTH adalah ;

Atribut	Elemen	Orientasi	Value
WIDTH	TABLE	Lebar tabel terhadap browser	“xx%” atau pixel
	TH	Lebar kolom terhadap tabel	“xx%” atau pixel
	TD	Lebar kolom terhadap tabel	“xx%” atau pixel

Berikut diberikan contoh penggunaan width pada tabel dan pada tabel data :

<caption align="bottom"> <h5> tabel dengan width 70%</h5>

</caption>

<tr>

<td width="50%">width 50%</td>

</tr>

<tr>

<td>lebar sel 50% dari lebar tabel</td>

</tr>

</table>

<caption align="bottom"> <h5> tabel dengan width 100%</h5>

</caption>

<tr>

<td width="30%">width 30%</td>

<td width="70%">width 70%</td>

</tr>

<tr>

<td>lebar sel 30% dari lebar tabel</td>

<td>lebar sel 70% dari lebar tabel</td>

</tr>

</table>

Pewarnaan Tabel

Pemberian warna dapat dilakukan pada tabel, sel maupun pada border dari suatu tabel. Warna dapat ditulis dengan menggunakan bilangan Hexadesimal RRGGBB atau dengan menyebutkan warnanya. Atribut BGCOLOR digunakan pada perintah TABLE, TD, TR. Sedang untuk mengubah warna border tabel, hanya dapat dilakukan pada internet explorer yang menyediakan beberapa macam atribut, yaitu

Atribut	fungsi
BORDERCOLOR	Warna border tabel
BORDERCOLORLIGHT	Warna border bagian atas dan kiri
BORDERCOLORDARK	Warna border bagian bawah dan kanan

Ketiga atribut diatas harus digunakan bersama atribut BORDER. Berikut ini adalah contoh pewarnaan yang terjadi pada suatu tabel.

<center>

<table border=1 width="40%" bordercolorlight="red" bordercolordark = "yellow">

<caption><h5> warna pada tabel</h5>

</caption>

<tr bgcolor="yellow">

<td align="center">warna kuning</td>

</tr>

<tr>

<td align="center" bgcolor="red">warna merah</td>

<td align="center" bgcolor="green">warna hijau</td>

</tr>

</table>

</center>

Mengantur Spasi Tabel

Atribut yang digunakan untuk mengatur spasi dalam tabel yaitu CELLSPACING dan CELLPADDING. CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam sebuah tabel, sedangkan CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada didalam sel tersebut. Berikut adalah contoh tabel yang menggunakan perintah cellpadding dan celspacing.

<tr>

<td>hallo</td>

</tr>

<tr>

<td>hallo</td>

</tr>

</table>

Menggabungkan Kolom dan Baris

Seperti tabe umumnya, kita dapat menggabungkan dua atau lebih kolom/baris menjadi satu buah kolom/baris. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan. Berikut adalah contoh penggunaan atribut COLSPAN dan ROWSPAN pada tabel.

<html>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

Tabel dengan ROWSPAN<br>

<tr>

</tr>

<tr>