Tabel HTML: Membuat Tabel HTML Pertama Anda

Penjelasan Singkat Mengenai Tabel HTML

  • Sebuah tabel pada HTML didefinisikan menggunakan tag <table> , dan mengandung table cells<td>, singkatan dari “table data” ) yang berada di dalam tag table rows ( <tr>). Kode HTML untuk tabel adalah selalu berdasarkan baris terlebih dahulu, bukan kolom.
  • Table cells yang berada di baris paling atas atau header row ditulis menggunakan tag <th> (table header).
  • Table cells dapat digabung (merge) menggunakan tag colspan dan rowspan.
  • Tabel dapat dibagi menjadi tiga bagian sebagai berikut :
    • <thead> — Table header
    • <tbody> — Table body
    • <tfoot> — Table footer
  • Sebuah caption dapat ditambahkan ke dalam sebuah tabel menggunakan tag <caption>.
  • Anda dapat menggunakan <col> dan <colgroup> untuk membuat kolom tabel untuk keperluan desain.
  1. Contoh Tabel Sederhana

    Ini adalah sebuah contoh tabel HTML yang sangat sederhana. Copy kode ini di editor Anda, lalu jalankan di browser. Jika anda belum memiliki editor untuk pemrograman, silahkan cek post saya tentang Top 5 PHP Editor (IDE) untuk Pemrograman Web.

    <table>
    	<tr>
    		<th>Name</th>
    		<th>Favorite Color</th>
    	</tr>
    	<tr>
    		<td>Bob</td>
    		<td>Yellow</td>
    	</tr>
    	<tr>
    		<td>Michelle</td>
    		<td>Purple</td>
    	</tr>
    </table>

  2. Contoh Tabel HTML Kompleks

    <table>
      <caption>A complex table</caption>
      <thead>
        <tr>
          <th colspan="3">Invoice #123456789</th>
          <th>14 January 2025
        
        </tr>
        <tr>
          <td colspan="2"><strong>Pay to:</strong><br> Acme Billing Co.<br> 123
            Main St.<br> Cityville, NA 12345</td>
          <td colspan="2"><strong>Customer:</strong><br> John Smith<br> 321
            Willow Way<br> Southeast Northwestershire, MA 54321</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Name / Description</th>
          <th>Qty.</th>
          <th>@</th>
          <th>Cost</th>
        </tr>
        <tr>
          <td>Paperclips</td>
          <td>1000</td>
          <td>0.01</td>
          <td>10.00</td>
        </tr>
        <tr>
          <td>Staples (box)</td>
          <td>100</td>
          <td>1.00</td>
          <td>100.00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3">Subtotal</th>
          <td>110.00</td>
        </tr>
        <tr>
          <th colspan="2">Tax</th>
          <td>8%</td>
          <td>8.80</td>
        </tr>
        <tr>
          <th colspan="3">Grand Total</th>
          <td>$ 118.80</td>
        </tr>
      </tfoot>
    </table>

Yang Dapat Kita Kembangkan Dengan Tabel HTML

Bootstrap adalah sebuah template CSS untuk membuat tabel HTML anda memiliki tampilan yang lebih baik. Hanya dengan memuatnya di halaman HTML Anda menggunakan tag <link>, Anda tinggal menggunakannya menggunakan class yang telah disediakan oleh Bootstrap. Contohnya, Anda dapat dengan mudah mengganti warna tabel, membuat warna selang seling pada baris tabel, membuat tabel tanpa garis dengan desain yang elegan, baris tabel yang dapat menyala ketika kursor melewatinya, dan masih banyak lagi. Coba sendiri kode Bootstrap Anda dengan membaca documentation tentang Bootstrap Table di sini.

Tabel yang ada pada halaman ini juga masih merupakan tabel statik, artinya datanya langsung diketikkan pada kode program. Ketika membuat tabel di sebuah website, pada umumnya kita memerlukan data yang dinamis, misalnya kita ambil data tersebut dari sebuah database. Pada postingan selanjutnya akan saya jelaskan bagaimana membuat tabel yang dinamis menggunakan PHP dan HTML.

