Membuat Table Dengan HTML

Discussion in 'HTML & Website Design' started by Reza Juliandri, Nov 7, 2014.

Page 1 of 2
  1. Reza Juliandri

    Reza Juliandri Member

    Joined:
    Nov 5, 2014
    Messages:
    34
    Likes Received:
    4
    Trophy Points:
    8
    Cara membuat table dengan html bisa dilakukan secara manual maupun menggunakan pembantu seperti Datatables. namun kali ini saya akan memberikan tutor bagaimana cara membuat table secara manual.
    Adapun Tag- Tag yang digunakan dalam membuat table dengan html diantaranya :

    1. <table>diakhiri dengan </table> digunakan untuk mengawali table.
    2. <caption>diahiri dengan </caption> digunakan untuk menentukan judul table.
    3. <thead>diakhiri dengan </thead> digunakan untuk menyatakan bagian judul.
    4. <tfoot> diakhiri dengan </tfoot> digunakn untuk menentukan bagian isis footer.
    5. <tbody>diakhiri dengan </tbody> digunakan untuk bagian isi pada table.
    6. <tr> diakhiri dengan </tr> digunakan untuk menentukan sebuah garis pada table.
    7. <th> diakhiri dengan </th> digunakan untuk menentukan sebuah sel pada judul kolom.
    8. <td> diakhiri dengan </td> digunakan untuk menentukan sebuah sel pada bagian isi dan footer.
    Baiklah setelah kita mengenali Tag yang digunakan untuk membuat table serta kegunaan nya saya akan berikan salah satu contoh :


    HTML:
    <!DOCTYPE HTML>
<html>
<head>
<title> Penggunaan Table Secara Manual</title>
</head>
<body>
<table border="1">
<caption> Contoh pembuatan table Secara manual</caption>
<thead>
<tr>
<th>Toko</th>
<th>Barang 1</th>
<th>Barang 2</th>
<th>Barang 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>10.000</td>
<td>20.000</td>
<td>30.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pasar Anyer</td>
<td>2000</td>
<td>6000</td>
<td>9000</td>
</tr>
<tr>
<td>Mall</td>
<td>8000</td>
<td>14000</td>
<td>21000</td>
</tr>
</tbody>
</table>
</body>
</html>
    save script html diatas dengan file berextensi html dan hasilnya akan muncul seperti ini:
    [​IMG]



    Link Sumber : http://allmywebstfn.blogspot.com/2014/10/cara-membuat-table-dengan-html.html#ixzz3IMgHS1an
     
    Reza Juliandri, Nov 7, 2014
    #1
    Saungmami likes this.
  2. BEIM

    BEIM Active Member

    Joined:
    Mar 17, 2014
    Messages:
    1,358
    Likes Received:
    36
    Trophy Points:
    48
    mantap nih,, bagus buat belajar php utk pemula :)
     
    BEIM, Nov 7, 2014
    #2
  3. Saungmami

    Saungmami Member

    Joined:
    Nov 2, 2014
    Messages:
    83
    Likes Received:
    7
    Trophy Points:
    18
    Memang tutorialnya sudah sering lihat sich saat blogwalking, namun sampai sekarang masih belum bisa membuat table sendiri di blog. *benci*

    Mudah-mudahan dari sini mulai bisa membuat table sendiri. Good job @Reza Juliandri .
     
    Saungmami, Nov 8, 2014
    #3
  4. Reza Juliandri

    Reza Juliandri Member

    Joined:
    Nov 5, 2014
    Messages:
    34
    Likes Received:
    4
    Trophy Points:
    8
    hehe jangan putus semangat mas semoga membantu :)
     
    Reza Juliandri, Nov 8, 2014
    #4
  5. Saungmami

    Saungmami Member

    Joined:
    Nov 2, 2014
    Messages:
    83
    Likes Received:
    7
    Trophy Points:
    18
    Saya ini cewek. *hurtmyself*
     
    Saungmami, Nov 8, 2014
    #5
  6. Reza Juliandri

    Reza Juliandri Member

    Joined:
    Nov 5, 2014
    Messages:
    34
    Likes Received:
    4
    Trophy Points:
    8
    hehhe sorry saya gk liat namanya *berkeringat*
     
    Reza Juliandri, Nov 8, 2014
    #6
  7. Saungmami

    Saungmami Member

    Joined:
    Nov 2, 2014
    Messages:
    83
    Likes Received:
    7
    Trophy Points:
    18
    Hehehe di sorry kan alias di maafkan. :D
     
    Saungmami, Nov 8, 2014
    #7
  8. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
    Ilmu yang sangat bagus, artikel ini penjelasannya ilmiah bikin tabel di blog.
    Tapi kalau mau cepat, silakan copy tabel dari excel anda ke situs http://tableizer.journalistopia.com, lalu klik tableize it! Copy hasilnya ke blog...
     
    nelson sitompul, Nov 9, 2014
    #8
  9. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    ohh,, gw kira table ituh kebawah, gak taunya kesamping
    HTML:
    <tr>
