Tampilkan postingan dengan label Tabel. Tampilkan semua postingan
Tampilkan postingan dengan label Tabel. Tampilkan semua postingan

Cara Membuat Tabel (Tahap 2)

Pada bulan yang lalu saya sudah menulis tentang cara membuat Tabel (Tahap 1). Bila anda belum sempat melihat atau belum membaca artikelnya,silahkan anda bisa lihat DISINI. Kali ini saya akan melanjutkan memberikan beberapa contoh lagi cara membuat tabel serta perbedaan cara penulisannya.

Ok....langsung saja silahkan perhatikan perbedaan contoh-contoh berikut ini :
1. Tabel tanpa border atau batas dan tabel dengan border

  • Tabel tanpa border
<table>
<tr>
  <td>Tabel tanpa border</td>
  <td>Tabel tanpa border</td>
  <td>Tabel tanpa border</td>
</tr>
<tr>
  <td>Tabel tanpa border</td>
  <td>Tabel tanpa border</td>
  <td>Tabel tanpa border</td>
</tr>
</table>
Berikut hasilnya :

Tabel tanpa border Tabel tanpa border Tabel tanpa border
Tabel tanpa border Tabel tanpa border Tabel tanpa border

  • Tabel dengan border
<table border="1">
<tr>
  <td>Dengan border</td>
  <td>Dengan border</td>
  <td>Dengan border</td>
</tr>
<tr>
  <td>Dengan border</td>
  <td>Dengan border</td>
  <td>Dengan border</td>
</tr>
</table>
Berikut hasilnya :

Dengan border Dengan border Dengan border
Dengan border Dengan border Dengan border

Catatan : Nilai border '0' sama dengan tanpa border
2. Tabel header atau Judul
  • Judul diatas
<table border="1">
<tr>
  <th>Nama</th>
  <th>Alamat</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Siti Mariam</td>
  <td>Jogja</td>
  <td>555 77 855</td>
</tr>
</table>
Berikut hasilnya :

Nama Alamat Telephone
Siti Mariam Jogja 555 77 855


  • Judul disamping
<table border="1">
<tr>
  <th>Nama :</th>
  <td>Siti Mariam</td>
</tr>
<tr>
  <th>Alamat :</th>
  <td>Jogja</td>
</tr>
<tr>
  <th>Telephone :</th>
  <td>555 77 855</td>
</tr>
</table>
Berikut hasilnya :

Nama : Siti Mariam
Alamat : Jogja
Telephone : 555 77 855



3. Tabel Header dan keterangan

<table border="1">
  <caption>Pendapatan bulanan :</caption>
  <tr>
    <th>Bulan</th>
    <th>Hasil</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>Rp.4000.000,-</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>Rp.5000.000,-</td>
  </tr>
</table>
Berikut hasilnya :

Pendapatan bulanan :
Bulan Hasil
Januari Rp.4000.000,-
Februari Rp.5000.000,-

4. Tabel dengan sel-sel yang lebih dari satu baris / kolom
  • Sel yang mencakup dua kolom:Sel yang mencakup dua kolom:
<table border="1">
<tr>
  <th>Nama</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Siti Mariam</td>
  <td>000 000 001</td>
  <td>000 000 002</td>
</tr>
</table>
Berikut hasilnya :

Nama Telephone
Siti Mariam 000 000 001 000 000 002
  • Sel yang mencakup dua baris:

<table border="1">
<tr>
  <th>Nama :</th>
  <td>Siti Mariam</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>000 000 001</td>
</tr>
<tr>
  <td>000 000 002</td>
</tr>
</table>
Berikut hasilnya :

Nama : Siti Mariam
Telephone: 000 000 001
000 000 002


5. Tag di dalam tabel 
Bagaimana menampilkan elemen-elemen di dalam unsur-unsur lain.
<table border="1"><tbody>
<tr>
<td>Hewan kesukaan :
<ul>
<li>Kucing</li>
<li>Burung</li>
<li>Kelinci</li>
<li>Kuda</li>
</ul>
</td>
<td>
<table border="1">
<tbody>
<tr>
<td>Gambar 1</td>
<td>Gambar 2</td>
</tr>
<tr>
<td>Gambar 3</td>
<td>Gambar 4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Teks</td>
<td>Teks</td>
</tr>
</tbody>
</table>  
Berikut hasilnya :

