Seperti kata-kata beberapa blog yang lebih senior nih, kalo nggak sering-sering update blog, blog kita bisa ditinggalkan para pembacanya, atut tuh jadinya. Yah, sedikit demi sedikit per hari bisa lah buat update satu artikel ato lebih ;D hehe... tapi saya masih belum bisa menarik pengunjung dengan ini karena ternyata sudah banyak pesaing yang membahas tentang tips dan trik seputar blog. Nah, kali ini saya akan membicarakan tentang pembuatan tabel.
Yang paling penting di dalam pembuatan tabel adalah rumus <table> .... </table> dan pada tabel tersebut kita dapat menambahkan beberapa atribut seperti:
Sintaks atau kode yang terbentuk yaitu seperti ini :
<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">
.....................
</table>
Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).
Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).
Sintaks atau kode yang terbentuk yaitu seperti ini :
<caption align="top"|"bottom">
............................
</caption>
elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :
Sintaks atau kode yang terbentuk yaitu seperti ini :
<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">
.....................
</tr>
elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:
Sintaks atau kode yang terbentuk yaitu seperti ini :
<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">
.....................
</th>
Elemen TR(Table Row) adalah elemen untuk membuat kolom. atribut yang bisa di pakai antara lain :
Sintaks atau kode yang terbentuk yaitu seperti ini :
<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">
.....................
</td>
Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :
Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :
<table width="200" border="1">
<tr>
<td>
Contoh
</td>
</tr>
<table>
Hasilnya akan seperti ini :
Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :
<table width="200" border="1">
<tr>
<td align="center">
Contoh
</td>
</tr>
</table>
Hasilnya akan seperti ini :
Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :
<table width="200" border="9">
<tr>
<td align="center">
Contoh
</td>
</tr>
</table>
Hasilnya akan seperti ini :
Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :
<table width="300" border="9">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
Hasilnya akan seperti ini :
Kalau ingin dua baris, kira-kira kodenya seperti ini :
<table width="300" border="1">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
hasilnya seperti ini :
Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :
<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
<tr bgcolor="yellow">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
hasilnya seperti ini :
Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :
Kode yang di pakai bisa seperti ini :
<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ardi Wijaya</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Yusuf</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ntob</td>
</tr>
</table>
Hasilnya kira-kira seperti ini :
Dan jika menurut Anda garis tepi mengganggu pemandangan, Anda bisa menghilangkannya dengan mengganti nilai dalam blogger menjadi 0 (nol). Contoh:
<table align="left" border="0" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ardi Wijaya</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Yusuf</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ntob</td>
</tr>
</table>
Hasilnya kira-kira seperti ini :
Ohya, seperti yang menjadi permasalahan membuat tabel pada tutorial yang lain, yaitu tidak rapatnya jarak antar tulisan. Solusinya adalah dirapatkannya/hapus saja enter yang menghubungkan antara rumus satu dengan yang lain. Contoh:
<table width="300" border="9">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
diubah menjadi:
<table width="300" border="9"><tr><td align="center">Contoh</td><td align="center">Contoh juga</td></tr></table>
Memang akan membuat kita lebih sulit tapi penghapusan bisa dilakukan setelah selesai mengisi data pada tabel. Nah, seperti itulah kira-kira cara membuat tabel di blog. Agak rumit memang, tapi butuh ketelitian untuk menghasilkan tabel yang sempurna (nggak hanya tabel sih yang butuh tapi semua juga butuh ketelitian, hehe :D ). Oke, semoga bermanfaat bagi kita semua.
Yang paling penting di dalam pembuatan tabel adalah rumus <table> .... </table> dan pada tabel tersebut kita dapat menambahkan beberapa atribut seperti:
- bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
- align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right".
- cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel"
- border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel"
- cellspacing : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel"
- height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%"
- weight : untuk mengatur lebar tabel. Penempatan kodenya : weight="pixel"|"%"
Sintaks atau kode yang terbentuk yaitu seperti ini :
<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">
.....................
</table>
Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).
Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).
Sintaks atau kode yang terbentuk yaitu seperti ini :
<caption align="top"|"bottom">
............................
</caption>
elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :
- align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right"
- valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
- bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"
Sintaks atau kode yang terbentuk yaitu seperti ini :
<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">
.....................
</tr>
elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:
- align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right"
- valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
- bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"
- colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"
- rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"
Sintaks atau kode yang terbentuk yaitu seperti ini :
<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">
.....................
</th>
Elemen TR(Table Row) adalah elemen untuk membuat kolom. atribut yang bisa di pakai antara lain :
- align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right"
- valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
- bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"
- colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"
- rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"
Sintaks atau kode yang terbentuk yaitu seperti ini :
<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">
.....................
</td>
Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :
Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :
<table width="200" border="1">
<tr>
<td>
Contoh
</td>
</tr>
<table>
Hasilnya akan seperti ini :
| Contoh |
Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :
<table width="200" border="1">
<tr>
<td align="center">
Contoh
</td>
</tr>
</table>
Hasilnya akan seperti ini :
| Contoh |
Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :
<table width="200" border="9">
<tr>
<td align="center">
Contoh
</td>
</tr>
</table>
Hasilnya akan seperti ini :
| Contoh |
Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :
<table width="300" border="9">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
Hasilnya akan seperti ini :
| Contoh | Contoh juga |
Kalau ingin dua baris, kira-kira kodenya seperti ini :
<table width="300" border="1">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
hasilnya seperti ini :
| Contoh | Contoh juga |
| Contoh | Contoh juga |
Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :
<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
<tr bgcolor="yellow">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
hasilnya seperti ini :
| Contoh | Contoh juga |
| Contoh | Contoh juga |
Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :
| Data Teknisi | |
|---|---|
| No. | Nama |
| 1. | Ardi Wijaya |
| 2. | Yusuf |
| 3. | Ntob |
Kode yang di pakai bisa seperti ini :
<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ardi Wijaya</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Yusuf</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ntob</td>
</tr>
</table>
Hasilnya kira-kira seperti ini :
| Data Teknisi | |
|---|---|
| No. | Nama |
| 1. | Ardi Wijaya |
| 2. | Yusuf |
| 3. | Ntob |
Dan jika menurut Anda garis tepi mengganggu pemandangan, Anda bisa menghilangkannya dengan mengganti nilai dalam blogger menjadi 0 (nol). Contoh:
<table align="left" border="0" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Ardi Wijaya</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Yusuf</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ntob</td>
</tr>
</table>
Hasilnya kira-kira seperti ini :
| Data Teknisi | |
|---|---|
| No. | Nama |
| 1. | Ardi Wijaya |
| 2. | Yusuf |
| 3. | Ntob |
Ohya, seperti yang menjadi permasalahan membuat tabel pada tutorial yang lain, yaitu tidak rapatnya jarak antar tulisan. Solusinya adalah dirapatkannya/hapus saja enter yang menghubungkan antara rumus satu dengan yang lain. Contoh:
<table width="300" border="9">
<tr>
<td align="center">
Contoh
</td>
<td align="center">
Contoh juga
</td>
</tr>
</table>
diubah menjadi:
<table width="300" border="9"><tr><td align="center">Contoh</td><td align="center">Contoh juga</td></tr></table>
Memang akan membuat kita lebih sulit tapi penghapusan bisa dilakukan setelah selesai mengisi data pada tabel. Nah, seperti itulah kira-kira cara membuat tabel di blog. Agak rumit memang, tapi butuh ketelitian untuk menghasilkan tabel yang sempurna (nggak hanya tabel sih yang butuh tapi semua juga butuh ketelitian, hehe :D ). Oke, semoga bermanfaat bagi kita semua.
