Jumat, April 03, 2009
//
13
komentar
//
Rudy
// Category:
Blogging Tutorial
,
Html
//
Pada postingan html tutorial kali ini, saya akan mencoba memberikan metode memasukan / memposting tabel dengan menggunakan kode html, bmgn cara memformat tag-tag html agar browser internet dapat menampilkannya dalam bentuk tabel ?
sudalah, males cuap-cuap tau Baiklah, untuk menjawabnya lebih lanjut pahami penjelasan
berikut :
Perhatikan baik-baik bentuk -bentuk tabel di berikut ini dan pahami penjlasnnya, jika tidak demikian, maka siasialah anda yang sudah terlanjur nyasar di situs ini, ckckck..
- BENTUK PERTAMA (KOLOM VERTIKAL)
| baris pertama |
| baris kedua |
| baris ketiga |
Kodenya seperti ini :
<table border="1">
<tr><td>baris pertama</td></tr>
<tr><td>baris kedua</td></tr>
<tr><td>baris ketiga</td></tr>
</table>
- BENTUK KEDUA ( KOLOM HORIZONTAL)
| kolom pertama |
kolom kedua |
kolom ketiga |
kolom keempat |
kodenya seperti ini :
<table border="1">
<tr><td>kolom pertama</td>
<td>kolom kedua</td>
<td>kolom ketiga</td>
<td>kolom keempat</td>
</tr>
</table>
- MENGKOBINASIKAN KE-DUA BENTUK (VERTIKAL & HORIZONTAL)
| baris pertama, kolom 1 |
baris pertama, kolom 2 |
baris pertama, kolom 3 |
| baris kedua, kolom 1 |
baris kedua, kolom 2 |
baris ketiga, kolom 3 |
| baris ketiga, kolom 1 |
baris ketiga, kolom 2 |
baris ketiga, kolom 3 |
Kodenya seperti ini :
<table border="1">
<tr><td>baris pertama, kolom 1</td>
<td>baris pertama, kolom 2</td>
<td>baris pertama, kolom 3</td>
</tr>
<tr><td>baris kedua, kolom 1</td>
<td>baris kedua, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
<tr><td>baris ketiga, kolom 1</td>
<td>baris ketiga, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
</table>
Penjelasan :
Kode yang berupa angka "1" adalah nilai ketebalan tabel. Bisa di ganti dengan yang lebih besar tau..!! hehe..
Perhatikan dan pahami cara penempatan tag demi tag, saya rasa tidak perlu lagi untuk menjelaskan cara menambahkan kolom pada tabel, karena saya yakin jika anda telah memahaminya, penjelasannya akan sia-sia. Maka dari itu kita beralih saja untuk bagaimana cara melakukan sedikit sentuhan variasi pada tabel. Deal ?
- SENTUHAN VARIASI
Tata letak
Penempatan tabel pada kolom postingan dapat Anda atur dengan cara mengganti kode <table border="1"> dengan kode <table align="center"border="1">
KET :
Posisi atau letak tabel dapat di atur dengan merubar kode center.
center → tengah
right → kanan
left → kiri
- MASUKAN WARNA
Jika tabel ingin kelihatan lebih variatif, ubahlah warna pada bagian background kolom tabel, misalkan Anda ingin mengubah background pada kolom headher, maka kode <tr> di ganti dengan kode <tr bgcolor="#kode warna">
bisa juga pada kolom lainnya, caranya sama seperti di atas, yaitu tinggal mengganti tag (tr) dengan (td) pada backgroun kolom yang hendak di warnai.
Jadi, jika ingin mengubah seluruh warna background tabel, maka kodenya seperti ini : <table bgcolor="#kode warna">
Sedangkan untuk mengubah warna teks dalam kolom, gunakan saja sikat gigi yg lama kode seperti biasa, seperti ini : <font color="#kode warna">teks disini</font>
Cara meletakan kode untuk variasi dari penjelasan di atas seperti di bawah ini :
| contoh teks berwarnah |
contoh background berwarnah |
baris pertama, kolom 3 |
| baris kedua, kolom 1 |
baris kedua, kolom 2 |
baris ketiga, kolom 3 |
| baris ketiga, kolom 1 |
baris ketiga, kolom 2 |
baris ketiga, kolom 3 |
Kodenya seperti berikut :
<table border="1">
<tr><td><font color="#ff0000">contoh teks berwarnah</font></td>
<td bgcolor="#ff0000">contoh background berwarnah</td>
<td>baris pertama, kolom 3</td>
</tr>
<tr><td>baris kedua, kolom 1</td>
<td>baris kedua, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
<tr><td>baris ketiga, kolom 1</td>
<td>baris ketiga, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
</table>
Nah, untuk mengubah ukuran font dan warna font, misalkan pada kolom headher tabel, kodenya seperti ini :
<font color="#kode warna"face="arial" size="8">teks di sini</font>
KET :
"arial" adalah jenis font.
"8" adalah ukuran font.
Cara penempatannya sama seperti biasa. Seperti pada cara mewarnai teks dalam kolom.
Sebenarnya masi banyak bentuk lain yang dapat di hasilkan jika anda sebelumnya pernah membaca dan memahami tutorial html pada postingan saya yang lalu. Tinggal bagaimana Anda dapat memaksimalkan daya kreatifitas Anda dalam pemformatan kode html. Do You Know ?? Buat Aku, ini mengasikan sekaligus memusingkan, hehe...
Saya yakin, Anda akan lebih mudah memahaminya jika langsung di praktek.
Happy Blogging !!
2008 - 2009 SimplexDesign. Content in my blog is licensed under a Creative Commons License.
Xiao Mei
April 09, 2009 7:57 AM
hmmmm bagus mas buat postingan gini.. sukses ya
matrix-blue23
April 19, 2009 7:52 PM
mas gimana caranya bwt bkin 2 kolom tapi menjadi satu kolom, kaya di merge cell gtoo, d tunggu jawabannya thanks sebelumnya
Rudy
April 20, 2009 4:25 AM
@Albri: Terimakasih atas dukungannya, sukses jg bwt Anda mas....!
Rudy
April 20, 2009 4:45 AM
@Bluematrix23: semoga penjelasan berikut adalah jawabn yg anda hrapkan, cara membwtnya ckup simple ko, . .
Kuncinya kita hruz memahami bnar2 fungsi tiap2 tag di ats...
kode yg seperti ini :
<table border ="1">
<tr>
<td>teks bisa di sini
<table align="center" border="1"><tr><td>Kolom pertama</td><td>Kolom kedua</td></tr></table>
bisa juga di sini
</td><tr></table>
kode di atas akan menghasilkan bentuk kolom mirip merge cell, ininya adalah meletakan 2 kolom tabel ke dalam 1 kolom tabel.
semoga bisa ini bisa membantu, dan jika ada yg kurang jelas, silakan bertanya kmbali...
Moga sukses, dan salam kenal..hehe
matrix-blue23
April 20, 2009 10:25 PM
oh iya mas siiip, dah di coba n berhasil, oh ya mas. kenapa lo kita posting di blog coba pake kode html, hasilnya tu sesalu di bawah banget. jadi judul ma isinya teh jauh (judul di atas, isinya di bawah banget).lam kenal juga mas :-)
Rudy
April 21, 2009 2:26 AM
Hmm, penyebabnya ada beberapa kemungkinan Mas, jd kalw ga kbratan, mohon untk lebih di deskripsikan pertanyaanya agar kiranya penjelasan yg saya kasi tpat sasaran (nyantai aj kalle) Hehe...
Mungkin itu krna efek tag Html yg di posting, silakan mas tulis kodenya di kotak komentar ini,..
Oh ya, tp sblum itu mas harus klik di di sini dan masukan kode trsbt sblum di posting di kotak komentar, hasil parsenya yg di posting di kolom komentar..
matrix-blue23
April 21, 2009 7:01 PM
<table border="1">
<tr><td>NO</td>
<td>NAMA</td>
<td>TANGGAL</td>
<td>SIRKUIT</td>
</tr>
<tr><td>01</td>
<td>GP Qatar</td>
<td>12 April 2009</td>
<td>Sirkuit Losail (Evening Race)</td>
</tr>
<tr><td>02</td>
<td>GP Jepang</td>
<td>26 April 2009</td>
<td>Sirkuit Motegi</td>
</tr>
<tr><td>03</td>
<td>GP Spanyol</td>
<td>02 Mei 2009</td>
<td>Sirkuit Jerez</td>
</tr>
<tr><td>04</td>
<td>GP Francis</td>
<td>17 Mei 2009</td>
<td>Sirkuit Le Mans</td>
</tr>
<tr><td>05</td>
<td>GP Italy</td>
<td>31 Mei 2009</td>
<td>Sirkuit Mugello</td>
</tr>
<tr><td>06</td>
<td>GP Catalunya</td>
<td>14 Juni 2009</td>
<td>Sirkuit catalunya</td>
</tr>
<tr><td>07</td>
<td>GP Belanda</td>
<td>27 Juni 2009</td>
<td>Sirkuit Assen</td>
</tr>
<tr><td>08</td>
<td>GP USA</td>
<td>05 Juli 2009</td>
<td>Sirkuit Sirkuit Laguna Seca (hanya kelas MotoGP)</td>
</tr>
<tr><td>09</td>
<td>GP Jerman</td>
<td>19 Juli 2009</td>
<td>Sirkuit Sachenring</td>
</tr>
<tr><td>10</td>
<td>GP Inggris</td>
<td>26 Juli 2009</td>
<td>Sirkuit Donington Park</td>
</tr>
<tr><td>11</td>
<td>GP Ceko</td>
<td>16 Agustus 2009</td>
<td>Sirkuit Brno</td>
</tr>
<tr><td>12</td>
<td>GP Indianapolis</td>
<td>30 Agustus 2009</td>
<td>Sirkuit Indianapolis</td>
</tr>
<tr><td>13</td>
<td>GP San Marino</td>
<td>06 September 2009</td>
<td>Sirkuit Misano</td>
</tr>
<tr><td>14</td>
<td>GP Hungaria (Baru) Batal</td>
<td>20 September 2009</td>
<td>Sirkuit Ballaton</td>
</tr>
<tr><td>15</td>
<td>GP Portugal</td>
<td>04 Oktober 2009</td>
<td>Sirkuit Estoril</td>
</tr>
<tr><td>16</td>
<td>GP Australia</td>
<td>18 oktober 2009</td>
<td>Sirkuit Phillip Island</td>
</tr>
<tr><td>17</td>
<td>GP Malaysia</td>
<td>25 Oktober 2009</td>
<td>Sirkuit Sepang</td>
</tr>
<tr><td>18</td>
<td>GP Valencia</td>
<td>08 November 2009</td>
<td>Sirkuit Ricardo Tormo</td>
</tr>
</table>
matrix-blue23
April 21, 2009 7:05 PM
untuk hasilnya lo ga sbuuuuk boleh liat di blognya mas, " matrix-blue23.blogspot.com "oh ya mas sekalian mo nanya neeeh, tau kode html bwt bikin album foto kaya fs ga mas ????, coi neeeh banyak tanya kaya wartawan kwakwakwakwakwakwakwakwa
Rudy
April 21, 2009 9:42 PM
Kalw di prhtikan, spertinya ga ada masalah pd tags html-nya (cory mas udah nyusahin, hehe).....
Sbgai seorang yg jg masi dlm tahap bljr, muda2han alternatif ini dpt di andalkan, masuk ke dashboard → pengaturan → format → tuju pd pilihan "konversi ganti baris" pilih "aktif", truzt Klik "simpan".(perubahan akan berlaku untk semua blog mas)
Untuk masalah ini, sya blum bgt tw penyebabnya apa, olehnya itu jika ada yg tw, mohon untk sharing di sini. Bersama kita belajar.
Saya emank lg pengen bikn postingan mengnai jenis2 border (ada kaitannya dgn pertanyaan mas), tp blum tw kpn, hehe..he
sudah 2 minggu lbih koneksi pd warnet di tmpt saya bermasalah. Jd blogingnya pk handphone duank, hehe.he...he
Rudy
April 21, 2009 9:48 PM
RALAT :
Pada "konversi ganti baris" pilih "tidak".
lhutfi
Juni 16, 2009 11:25 PM
pinter banget sich mas..
zian
Februari 10, 2010 3:08 AM
salam kenal mas rudy...
nice post!! tp saya masih bingung nempatin kodenya dimana? ditemplate kah? atau di langsung di kolom postingan?
Sukarno
Juli 19, 2010 10:07 AM
Mau tanya ni Mas Rudi, saya udah coba posting tabel menggunakan contoh mas Rudi namun hasil posting munculnya di arsip. Tolong solusinya makasih atas segalanya.