> Membuat tabel HTML

Sabtu, 05 Maret 2011

4

Membuat tabel HTML

Dalam format html,Tabel didefinisikan dengan tag awal <table> dan tag akhir </table>. Secara dasar pada sebuah tabel terdapat beberapa elemen yaitu baris yang ditandai dengan tag <tr>, dan setiap baris atau tag <tr> terdiri atas sel-sel data yang ditandai dengan tag <td> singkatan dari "data tabel" . Didalam tag <td> inilah tempat meletakkan sebuah data atau dokumen seperti  teks, link, gambar, video, animasi, daftar, bentuk suatu bidang, dll, termasuk bisa diisi sebuah tabel itu sendiri, dengan kata lain tabel didalam tabel.

Secara keseluruhan, dalam pembuatan sebuah tabel, terdapat banyak unsur atau elemen tag, yang perlu diperhatikan sesuai dengan bentuk dan fungsinya masing-masing. Langsung saja silahkan perhatikan beberapa bentuk tabel dan perbedaan penulisannya dalam format html :

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


10. 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




11. 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,-




12. 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


13. 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


14. 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


15. 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


OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Membuat tabel HTML"
Diulas Oleh : | Sabtu, 05 Maret 2011 | 20.27
Description : Dalam format html, Tabel didefinisikan dengan tag awal <table> dan tag akhir </table>...

Rating : 6.4 Dari 10, Berdasarkan 400+ Dari 4 000+ Pengunjung.



4 komentar:

  1. Lengkap sekali, thanks sob...

    BalasHapus
  2. artikel yang sangat membantu buat saya :)

    BalasHapus
  3. Mantap banget, sangat lengkap & mudah dimengerti. Tq

    BalasHapus
  4. kita juga punya nih artikel mengenai 'Tabel HTML', silahkan dikunjungi dan dibaca , berikut linknya
    http://repository.gunadarma.ac.id/bitstream/123456789/7036/1/0000010372-_Jurnal_STIK_dty_20120710.pdf
    terimakasih
    semoga bermanfaat

    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