Hewan kesukaan :
  • Kucing
  • Burung
  • Kelinci
  • Kuda
Gambar 1 Gambar 2
Gambar 3 Gambar 4
Teks Teks


6. Cell padding 
Cellpadding berfungsi agar teks atau gambar tidak terlalu dekat dengan garis pada tabel.

<table border="1"
cellpadding="10">
<tr>
  <td>Teks</td>
  <td>Teks</td>
</tr> 
<tr>
  <td>Teks</td>
  <td>Teks</td>
</tr>
</table>
Berikut hasilnya :

Teks Teks
Teks Teks


7. Cell jarak 
Cara menggunakan cellspacing untuk meningkatkan jarak antara sel.


<table border="1"
cellspacing="10">
<tr>
  <td>Teks</td>
  <td>Teks</td>
</tr> 
<tr>
  <td>Teks</td>
  <td>Teks</td>
</tr>
</table>
Berikut hasilnya :

Teks Teks
Teks Teks


Nah.... sementara ini dulu ya.....?
Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Diposting oleh di Tidak ada komentar:
Label: ,

Membuat variasi Font pada Teks

Sebuah Web ataupun Blog diharapkan memberi tampilan yang indah dan menarik. Salah satunya mengan memberikan variasi pada teks sesuai dengan selera kita,seperti memberi warna pada teks, memberi ukuran besar kecil dll. Dan kali ini saya akan memberi contoh bagaimana cara penulisan dalam HTML, agar tulisan lebih bervariasi.

Nama-nama Font bisa anda lihat dibagian paling bawah halaman ini. Daftar font yang saya contohkan saya ambil dari nama-nama font yang di pakai di Notepad, versi script western.
Untuk memberi warna pada teks anda, silahkan lihat dan pilih warna dan kodenya yang ada  pada Tabel kode warna di : http://www.buatblog-mudah.co.cc/p/kode-warna-color-code.html  Atau KLIK DISINI

OK...!!!, sekarang silahkan anda perhatikan perbedaan contoh-contoh berikut :

1. Teks standart :
<font>Teks dengan fon standart</font>
berikut hasilnya :
Teks dengan font standart


2. Teks dengan nilai besar-kecil :
<font size="6">Teks dengan ukuran font</font>
 berikut hasilnya :

Tek dengan ukuran font


3. Teks dengan nilai ukuran dan berwarna :

<span style="color: #FF0000; font-size: 45px;">Teks dengan nilai ukuran dan berwarna merah</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna merah

<span style="color: #ffff20; font-size: 50px">Teks dengan nilai ukuran dan berwarna kuning</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna kuning

<span style="color: #009600; font-size: 30px;">Teks dengan nilai ukuran dan berwarna hijau</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna hijau

<span style="color: #1418ff; font-size: 20px;">Teks dengan nilai ukuran dan berwarna biru</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna biru



4. Teks berwarna dengan besar 30px,font Goudy Stout :
<span style="color: #1418ff; font-size: 30px"><span style="font-family: Goudy Stout,sans-serif;">Teks berwarna dengan besar 30px,font Goudy Stout</span></span>

berikut hasilnya :
Teks berwarna dengan besar 30px,font Goudy Stout

Gimana mudah kan....?
Berikut ini daftar macam-macam font untuk anda coba terapkan pada artikel anda :

