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.

4.129 comments

  1. meo chup anh san pham

    Quang cao, gioi thieu san pham den voi khach hang khong the thieu duoc viec cung cap hinh anh. Boi hinh anh luon la linh hon cua quang cao, va mot hinh anh san pham dep, sinh dong se la cach tao an tuong tot nhat, de nho nhat de khach hang biet toi san pham cua don vi.

  2. Stanley Jobb

    Many thanks! It is an astounding web-site!|

  3. meo chup anh san pham dep

    Dac thu cua viec chup san pham la so luong lon va le te trong ca 1 khoang thoi gian dai. Mot NAG chuyen nghiep dam bao hinh anh thong nhat tu goc chup, anh sang, hau ky….cua tat ca cac lan chup deu giong nhau. No dan toi viec cac hinh anh nay khi dat canh nhau tren website ban hang nhin rat chuyen nghiep, sach se, gon gang va tao duoc an tuong.

  4. Bradley Halcon

    After going over a handful of the blog articles on your blog, I honestly appreciate your way of blogging. I saved as a favorite it to my bookmark webpage list and will be checking back in the near future. Please check out my website as well and let me know how you feel.

  5. chup anh san pham giay

    Dac thu cua viec chup san pham la so luong lon va le te trong ca 1 khoang thoi gian dai. Mot NAG chuyen nghiep dam bao hinh anh thong nhat tu goc chup, anh sang, hau ky….cua tat ca cac lan chup deu giong nhau. No dan toi viec cac hinh anh nay khi dat canh nhau tren website ban hang nhin rat chuyen nghiep, sach se, gon gang va tao duoc an tuong.

  6. Lamar Templeton

    It’s difficult to find educated people on this subject, however, you sound like you know what you’re talking about! Thanks

  7. Hildegarde Vanhee

    I couldn’t refrain from commenting. Exceptionally well written!

  8. Grass grids

    This is the right blog for anyone who wants to find out about this topic. You realize so much its almost hard to argue with you (not that I actually would want?HaHa). You definitely put a new spin on a topic thats been written about for years. Great stuff, just great!

  9. Marta Beeckman

    I absolutely love your website.. Very nice colors & theme. Did you build this amazing site yourself? Please reply back as I’m attempting to create my own blog and would love to learn where you got this from or exactly what the theme is called. Cheers!

Tinggalkan Balasan

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