2.366 comments

  1. Check This Out

    I like what you guys are up also. Such smart work and reporting! Carry on the excellent works guys I’ve incorporated you guys to my blogroll. I think it will improve the value of my website 🙂

  2. 부산출장

    Can I just say what a comfort to find an individual who actually knows what they are discussing on the web. You certainly realize how to bring an issue to light and make it important. More people really need to check this out and understand this side of your story. I was surprised you are not more popular because you surely have the gift.

  3. Visit Website

    We are a gaggle of volunteers and opening a brand new scheme in our community. Your web site offered us with useful information to paintings on. You have performed an impressive task and our whole community will probably be thankful to you.

  4. Get More Info

    Thank you for the good writeup. It if truth be told was once a enjoyment account it. Glance complicated to far delivered agreeable from you! By the way, how could we keep in touch?

  5. 부산출장

    Greetings! Very useful advice in this particular post! It is the little changes that will make the greatest changes. Thanks a lot for sharing!

  6. 해운대고구려

    After looking into a handful of the articles on your web page, I really appreciate your technique of writing a blog. I bookmarked it to my bookmark site list and will be checking back soon. Please visit my website too and tell me what you think.

  7. parkiety z calego swiata

    Great beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog web site? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

  8. Url

    Excellent blog! Do you have any tips and hints for aspiring writers? I’m planning to start my own blog soon but I’m a little lost on everything. Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally confused .. Any suggestions? Cheers!

  9. 부산출장

    This site was… how do you say it? Relevant!! Finally I’ve found something that helped me. Thanks!

  10. studnie glebinowe bielsko

    I think this is one of the most important information for me. And i am glad reading your article. But want to remark on some general things, The site style is great, the articles is really nice : D. Good job, cheers

  11. Catering dietetyczny Warszawa

    I’ve been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the net will be much more useful than ever before.

  12. 먹튀검증업체

    Aw, this was a very good post. Finding the time and actual effort to make a very good articleÖ but what can I sayÖ I hesitate a whole lot and never seem to get nearly anything done.

  13. 먹튀검증

    You’re so awesome! I do not suppose I’ve read through anything like this before. So good to find somebody with some original thoughts on this topic. Seriously.. many thanks for starting this up. This website is one thing that’s needed on the web, someone with some originality!

  14. Catering dietetyczny Warszawa

    I have been browsing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all web owners and bloggers made good content as you did, the net will be a lot more useful than ever before.

  15. windows 7 original price

    It is really a nice and helpful piece of info. I am glad that you shared this useful information with us. Please keep us up to date like this. Thanks for sharing.

  16. buy cheap windows 7 product key

    I think this is among the so much significant info for me. And i’m glad studying your article. However should remark on some normal things, The website taste is ideal, the articles is really excellent : D. Excellent process, cheers

  17. Visit

    You can definitely see your skills in the work you write. The world hopes for even more passionate writers like you who are not afraid to say how they believe. Always follow your heart.

  18. Catering dietetyczny Warszawa

    Pretty section of content. I just stumbled upon your site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently fast.

  19. buy windows 7 product key

    Oh my goodness! an amazing article dude. Thanks However I am experiencing difficulty with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting identical rss drawback? Anybody who knows kindly respond. Thnkx

  20. okna katowice

    My brother recommended I might like this web site. He was totally right. This post truly made my day. You cann’t imagine simply how much time I had spent for this information! Thanks!

  21. windows 7 product key price

    I do enjoy the manner in which you have framed this particular issue and it does supply us some fodder for thought. Nevertheless, because of everything that I have witnessed, I only wish when the actual comments stack on that folks keep on point and don’t embark on a soap box involving the news du jour. Anyway, thank you for this exceptional point and whilst I can not necessarily go along with it in totality, I regard your point of view.

  22. buy windows 7 32 bit

    My brother recommended I might like this blog. He was entirely right. This publish actually made my day. You can not believe simply how so much time I had spent for this info! Thanks!

  23. blog kulinarny

    I?m not sure where you are getting your info, but good topic. I needs to spend some time learning more or understanding more. Thanks for magnificent info I was looking for this info for my mission.

  24. 대구출장

    Hi, I do think your site could possibly be having internet browser compatibility issues. Whenever I take a look at your web site in Safari, it looks fine however, if opening in I.E., it has some overlapping issues. I just wanted to give you a quick heads up! Apart from that, great site!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *