Membuat Tabel dengan HTML

Tabel Konten
  1. Lihat Semua Demo 
  2. Kerangka Tabel Paling Sederhana 
  3. Header Tabel 
  4. Menambahkan Border 
  5. Caption/Judul Tabel 
  6. Menggabungkan Sel-Sel Tabel (Merge Cell) 
  7. Mengubah Tampilan Tabel dengan CSS 
  8. Markup HTML Standar 
  9. Footer Tabel 
  10. Catatan Tambahan 

Tutorial ini akan menjelaskan langkah-langkah singkat mengenai cara membuat tabel dengan HTML. Anda akan diberi beberapa penjelasan mengenai kerangka HTML tabel dari yang paling sederhana hingga menuju langkah-langkah modifikasi tampilan.

Lihat Semua Demo 

Lihat demo-demo tabelnya terlebih dahulu:

Lihat Demo

Kerangka Tabel Paling Sederhana 

Sebuah tabel sederhana terdiri dari elemen <table> yang diisi dengan beberapa <tr>, dimana setiap <tr> akan berisi beberapa <td>. <table> adalah table, <tr> adalah table row dan <td> adalah table data:

<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Header Tabel 

Header tabel terbentuk dari elemen <th> (table header). Secara normal, tampilan teks di dalam header tabel akan secara otomatis bercetak tebal dan tersusun rata tengah:

<table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Menambahkan Border 

tambahkan atribut border dengan nilai bukan 0 untuk menampilkan border pada tabel:

<table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Atribut ini sebenarnya tidak begitu penting, karena akan lebih efektif jika kita menggunakan untuk mengeset border pada tabel.

Caption/Judul Tabel 

Tambahkan elemen <caption> tepat setelah kode <table> sebagai judul tabel:

<table>
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Menggabungkan Sel-Sel Tabel (Merge Cell

Ada dua atribut yang bisa Anda gunakan, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan:

<table>
    <caption>Judul Tabel</caption>
    <tr><th colspan="2">Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Catatan: Karena sel tabel mendapatkan atribut colspan="2", maka dua buah posisi sel akan digabungkan. Jadi, sel di sebelahnya harus dibuang. Ini berlaku juga untuk rowspan, hanya saja penggabungannya secara vertikal:

<table>
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td rowspan="2">1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Mengubah Tampilan Tabel dengan CSS 

Diutamakan untuk border, CSS akan membuat tampilan border pada tabel menjadi lebih baik dan lebih bisa dikendalikan:

table, th, td {
  border:1px solid purple;
}

Namun, karena border tabel secara normal tampak terpisah, kita harus mendeklarasikan border-collapse:collapse untuk merapatkan mereka:

table, th, td {
  border:1px solid purple;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

Setelah itu Anda bisa menentukan width, padding, background, font, color dan lain-lain. Beberapa properti CSS seperti vertical-align dan text-align juga nantinya akan dibutuhkan:

table {
  width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

table caption {
  padding:.4em 0;
  font-style:italic;
  font-weight:bold;
  text-align:left;
  border-top:2px solid black;
}

table, th, td {
  border:1px solid black;
}

th, td {
  padding:1em 1.4em;
  vertical-align:top; /* membuat semua konten tabel menjadi rata atas */
  text-align:left; /* membuat semua teks di dalam tabel menjadi rata kiri */
}

th {
  background-color:#080;
  color:white;
}

Markup HTML Standar 

Markup HTML tabel standar secara garis besar dapat disusun seperti ini:

<table summary="Tabel ini menjelaskan tentang perkembangan kelangsungan hidup umat manusia di tahun 2013">
    <caption>Tabel Kelangsungan Hidup Manusia</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Setiap kelompok baris yang mengandung elemen <th> akan dibungkus kembali dengan elemen <thead> sementara kelompok baris yang mengandung elemen <td> akan dibungkus dengan elemen <tbody>

Footer Tabel 

Anehnya, footer tabel harus diletakkan di sebelah atas, lebih tepatnya sebelum <tbody>. Tapi jangan khawatir, karena hasil akhirnya nanti akan tetap tampil di bagian paling bawah:

<table>
    <caption>Judul Tabel</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tfoot>
        <tr><td>Total</td><td>XXX</td><td>YYY</td></tr>
    </tfoot>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Berikut ini adalah salah satu uraian mengenai elemen <tfoot> dari W3:

TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.

Catatan Tambahan 

Lawan border-collapse:collapse adalah border-collapse:separate

Tidak semua tabel harus dilengkapi dengan border. Lebih baik set deklarasi border hanya untuk elemen tabel yang memiliki atribut border="1":

table[border=1] {
  border-collapse:collapse;
  background-color:white;
}

table[border=1] th,
table[border=1] td {
  border:1px solid black;
  padding:1em 1.4em;
}

Dulu Saya pernah sekali mencatat beberapa kode CSS untuk HTML tabel. Anda bisa membacanya di sini. Mungkin itu akan berguna sebagai referensi tambahan.

11 Komentar

  • Beben Koben

    memang merepotkan kalo bermain dgn var. tabel...suka lopa nutup tag dan kekurangan :D

  • Ən Yeni Mahnı Sözləri 2

    mas, kenapa table nya ada efek ke widget saya, ada border yang keluar di widget nya

    • Taufik Nurrohman

      Seperti yang Saya tuliskan di dalam catatan tambahan, tidak semua tabel harus dilengkapi dengan border, jadi targetkan pada tabel yang memiliki atribut border="1" saja:

      table[border=1] {border-collapse:collapse}
      table[border=1] th,
      table[border=1] td {border:1px solid}

      Atau, kalau ingin lebih spesifik lagi, bisa juga memakai kelas (seperti Saya):

      table.bordered {border-collapse:collapse}
      table.bordered th,
      table.bordered td {border:1px solid}
      <table class="bordered"> ... </table>
  • Unknown

    Kang, mau tanya.. kalau mau buat post dengan gambar,( tapi ga setiap pos).. dan gambar tersebut biar bisa sejajar antara jarak atas dan samping bagaimana..
    dan skalian jika bisa meskipun ukuran gambar berbeda biar biosa otomatis kecil dengan ukuran yang sama. saya sudah coba cuman tiap td saya kasing pading.. jadi kodenya panjang banget.. barang kali ada cara yang lebih mudah/pendek.. makasih kang

    • Taufik Nurrohman

      Mungkin memakai tinggi dan lebar 100%:

      img.full-size {
      width:100%;
      height:100%;
      }
      ...
      <tr>
      <td><img class="full-size" src="..."></td>
      </tr>
      ...
  • Anonim

    Nice,, sangat membantu...

  • Anonim

    membuat blog saya tampak lebih baik..

  • Unknown

    mau bertanya.. bagaimana cara nya agar saya bisa mengedit isi dari tabel tersebut di postingan saja,tidak harus edit manual melalu Entri manuall... mungkin bsa di cek di http://www.palmed.tk/p/blog-page.html

  • Anonim

    Ilmu yang bermanfaat dan berguna sekali bagi saya, pada blog yang saya punya belum ada satupun yang berupa tabel..
    terima kasih banyak min... izin kodenya dipakai...
    Sukses selalu min...

  • Unknown

    Thanks Infonya Gan...

    Bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html

Komentar telah ditutup.