Membuat Tabel Dengan HTML 4

Tabel yang kita buat dapat kita atur supaya tampilannya lebih bagus. Apa saja yang dapat diatur? Berikut akan saya berikan beberapa hal yang dapat kita lakukan.

1. Menentukan Lebar Tabel.

untuk menentukan lebar tabel kita hanya perlu menambahkan atribut 'width' pada tag <table>. Dan nilai yang dapat kita isi dapat dalam format 'px', '%' dan format lainnya. Tapi yang penulis tahu dan sering digunakan adalah yang kedua format tadi.

-----------------mulai kode html----------------------

<table width="100%">
<tr><td>Tabel dengan lebar tabel 100%. Lebar tabel akan memenuhi 100% layar atau tempat tabel diletakkan</td></tr>
</table>

<table width="200px">
<tr><td>Tabel dengan lebar tabel 200 pixel. Lebar tabel akan terbentuk sebesar 200 pixel</td></tr>
</table>

-----------------akhir kode html----------------------

2. Menentukan Lebar Kolom.

hampir sama seperti lebar tabel, hanya saja letakkan atribut nya di tag <td>.

-----------------mulai kode html----------------------

<table width="100%">
<tr>
<td width="40%">kolom ini mempunyai lebar 40%</td>
<td width="60%">kolom ini mempunyai lebar 60%</td>
</tr>
</table>

<table width="500px">
<tr>
<td width="300px">kolom ini mempunyai lebar 300 pixel</td>
<td width="200px">kolom ini mempunyai lebar 200 pixel</td>
</tr>
</table>

-----------------akhir kode html----------------------

3. Membuat Jarak Antar Kolom.

kadang data yang ditulis di tabel terlihat terlalu rapat ke pinggir kolom. Atau jarak antar kolomnya yang terlalu rapat. Ini dapat kita edit dengan menggunakan atribut 'cellpadding' dan 'cellspacing' pada tag <table>. Nilai nya cukup memasukkan angka positif saja. 'cellpadding' digunakan untuk membuat jarak data dengan kolom tempat data itu ditulis. 'cellspacing' digunakan untuk membuat jarak antara kolom dengan kolom yang lainnya.

-----------------mulai kode html----------------------

<table width="100%" cellpadding="2" cellspacing="1">
<tr>
<td width="40%">kolom ini mempunyai lebar 40%</td>
<td width="60%">kolom ini mempunyai lebar 60%</td>
</tr>
</table>

-----------------akhir kode html----------------------

4. Membuat Border.

untuk membuat border cukup menambahkan atribut 'border' pada tag <table>. Nilainya cukup masukkan angka positif.

-----------------mulai kode html----------------------

<table border="1">
<tr>
<td>table dengan border 1</td>
</tr>
</table>

<table border="5">
<tr>
<td>table dengan border 5</td>
</tr>
</table>

----------------akhir kode html----------------------

5. Perataan Teks.

untuk melakukan perataan teks, cukup menambah atribut 'align' pada tag <td>. Untuk melakukan perataan vertikal (atas, tengah, bawah) gunakan 'valign'.

-----------------mulai kode html----------------------

<table border="1" width="50%">
<tr>
<td align="left">rata kiri</td>
<td align="center">rata tengah</td>
<td align="right">rata kanan</td>
</tr>

<tr>
<td valign="top">teks diatas teks diatas teks diatas teks diatas teks diatas teks diatas</td>
<td valign="bottom">teks dibawah teks dibawah teks dibawah teks dibawah teks dibawah</td>
<td>teks normal<br>teks normal</td>
</tr>

<tr>
<td valign="top" align="center">teks diatas, rata tengah</td>
<td valign="bottom" align="right">teks dibawah, rata kanan</td>
<td>teks normal<br>teks normal</td>
</tr>

</table>

----------------akhir kode html----------------------

6. Warna pada Tabel.

warna dapat ditambahkan pada tabel, atau pada setiap kolom nya. Tambahkan atribut 'bgcolor' pada tag <table> atau pada tag <td>.

-----------------mulai kode html----------------------

<table border="1" width="50%" bgcolor="#FF0000">
<tr>
<td align="left" bgcolor="#0000FF">rata kiri</td>
<td align="center" bgcolor="0,255,0">rata tengah</td>
<td align="right">rata kanan</td>
</tr>

<tr>
<td valign="top">teks diatas teks diatas teks diatas teks diatas teks diatas teks diatas</td>
<td valign="bottom">teks dibawah teks dibawah teks dibawah teks dibawah teks dibawah</td>
<td>teks normal<br>teks normal</td>
</tr>

<tr>
<td valign="top" align="center">teks diatas, rata tengah</td>
<td valign="bottom" align="right">teks dibawah, rata kanan</td>
<td>teks normal<br>teks normal</td>
</tr>

</table>

----------------akhir kode html----------------------

untuk warnanya, format nya bisa memakai RGB (0,255,0) atau hexadecimal (#000000).

++ Untuk melihat format warna lengkap, silakan lihat artikel saya "Warna dalam HTML".

Saya rasa sudah cukup untuk artikel membuat tabel. Silakan dipelajari kembali ya.... Baiklah.... sampai jumpa di artikel berikutnya.