Masih Seputar Tips Pembuatan Tabel bag.3

MENGATUR LETAK TABEL

Secara default, table akan terletak di bagian kiri layar. Jika menginginkan, kita dapat meletakkan table pada bagian tengah layar atau bagian kiri layar, perintahnya menggunakan atribut <div align=””> dan </div>.

Aplikasinya seperti di bawah ini. Pada contoh ini kita ingin meletakkan table pada bagian tengah layar.

<div align="center"><table border="1" cellpadding="5" cellspacing="1"><tbody><tr>
<th width="45">No.</th><th width="155"> Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td></tr>
<tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody></table>
</div>

Hasilnya table akan berada di tengah-tengah layar, seperti di bawah ini.

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

Jika ingin meletakkan table pada sisi kanan layar, kita tinggal mengganti “center” dengan “right”.

MEMBERI JUDUL TABEL

Untuk memberi judul table, kita menggunakan atribut <caption> dan </caption>. Contohnya seperti di bawah ini.

<div align="center"><table border="1" cellpadding="5" cellspacing="1">
<caption>Tabel I</caption>
<tbody><tr><th width="45">No.</th><th width="155"> Nama Teman</th></tr>
<tr><td>1.</td><td>Agus</td>
</tr><tr><td>2.</td><td>Imam</td></tr>
<tr><td>3.</td><td>Iwan</td></tr>
<tr><td>4.</td><td>Dinda</td></tr>
</tbody></table></div>

Hasilnya seperti di bawah ini.

Tabel I

No.	Nama Teman
1.	Agus
2.	Imam
3.	Iwan
4.	Dinda

TABEL DI DALAM TABEL

Jika menginginkan, kita dapat membuat table kecil di dalam table yang lebih besar. Contoh aplikasinya seperti di bawah ini.

<table width="400" border="6"> <!-- table yang luar -->
<td align="center"> <!-- cell dari table yang luar -->
<table width="325" border="2"> <!-- table yang di dalam (lebih kecil) -->
<td align="center"> <!-- cell dari table yang dalam -->
Ini table di dalam tabel <!-- isi dari cell dari table yang di dalam -->
</td> <!-- menutup cell table yang dalam -->
</table> <!-- menutup dari table yang dalam -->
</td> <!-- menutup cell dari table luar -->
</table> <!-- menutup table yang luar -->

Hasilnya seperti di bawah ini.

Ini table di dalam tabel

Sepertinya, karena sudah larut malam, untuk postingan kali ini, saya cukupkan sekian dahulu dan Insya Allah akan kita lanjutkan pada postingan mendatang.