Masih Seputar Tips Pembuatan Tabel (bag.3)

Postingan kali ini masih membahas seputar pembuatan tabel dalam blog. Sebelumnya, Tips dan Trik Blog telah membahasnya, masing-masing bagian pertama dan bagian kedua. Pada postingan kali ini, kita akan membahas tentang cara mengatur letak table, tentang pemberian judul tabel, dan juga pembuatan table di dalam table. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

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.

Bersambung ke Pembuatan Tabel Bagian Keempat.

Good Luck!!

Baca juga yang ini.

Pembuatan Tabel Bagian Pertama
Pembuatan Tabel Bagian Kedua
Pembuatan Tabel Bagian Ketiga
Pembuatan Tabel Bagian Keempat
Description: Masih Seputar Tips Pembuatan Tabel (bag.3) Rating: 4.5 Reviewer: Unknown - ItemReviewed: Masih Seputar Tips Pembuatan Tabel (bag.3)