<td>Harga</td>
<td>Tipe</td>
<td>Deskripsi</td>
<td>dll</td>
</tr>
    SAYA KIRA JADINYA GINI →
    Harga |
    Tipe |
    Deskripsi|
    dll |
     
    programer, Nov 9, 2014
    #9
  10. Saungmami

    Saungmami Member

    Joined:
    Nov 2, 2014
    Messages:
    83
    Likes Received:
    7
    Trophy Points:
    18
    Informasi ini yang ndak kalah penting, jadi bisa mempercepat pembuatan tabel ke blog kita. *bagus*
     
    Saungmami, Nov 10, 2014
    #10
    nelson sitompul likes this.
  11. Reza Juliandri

    Reza Juliandri Member

    Joined:
    Nov 5, 2014
    Messages:
    34
    Likes Received:
    4
    Trophy Points:
    8
    hehe kalau itu bagi yang gak mau ribet cuman cocok sihh untuk orang yang sibuk sekali sehingga tidak sempat membuat table menggunakan tag-tag html secara manual.
     
    Reza Juliandri, Nov 10, 2014
    #11
    nelson sitompul likes this.
  12. Batik Trusmi Online

    Batik Trusmi Online Member

    Joined:
    Aug 12, 2014
    Messages:
    88
    Likes Received:
    4
    Trophy Points:
    18
    tutorial sederhana tapi bagus buat pemula *bagus*
     
    Batik Trusmi Online, Nov 10, 2014
    #12
  13. debays

    debays Active Member

    Joined:
    Jul 18, 2014
    Messages:
    1,409
    Likes Received:
    58
    Trophy Points:
    48
    wah bagus nih cocok untuk pemula seperti saya..
     
    debays, Nov 10, 2014
    #13
  14. Grant Verleend

    Grant Verleend Active Member

    Joined:
    Sep 10, 2014
    Messages:
    1,234
    Likes Received:
    35
    Trophy Points:
    48
    Google+:
    Mantep Tipsnya den tq banget
     
    Grant Verleend, Nov 10, 2014
    #14
  15. riki 21

    riki 21 Member

    Joined:
    Oct 21, 2014
    Messages:
    254
    Likes Received:
    25
    Trophy Points:
    28
    Google+:
    saya biasanya buat table di blog, dibuat dulu di word lalu disimpan dengan format html,
    baru dipindahkan ke blog
     
    riki 21, Nov 10, 2014
    #15
  16. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    Lumayan Threadnya om berasa nostaliga pada peleajaran kelas 2 SMP dulu, haha :D
     
    pram, Nov 10, 2014
    #16
  17. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Ini kode HTML Mas, tapi ke depannya berguna juga untuk php.
    Ah, masa seorang programer tidak tau :D
     
    Ardilas, Nov 10, 2014
    #17
  18. creative

    creative Well-Known Member

    Joined:
    Oct 24, 2014
    Messages:
    1,725
    Likes Received:
    160
    Trophy Points:
    63
    Google+:
    lebih simpel langsung copy paste aja dari Ms Word, mau bentuk kayak apapun bisa :)
     
    creative, Nov 10, 2014
    #18
  19. Najla

    Najla Member

    Joined:
    Aug 1, 2014
    Messages:
    445
    Likes Received:
    22
    Trophy Points:
    18
    Thanks, atas informasi nya sangat bermanfaat..menambah ilmu bagi saya pemula
     
    Najla, Nov 10, 2014
    #19
  20. Dede P

    Dede P Member

    Joined:
    Nov 4, 2014
    Messages:
    40
    Likes Received:
    2
    Trophy Points:
    8
    Sip infonya... bagus untuk pemula seperti saya^^
     
    Dede P, Nov 11, 2014
    #20
Page 1 of 2
Loading...
Similar Threads - Membuat Table Dengan
  1. Alexandromeo Lawrence

    Pentingnya Membuat Desain Website Terlebih Dahulu

    Alexandromeo Lawrence, Mar 28, 2021, in forum: HTML & Website Design
    Replies:
    3
    Views:
    3,942
    Blackboo
    Jun 29, 2021
  2. lalakana

    Cara Mudah Membuat Website Sederhana dengan WordPress

    lalakana, Jul 10, 2020, in forum: HTML & Website Design
    Replies:
    0
    Views:
    5,440
    lalakana
    Jul 10, 2020
  3. Goenawan2211

    Tips Desain Grafis yang akan Membuat Anda Seorang Desainer Pro dalam Semalam

    Goenawan2211, Mar 6, 2020, in forum: HTML & Website Design
    Replies:
    0
    Views:
    5,872
    Goenawan2211
    Mar 6, 2020
  4. cyberx1408

    Meta Tag Ini Bisa Membuat Blog Tidak Terindeks Google?

    cyberx1408, Apr 5, 2019, in forum: HTML & Website Design
    Replies:
    11
    Views:
    7,009
    khezo
    Apr 12, 2019
  5. KangAndre

    Perlukah Membuat Halaman AMP ?

    KangAndre, Feb 11, 2019, in forum: HTML & Website Design
    Replies:
    49
    Views:
    41,007
    Yandiahmadgandasaputra
    Sep 16, 2020

Share This Page