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.584 comments

  1. desinpros ultra bula

    Contudo, em caso de diagnóstico tardio, quando
    o cancer já se disseminou para regiões distantes (metástases), a
    taxa de sobrevida em cinco anos é de somente 30%.

  2. fitoterapicos para emagrecer Vivri

    gostei muito a forma com que seu blog trata o assunto
    . Voce abordou pontos que realmente podem fazer a diferença.

    Muito bom!

  3. plastica peniana Viveecosse

    Olá ! Este é meu 1º comentario aqui, então eu só queria dar um alô
    rápido e contar que eu realmente curto
    acompanhar seus posts . Você pode recomendar algum outro blog/site/fórum que fale os mesmos assuntos ?

    Muito obrigada .

  4. Re ViVium

    I was recommended this website through my cousin. I am now not positive whether or not this submit
    is written via him as nobody else realize such unique approximately my difficulty.
    You are incredible! Thanks!

    Feel free to surf to my webpage … Re ViVium

  5. Jimmy

    I am regular visitor, how are you everybody?

    This article posted at this web page is in fact pleasant.

  6. Jim

    Good day! Would you mind if I share your blog with
    my facebook group? There’s a lot of people that I think would really enjoy your content.
    Please let me know. Many thanks

    Look into my web-site – Jim

  7. judi sabung ayam online

    We’re a group of volunteers and opening a new scheme in our community.
    Your site provided us with valuable info to work on. You’ve done a
    formidable job and our whole community will be grateful to you.

  8. 서울마사지

    Do you have a spam issue on this site; I also am a blogger, and I was wanting to know your situation; many of us
    have developed some nice procedures and we are looking to trade strategies
    with other folks, why not shoot me an email if interested.

  9. browse this site

    I don’t knoԝ whether it’s just me or if everybody else experiencing probleems with your website.
    It appears likе some of the written text oon your pⲟsts are
    running off the screen. Can somebody else please provide fеedback and let me know if this is happening
    to them too? Tһis might be a problem witһ my broqѕer because I’ve had this happen previously.
    Thank you

    Fеel free to surf to my web site … browse this site

  10. check these guys out

    Wonderful ѡeb site. Lots of usefᥙl information here.

    I’m sending it to several pals ans also sharing in deⅼicious.
    And of coᥙrse, thanks on youг effort!

    Stop byy mmy web-site check these guys out

  11. www.hotel-bookmarkings.win

    I’ve Ƅeen exploring for a liuttle bit for any hiցh
    quality articleѕ or weblog posts in this ssort of house .

    Exploring in Yahoo I finally stumbled upon this website.
    Stuⅾyіng this info So i am happy to show that I’ve a very excellent uncanny feeling I found out exactly what I needed.

    I such a lot indubitbly wіll make sure to don?t fail to rememЬer this web ѕite and provides it a
    ⅼook regularⅼy.

    Stop by my page: aplikasi akuntansi kontraktor (http://www.hotel-bookmarkings.win)

Tinggalkan Balasan

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