Cara Membuat Tabel dengan HTML

Pada penggunaan PHP, salah satu elemen yang sering digunakan adalah membuat tabel dengan html disertai kode warna CSS. Tabel merupakan salah satu objek yang terbentuk dari beberapa garis dan bidang yang membentuk sebuah kotak.

Tabel ini hampir sama dengan perintah div, perbedaannya div adalah pembagian bidang yang dapat diisi berbagai elemen sedangkan tabel adalah himpunan kotak yang memiliki border garis berdasarkan baris dan kolom. Hampir sama dengan cara membuat kotak, perbedaannya table adalah kumpulan kotak.

HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan sebagainya. Apabila anda sedang mempelajari pemrograman web dengan PHP, maka tidak akan terlepas dari HTML dan database. Dari database tersebut, tentu berbentuk sebuah tabel. Oleh karena itu sangat penting bagi kita untuk mengetahui kode yang merupakan elemen pemasangan sebuah tabel.

Terlebih dahulu kita akan mengenal perintah kode-kode yang berhubungan dengan tabel.

Perintah Dasar Membuat Tabel di HTML :
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Tanggal Lahir</th>
  </tr>
  <tr>
    <td>Ahmad Ridwan</td>
    <td>21-03-2013</td>
  </tr>
</table>
Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :

<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.

Atribut pendukung Table :

align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
border-color : untuk memberi tebal garis dengan warna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom

Berikut ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut :

table html with css
Susunan script kodenya :
<table width="510" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="58" rowspan="3" bgcolor="#00CCCC">Rowspan 3</th>
<th width="79" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">ALI</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">11211</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF00">UDIN</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">23232</td>
<td bgcolor="#FFFF00">&nbsp;</td>
<td bgcolor="#FFFF00">&nbsp;</td>
</tr>
</table>

Tabel memang sangat banyak digunakan mulai dari Microsoft Excell, Microsoft Word, Microsoft Powerpoint, Adobe Dreamweaver dan lainnya. Demikian tutorial dan dasar cara membuat table html dengan css. Semoga dapat membantu anda dalam membuat website, design blog, laporan kerja, dll.
Baca juga artikel dan panduan Cara Membuat Readmore Otomatis dengan Mudah.

46 comments:

  1. kalo mau bikin misalkan 5 baris ke bawah itu kode apa yang di ganti?

    ReplyDelete
    Replies
    1. untuk buat 5 baris ke bawah, pakai perintah < tr > lalu tutup dengan < /tr >

      Delete
  2. Sip mas, ini yang saya cari. Trims infonya... :)

    ReplyDelete
    Replies
    1. iya mas semoga bermanfaat dan terbantu.

      Delete
  3. makasih kawan...................
    Sukses selalu

    ReplyDelete
  4. makasih atas totorialnya mas... bermanfaat bangets...

    klo sempat kunjungi blog kita ya thanks..http://blogigolo.blogspot.com/

    ReplyDelete
  5. mas kalau mau nambahin link ke tabel tu gimana ya?

    ReplyDelete
    Replies
    1. tergantung mas, mas mau namabahkan link untuk apa?
      Powerpoint, HTML, PHP, atau apa yah?

      Delete
    2. kalau yang html gimana caranya?

      Delete
    3. mudah mas. tinggal masukkan kode < a href= 'url link' > Kata Yang ingin Diisi < / a >
      mas bisa masukkan setelah kode < td > , < tr > dll.

      Delete
  6. thankz,,,,,,,,,,
    by http://dewahoki.blospot.com

    ReplyDelete
  7. terimakasih atas panduanya..semoga bisa langsung saya praktekan dalam bog baru saya ini..

    ReplyDelete
  8. muantap gan... ane juga pasang nih.. ma kasih ya... salam persahabatan... salam blogger.... salam Indonesia....

    ReplyDelete
    Replies
    1. salam blogger indonesia.
      semangat !!!

      Delete
  9. mantap gan bagus banget ni buat newbie seperti saya, terima kasih gan

    syamsblog95.blogspot.com/

    di tunggu kunjungannya ya gan

    ReplyDelete
    Replies
    1. iya mas terimakasih telah berkunjung dan berkomentar.
      semoga dapat menambah wawasan.

      Delete
  10. izin meniru mas, coba nanti saya ubah sedikit agar sesuai dengan blog saya

    ReplyDelete
    Replies
    1. oke deh selamat mengedit dan mncoba ^^

      Delete
  11. mantap gan... kunjung balik ke blog saya gan http://xmisteri.blogspot.com salam kenal...

    ReplyDelete
  12. Gan gmna html na klo tabel 1 baris 8 kotak gan gw da coba tapi brantakan mohon di bantu ya....soal na gw mau pasang gambar iklan

    ReplyDelete
  13. Sangat bermanfaat sob, , ,
    Mampir ya ke blog ane..
    http://at2sc.heck.in

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

    ReplyDelete
  15. mau tanya nich min admin, caranya mendapatkan packring dari google itu gimana ??
    wabsate saya.. www.caradewasa.com | www.pembesarpenispria.net | www.pusatvigrxplus.com itu kok gk dapat pagerank ya caranya gimana min ?

    ReplyDelete
  16. kalok bikin kayak shop kick denim gimana ya gan
    tolong di bantu ya gan.

    ReplyDelete
  17. kalok bikin shop kick denim caranya kayak mana ya gan,
    tolong di bantu ya gan>

    ReplyDelete
  18. kalok bikin shop kick denim caranya kayak mana ya gan,
    tolong di bantu ya gan>

    ReplyDelete
  19. Makasih gan bermanfaat sekali..ini yg sedang saya pelajari...

    ReplyDelete
  20. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    ReplyDelete
  21. waduuhhh aku ga bisa bisa nih..? udah berjam jam

    ReplyDelete
  22. mntb gan,smoga semakin sukses
    http://volimaniak.blogspot.com/

    ReplyDelete

Web Design Blogs W3 Directory - the World Wide Web Directory DMCA.com

Copyright © 2013 IMPOINT Blog . All rights reserved.| Blogger.com File Storage Created by Blogger Tuts | Template