TABLE
Untuk membuat tabel di blog, Perintah yang akan kita pakai adalah
<table>
.....
</table>
.Di dalam tabel tersebut, kita bisa menyisipkan beberapa, Misalnya:
- bgcolor : untuk mengatur warna background/warna latar
belakang tabel. Contoh : bgcolor="#ff0000" - align : untuk mengatur tata letak tulisan yang ada pada
tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan.
Contoh:
align="left" - cellpadding : untuk mengatur jarak antara tepi sel dengan
isi sel di dalam sebuah tabel. Contoh:
cellpadding="10px" - border : untuk mengatur tingkat ketebalan garis tepi pada
tabel. Contoh :
border="5px" - cellspacing : untuk mengatur jarak antara sel. Contoh :
cellspacing="10px" - height : untuk mengatur tinggi tabel. Contoh :
height="100px" - width : untuk mengatur lebar tabel. Contoh :
width="200px"
Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH (Table Heading), elemen TR (Table Row), serta elemen TD (Tabel Data).
Caption
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).
Misalnya :
<caption align="top">
.................
</caption>
atau
<caption align="bottom">
.................
</caption>
TH (Table Header)
Elemen TH(Table Heading) 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.
Contoh:
align="left",
align="center",
align="right" - valign : untuk mengatur posisi vertikal.
Contoh:
valign="top",
valign="middle",
valign="bottom" - bgcolor : ntuk mengatur warna background/warna latar
belakang tabel. Contoh: bgcolor="#00ff00" - colspan : untuk mengatur kolom. Contoh :
colspan="2" - rowspan : untuk mengatur row atau baris. Contoh:
rowspan="3"
TR (Table Row)
Elemen TR (Table Row) yaitu untuk membuat baris(row), 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.
Contoh:
align="left",
align="center",
align="right" - valign : untuk mengatur posisi vertikal.
Contoh:
valign="top",
valign="middle",
valign="bottom" - bgcolor : untuk mengatur warna background/warna latar
belakang tabel. Contoh: bgcolor="#00ff00"
TD (Table Data)
Elemen TD(Table Data) adalah elemen untuk mengisi data dalam tabel atau bisa juga dikatakan 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.
Contoh:
align="left",
align="center",
align="right" - valign : untuk mengatur posisi vertikal.
Contoh:
valign="top",
valign="middle",
valign="bottom" - bgcolor : untuk mengatur warna background/warna latar
belakang tabel. Contoh: bgcolor="#00ff00" - colspan : untuk mengatur kolom. Contoh:
colspan="6" - rowspan : untuk mengatur row atau baris. Contoh:
rowspan="4"
Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :
Untuk membuat sebuah tabel tunggal, kodenya seperti ini :
<table width="200" border="1">
<tr>
<td>
www.situsTKJ.co.cc
</td>
</tr>
<table>
Hasilnya seperti ini :
www.situsTKJ.co.cc |
========================================================================
Terlihat bahwa tulisan yang ada di dalam tabel, tampak rata kiri, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja tag align="center" pada kolomnya. Misal seperti ini :
<table width="200" border="1">
<tr>
<td align="center">
www.situsTKJ.co.cc
</td>
</tr>
</table>
Hasilnya seperti ini :
www.situsTKJ.co.cc |
========================================================================
Contoh-contoh tersebut menggunakan tebal border 1, coba kita bandingkan apabila kita menggunakan tebal border yang lebih besar, misalnya 5. Kodenya seperti ini :
<table width="200" border="5">
<tr>
<td align="center">
www.situsTKJ.co.cc
</td>
</tr>
</table>
Hasilnya seperti ini :
www.situsTKJ.co.cc |
========================================================================
Jika kita ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :
<table width="300" border="5">
<tr>
<td align="center">
Klik
</td>
<td align="center">
www.situsTKJ.co.cc
</td>
</tr>
</table>
Hasilnya seperti ini :
Klik | www.situsTKJ.co.cc |
========================================================================
Kalau ingin dua baris, kodenya seperti ini :
<table width="300" border="5">
<tr>
<td align="center">
Klik
</td>
<td align="center">
www.situsTKJ.co.cc
</td>
</tr>
<tr>
<td align="center">
Klik
</td>
<td align="center">
www.situsTKJ.co.cc
</td>
</tr>
</table>
hasilnya seperti ini :
Klik | www.situsTKJ.co.cc |
Klik | www.situsTKJ.co.cc |
========================================================================
Jika tabelnya akan diberi warna, tinggal tambahkan tag bgcolor="kode warna"
contoh :
<table width="300" border="1" bgcolor="#ff0000">
<tr bgcolor="#0000ff">
<td align="center">
Klik
</td>
<td align="center">
www.situsTKJ.co.cc
</td>
<tr bgcolor="#ff5500">
<tr>
<td align="center">
Klik
</td>
<td align="center">
www.situsTKJ.co.cc
</td>
</tr>
</table>
hasilnya seperti ini :
Klik | www.situsTKJ.co.cc |
Klik | www.situsTKJ.co.cc |
========================================================================
Sekarang saya beri contoh 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. | Anto |
2. | Antok |
3. | Antoro |
Kode yang di pakai bisa seperti ini :
<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Karyawan</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>Anto</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Antok</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Antoro</td>
</tr>
</table>
Hasilnya seperti ini :
Data Teknisi | |
---|---|
No. | Nama |
1. | Anto |
2. | Antok |
3. | Antoro |
========================================================================
Selain untuk memuat tulisan, sebuah tabel pun banyak di gunakan untuk memuat gambar agar terlihat lebih cantik. Contoh :
<table width="300" border="1" cellpadding="20"><tr>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"
target="new"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
</tr>
<tr>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
<td align="center">
<a href="http://www.situsTKJ.co.cc/?id=Rohman"
target="new"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
</tr>
</table>
Hasilnya seperti ini :
=======================================================================
Jika anda beranggapan bahwa border tabel menggangu pemandangan dan membuat tabel kita menjadi tidak cantik, maka kita bisa mensiasatinya dengan cara menghilangkan garisnya yaitu nilai bordernya kita buat 0.
contoh :
<table width="300" border="0" cellpadding="20"><tr>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"
target="new"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
</tr>
<tr>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
<td align="center">
<a href="http://www.situsTKJ.co.cc/"
target="new"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>
</td>
</tr>
</table>
Hasilnya seperti ini :
Bagaimana hasilnya yang terakhir ini, cantik bukan?
Catatan kecil saja. Karena kode diatas merupakan kode HTML, maka padasaat posting harus pada posisi Edit HTML jangan pada posisi Compose. Apabila ingin di simpan di sidebar, pilih yang untuk HTML/javaScript.
======================================================================
Sekarang Kita Akan Membuat Tabel Menggunakan Baris Yang Digabung
Contoh :
<TABLE border="5" width="200" height="150">
<TR>
<TD>SATU>/TD>
<TD rowspan="2">DUA</TD>
</TR>
<TR>
<TD>TIGA</TD>
</TR>
</TABLE>
Maka Akan Tampil
SATU | DUA |
TIGA |
=======================================================================
Selanjutnya Kita Akan Membuat Tabel Menggunakan Kolom Yang Digabung
Contoh :
<TABLE border="5" width="200" height="150">
<TR>
<TD>SATU</TD>
<TD>DUA</TD>
</TR>
<TR>
<TD colspan="2">TIGA</TD>
</TR>
</TABLE>
Maka Akan Tampil
SATU | DUA |
TIGA |
========================================================================
Dan Yang Terakhir Kita Akan Membuat Kolaborasi Antara Kedua MergeCell Tersebut.
Contoh :
<TABLE BORDER="5" WIDTH="200" HEIGHT="150">
<TR>
<TD>SATU</TD>
<TD>DUA</TD>
<TD rowspan="2">TIGA</TD>
</TR>
<TR>
<TD colspan="2">EMPAT</TD>
</TR>
</TABLE>
Maka Akan Tampil :
SATU | DUA | TIGA |
EMPAT |
=======================================================================
Rasanya cukup deh untuk hari ini,!
Selamat berusaha !
Ant Adm
Blogging