Mengatur Properti Baris Dan Kolom Tabel Dalam HTML

Dalam membuat tabel dengan html, sebenarnya tabel yang kita buat tetap dapat berfungsi sebagaimana mestinya walaupun kita tidak melakukan pengaturan pada baris dan kolom tabel tersebut. Hanya saat kita memasukkan teks di dalamnya, kolom/sel ataupun baris tabel akan bergeser dan bisa saja menjadikan sel/kolom/baris  yang lainnya akan bergeser menjadi lebih kecil. Untuk itu kita harus menambahkan properti atau atribut pada baris dan sel kolom tabel yang kita buat, di antaranya sebagai berikut:

1. Atribut Baris (<tr atribut>.....................</tr>), di antaranya:
• Tata letak horizontal (align), yakni tatak letak teks/obek di dalam sel tabel, misalnya kiri (left), tengah (center), kanan (right) dan kiri-kanan (justify). Contoh sintaks: align="center"
• Tata letak vertikal (valign), yakni tatak letak teks/objek di dalam sel tabel secara horizontal. Maksudnya adalah saat teks/objek dimasukkan, maka akan berada pada posisi yang telah ditentukan. Misalnya jika kita memilih bagian atas (top), maka teks akan berada pada bagian atas.  Tatak letak letak yang tersedia adalah atas (top), tengah (middle) dan bawah (bottom). Contoh sintaks: valign="top"
  
  Catatan:
  Atribut yang kita berikan akan berlaku 1 baris dalam 1 sintaks <tr>....................</tr>, untuk sintaks <tr>.............</tr> lainnya akan berlaku atribut lain sesuai dengan atribut yang kita berikan.
2. Atribut Sel Kolom (<td atribut>............................</td>)
• Tata letak horizontal (align), yakni tata letak teks/objek di dalam sel kolom. Sintaksnya sama dengan pada atribut baris.
• Tata letak vertikal (valign), yakni tata letak teks/objek di dalam sel kolom secara vertikal. Sintaksnya sama dengan pada atribut baris.
• Warna latar (bgcolor) pada sel kolom. Sintaksnya: bgcolor="warna atau kode warna", contoh: bgcolor="red" atau bgcolor="#ff0000"
• Lebar sel kolom (width), diukur dengan angka dalam pixel (px) atau persen (%), contoh sintaks: width="50px".

Contoh:
<table border="1" bordercolor="black" align="center" cellpadding="1" cellspacing="0" Width="750px">
<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">No</td>
<td bgcolor="blue" align="center" valign="middle" width="150px">Nama</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Alamat</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px">Keterangan</td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">1</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 02-04-2010</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Desa Oensuli</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">2</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 17-01-2012</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Desa Oensuli</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>
</table>

Hasilnya sebagai berikut:

No	Nama	Tempat/Tanggal Lahir	Alamat	Keterangan
1	La Ode Raja Hussein A.A	Oensuli, 02-04-2010	Desa Oensuli
2	La Ode Safarudin T. An Nuh	Oensuli, 17-01-2012	Desa Oensuli

Catatan:
Tampilan tabel di atas mungkin akan berbeda ukurannya dalam blog ini karena lebar maksimum tabel tidak sampai 750px, Anda dapat mencobanya dengan menyalin kode di atas lalu tempelkan ke dalam HTML editor Anda, dan lihat hasilnya pada web browser.