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.

3.988 comments

  1. Joane Dragun

    Hi! That is my first pay a visit to to the website! We’ve been a group of volunteers and commencing a completely new initiative inside of a community in the same specialized niche. Your site provided us valuable information to work on. You may have performed An impressive position.

  2. Arthurgains

    pornhub sex games
    [url=”https://sexgameszone.com/?”]sex games gamejolt[/url]
    body paint sex games

  3. uJ1oH0yU1T6

    I love what you guys are usually up too. This sort of clever work and exposure!
    Keep up the great works guys I’ve included you guys to my own blogroll.

  4. Robert Zoost Kelowna

    Hola! I’ve been following your web site for a long time now and finally got
    the courage to go ahead and give you a shout
    out from Kingwood Tx! Just wanted to mention keep up the good job!

  5. kids lampshades uk

    Highly energetic post, I liked that a lot.

    Will there be a part 2?

  6. commercial realtors kelowna

    Thank you for every other informative website. Where else may
    I get that kind of information written in such an ideal approach?
    I’ve a mission that I’m just now working on, and I have been at the glance
    out for such info.

  7. 비트코인카지노

    I always emailed this website post page to all my
    contacts, for the reason that if like to read it afterward my links will too.

  8. drugs

    If some one wishes to be updated with hottest technologies afterward he must be visit this website and be up to date every day.

    Feel free to surf to my website … drugs

  9. Edward Magwood

    Hiya, I’m really glad I have found this information. Nowadays bloggers publish just about gossip and net stuff and this is really annoying. A good website with interesting content, that is what I need. Thank you for making this website, and I’ll be visiting again. Do you do newsletters by email?

Tinggalkan Balasan

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