Nama-nama Font
Agency FB
Algerian
Arial
Arial Rounded MT
Baskerville Old Face
Bauhaus 93
Bell MT
Berlin Sans FB
ArialBernard MT
Blackadder ITC
Bodoni MT
Bodoni MT Poster
Book Antiqua
Bookman Old Style
Bradley Hand ITC
Britannic
Broadway
Brush Script MT
Calibri
Century Gothic
Century Schoolbook
Chiller
Colonna MT
Comic Sans MS
Cooper
Copperplate Gothic
Courier
Curlz MT
Edwardian Script ITC
Elephant
Engravers MT
Eras ITC
Felix Titling
Fixedsys
Footlight MT
Forte
Franklin Gothic
Freestyle Script
French Script MT
Futura Md BT
Gabriola
Georgia
Gigi
Gill Sans
Gloucester MT
Goudy Old Style
Goudy Stout
Haettenschweiler
Harlow Solid
Harrington
High Tower Text
Impact
Informal Roman
okermanJ
Juice ITC
Kristen ITC
Kunstler Script
Latin
Lucida Calligraphy
Lucida Console
Lucida Handwriting
Lucida Sans
Magneto
Maiandra GD
Matura MT Script Capitals
Microsoft Sans Serif
Mistral
Modern
Modern No. 20
Monotype Corsiva
MS Sans Serif
MS Serif
Niagara Engraved
Niagara Solid
OCR-A BT
Old English Text MT
Onyx
Palace Script MT
Palatino Linotype
Papyrus
Playbill
Poor Richard
Pristina
Rage
Ravie
Rockwell
Roman
ArialScript
Script MT
Segoe Print
Segoe Script
Segoe UI
ArialShowcard Gothic
Small Fonts
Snap ITC
Stencil
System
Tahoma
Tempus Sans ITC
Terminal
Times New Roman
Trebuchet MS
Tw Cen MT
Verdana
Viner Hand ITC
Vivaldi
Vladimir Script

selamat mencoba dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.
Diposting oleh di 1 komentar:
Label: , , , , , , , , ,

Cara Buat Kotak atau Teks Area

Saat yang lalu saya menjelaskan cara membuat tabel. Dan pada tutorial blog kali ini hampir mirip dengan tabel, sama-sama berbentuk kotak. Tapi kotak yang ini berfungsi sebagai teks area dan bentuknya lebih sederhana, tapi tetap indah dan rajin. Cara buat kotak ini mudah, hanya dengan menggunakan atribut html : <fieldset>

Berikut kodenya silahkan anda copy, bila anda berminat :

Kotak 1
<fieldset>
Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Teks anda disini


<fieldset><br>
<legend><b>Judul Teks disini</b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :



Judul Teks disiniIsi Teks anda disini


<fieldset><br>
<legend><b><fieldset>Judul Teks disini</fieldset></b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :



Judul Teks disini
Isi Teks anda disini

Nah.....,mudah kan...?
Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.
Diposting oleh di 1 komentar:
Label: , , , , , , , , ,

Cara Membuat Tabel (Tahap 1)

Tutorial Blog kali ini saya akan membahas bagaimana cara membuat tabel. Karena tabel sangat penting dan sering diperlukan ketika kita edit atau posting artikel pada web atau blog. Biasanya tabel digunakan untuk membuat Daftar atau forum. Tapi dengan tabel kita juga bisa membuat artikel kita menjadi beberapa Kolom atau Layout, seperti halnya yang sering kita lihat kolom-kolom yang ada di Koran atau majalah.
Untuk membuat tabel, ada beberapa unsur elemenatau atribut html yang kita butuhkan, yaitu :
-    Table width : nilai lebar tabel keseluruhan.
-    Border : nilai ketebalan garis
-    Baris tabel ditandai dengan tag awal <tr> dan tag akhir </tr>
-    Kolom tabel ditandai dengan tag awal <td> dan tag akhir </td>

Silahkan anda  perhatikan cara penulisan kode untuk membuat tabel :

1. Tabel 1 kolom, dan 1 baris
<table width="500" border="1">
<tr>
<td scope="col">Tabel 1 kolom, dan 1 baris</td>
</tr>
</table>

Berikut hasilnya :
Tabel 1 kolom, dan 1 baris


2. Tabel 1 kolom, dan 2 baris
Untuk membuat tabel 2 baris dan seterusnya, kita tinggal menambahkan elemen tag <tr></tr>  diantara tag <table> </table>  yaitu :

<table width="500" border="1">
<tr>
<td>Tabel 1 kolom, dan baris pertama</td>
</tr>
<tr>
<td>Tabel 1 kolom, dan baris kedua</td>
</tr>
</table>

Berikut hasilnya :
Tabel 1 kolom, dan baris pertama
Tabel 1 kolom, dan baris kedua


3. Tabel 2 kolom, dan 1 baris
Untuk membuattabel 2 kolom dan seterusnya kita tinggal menambahkan elemen tag <td></td> diantara <tr></tr>  yaitu :

