> Cara Membuat Tabel (Tahap 2)

Sabtu, 26 Februari 2011

5

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.





Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara Membuat Tabel (Tahap 2)"
Diulas Oleh : | Sabtu, 26 Februari 2011 | 22.57
Description : Pada bulan yang lalu saya sudah menulis tentang cara membuat Tabel (Tahap 1) . Bila anda belum sempat melihat atau belum membaca artikelnya,...

Rating : 6.4 Dari 10, Berdasarkan 500+ Dari 5 000+ Pengunjung.



5 komentar:

  1. oke trimks ka ilmunya....

    BalasHapus
  2. syukron, jazakallahu khairan buat ilmunya

    BalasHapus
  3. terima kasih! sangat membantu saya sebagai pemula! :)

    BalasHapus
  4. bermanfaat banget..artikelnya thx

    BalasHapus
  5. Makasih atas tutorialnya, sangat membantu ane sekali

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down