<table width="500" border="1">
<tr>
<td> Kolom Pertama</td>
<td>Kolom Kedua</td>
</tr>
</table>

Berikut hasilnya :
Kolom Pertama Kolom Kedua


4. Tabel 2 kolom dengan 2 baris

<table width="500" border="1">
<tr>
<td>Baris pertama dan Kolom Pertama</td>
<td>Baris pertama dan Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua dan Kolom Pertama</td>
<td>Baris Kedua dan Kolom Kedua</td>
</tr>
</table>

Berikut hasilnya :
Baris pertama dan Kolom Pertama Baris pertama dan Kolom Kedua
Baris Kedua dan Kolom Pertama Baris Kedua dan Kolom Kedua


5. Tabel dengan garis tebal
Garis tebal ditentukan oleh Nilai border, semakin besar nilainya semakin Tebal garisnya dan terlihat seperti 3D (efek bevel)

<table width="500" border="5">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks


6. Tabel dengan garis berwarna
Untuk memberi  warna border kita tinggal menambah  “bordercolor “

<table width="0" border="1" bordercolor="#3083FF">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks


7. Tabel dengan warna background sama
Untuk memberi warna Background dengan warna sama seluruh tabel kita tinggal menambah  “bgcolor “.

<table width="500" border="1" bgcolor="#00FF00">
<tr>
<td><div align="center">Teks</div></td>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks
Teks


8. Tabel dengan warna beda
Untuk memberi warna Background dengan warna berbeda pada setiap kolomnya :

<table width="500" border="1">
<tr>
<td bgcolor="#D9F5FF"><div align="center">Teks</div></td>
<td bgcolor="#E1FACD"><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks
Teks


9. Tabel dengan Judul

<table width="500" border="1">


<tr> <th colspan="100%" scope="col"bgcolor="#FFF7DB">JUDUL TABEL</th> </tr>
<tr>
<td bgcolor="#E4FADE"><div align="center"><strong>Judul Kolom 1</strong></div></td>
<td bgcolor="#EDFBFF"><div align="center"><strong>Judul Kolom 2</strong></div></td>
<td bgcolor="#FDF0FF"><div align="center"><strong>Judul Kolom 3</strong></div></td>
</tr>
<tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
JUDUL TABEL
Judul Kolom 1
Judul Kolom 2
Judul Kolom 3
Teks
Teks
Teks
Teks
Teks
Teks

Nah....., Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.
Diposting oleh di 1 komentar:
Label: , , , , , , , , , , , ,

Cara buat tabel kode warna

Warna sangat berperan dalam pembuatan website atau blog. Dan pemberian warna dalam mebuat web atau blog, yang dibutuhkan adalah "code color" atau "kode warna". Hampir setiap saat kita edit dan posting artikel pada web atau blog, "kode warna" selalu kita butuhkan.
Repotnya... ketika kita butuh kode warna, sering kali kita harus mencari sebuah web atau blog yang menyediakan kode warna tersebut.... iya kan....?.
Nah.... Tutorial blog kali ini akan berbagi pada anda, bagaimana cara mebuat tabel kode warna sendiri seperti tabel kode warna dibawah ini, yang di pasang pada web atau blog kita.

Berikut Tabel kode warna yang saya maksud :






































































































































































































Kode HTML Warna :
 Ok..... silahkan anda ikuti langkah-langkah berikut ini :

1. Kamu harus Login dulu di Blogger.com dengan ID kamu
2. Klik Layout / Rancangan lalu pilih Edit HTML
3. Jangan lupa Centang Expand Widget
4. Copy dan paste kode berikut diatas kode </head> :



5. Selanjutnya Save Template
 
Langkah selanjutnya :

Kopi dan paste kode dibawah ini pada Entri baru, bila anda menghendaki tabel kode warna dipasang pada postingan anda. Dan kopi paste kode dibawah ini pada Gadget bila anda menghendaki tabel kode warna dipasang pada bilah samping, dengan cara tambah gadget pada Elemen Laman.

Berikut kodenya :



Jadi deh.....
Silahkan anda mencoba,

Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu ya....., Terima kasih.



Diposting oleh di 3 komentar:
Label: , , , , , ,
Langganan: Komentar (Atom)