Referensi Belajar HTML table tag. Tutorial dan panduan mengenai element <table>...</table> yang digunakan untuk membuat tabel atau data tabular. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <table>.


Deskripsi
Penjelasan HTML table

Tabel (Table) adalah sebuah data tabular dalam bentuk grid yang terdiri dari kolom (column), baris (row) dan celll yang merupakan pertemuan antara kolom dan baris.

HTML <table> element merepresentasikan data dengan lebih dari satu dimensi dalam bentuk sebuah tabel (table).

Table di dalam HTML dibentuk dengan sebuah baris (row), tepatnya menggunakan element <tr> yang merupakan kepanjangan dari table row. Adapun element pendukung lain yang membentuk sebuah table adalah <th> (table header) dan <td> (table data). <td> menunjukkan sebuah cell, sedangkan <th> menunjukkan cell induk dan ditandai dengan tulisan cetak tebal.

Element lain yang berkaitan dan digunakan dalam sebuah HTML table adalah <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>.

TIPS

HTML table tidak boleh digunakan untuk layout halaman atau tidak tepat digunakan untuk mendesain tata letak beberapa element dalam sebuah tabel.

Attributes
Atribut HTML Tag <table>

sortable

Digunakan sebagai antarmuka untuk memberi kemampuan menyortir (memilih-milih) table.

Attribute lain yang sudah tidak didukung oleh HTML5 tidak dibahas disini.


Global Attributes
Atribut Secara Global (Keseluruhan)

<table> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<table> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <table>

Contoh 1

Contoh HTML table sederhana yang dibentuk dengan baris (<tr>) dan cell (<td>).

HTML
<table>
  <tr>
    <td>No.</td>
    <td>Nama</td>
    <td>Tempat Lahir</td>
  </tr>
  <tr>
    <td>1.</td>
    <td>Rodiah</td>
    <td>Serang</td>
  </tr>
</table>

Contoh 2

Contoh HTML table dengan tambahan element <thead<, <tfoot>, dan <tbody>.

HTML
<table class="table2">
  <thead>
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Infak</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Total</th>
      <th>80.000</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1.</td>
      <td>Rodiah</td>
      <td>50.000</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>Inayah</td>
      <td>30.000</td>
    </tr>
  </tbody>
</table>

Harap diperhatikan: <tfoot> ditulis setelah <thead> (ditengah-tengah), bukannya setelah <tbody> (terakhir). Meskipun demikian, <tfoot> akan terlihat pada baris akhir tabel secara visual.

Untuk mempercantik table, CSS style mungkin diperlukan seperti ini:

/* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}

Untuk Contoh 1 dan Contoh 2, dapat diedit dan dilihat hasilnya pada Demo Editor dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML table tag - by apacara.com</title>
    <style>
      /* style untuk contoh 2 */
      .table2 {
      	border-collapse: collapse;
      	width: 100%;
      }
      .table2 td, .table2 th {
      	border: thin solid #ccc;
      	padding: .2em;
      }
    </style>
  </head>
  <body>
    <h3>Contoh 1:</h3>
    <table>
      <tr>
        <td>No.</td>
        <td>Nama</td>
        <td>Tempat Lahir</td>
      </tr>
      <tr>
        <td>1.</td>
        <td>Rodiah</td>
        <td>Serang</td>
      </tr>
    </table>


    <br />
    <h3>Contoh 2:</h3>

    <table class="table2">
      <thead>
        <tr>
          <th>No.</th>
          <th>Nama</th>
          <th>Infak</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th></th>
          <th>Total</th>
          <th>80.000</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>1.</td>
          <td>Rodiah</td>
          <td>50.000</td>
        </tr>
        <tr>
          <td>2.</td>
          <td>Inayah</td>
          <td>30.000</td>
        </tr>
      </tbody>
    </table>

    <br/>
    <p>Pada Contoh 1, table tidak diberi CSS style apapun, sedangkan Contoh 2 diberi sedikit CSS style sehingga terlihat kotak-kotak seperti tabel pada umumnya.</p>
  </body>
</html>

Contoh Lainnya

Contoh lainnya yang berkaitan, untuk memperkaya materi yang disampaikan dapat dilihat dibawah ini:

Contoh 3

Contoh HTML table element dengan tambahan <caption>, <detail> dan <summary>

HTML
<table id="table3">
  <caption>
    <strong>Juara Lomba Bulu Tangkis Antar Kelas IX</strong>
    <details>
      <summary>Hadiah</summary>
      <p><strong>Juara 1</strong> mendapatkan Uang Pembinaan sebesar <strong>Rp. 3.000.000</strong>, <strong>Juara 2</strong> sebesar <strong>Rp. 2.000.000</strong> dan <strong>Juara 3</strong> sebesar <strong>Rp. 1.000.000</strong>.</p>
    </details>
  </caption>
  <thead>
    <tr>
      <th>No.</th>
      <th>Kelas</th>
      <th>Juara</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.</td>
      <td>Kelas IX A</td>
      <th>Juara 1</th>
    </tr>
    <tr>
      <td>2.</td>
      <td>Kelas IX C</td>
      <th>Juara 2</th>
    </tr>
    <tr>
      <td>3.</td>
      <td>Kelas IX B</td>
      <th>Juara 3</th>
    </tr>
  </tbody>
</table>
CSS
/* style untuk contoh 3 */
table#table3 {
border-collapse: collapse;
width: 100%;
}
table#table3 td, table#table3 th {
border: thin solid #ccc;
padding: .2em;
}
table#table3 thead tr th:first-child {
width: 40px;
}

Contoh 4

Contoh HTML table yang ditulis di dalam element <figure>

HTML
<figure>
  <figcaption>Juara Kelas Tahun Ajaran 2015-2016 Kelas VIII</figcaption>
      <p>Ranking 1-3 masing-masing mendapatkan uang saku sebesar Rp. 500.000.</p>
  <table id="table4">
    <thead>
      <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Nilai Rata-Rata</th>
        <th>Ranking</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>Suntiyem</td>
        <td>9.5</td>
        <th>Ranking 1</th>
      </tr>
      <tr>
        <td>2.</td>
        <td>Markonah</td>
        <td>9.0</td>
        <th>Ranking 2</th>
      </tr>
      <tr>
        <td>3.</td>
        <td>Sarboah</td>
        <td>8.5</td>
        <th>Ranking 3</th>
      </tr>
    </tbody>
  </table>
</figure>
CSS
/* style untuk contoh 4 */
table#table4 {
border-collapse: collapse;
width: 100%;
}
table#table4 td, table#table4 th {
border: thin solid #ccc;
padding: .2em;
}
figure figcaption {
text-align: center;
font-weight: bold;
}

Contoh 5

Contoh HTML table dengan colspan dan rowspan attribute di dalam <th> element serta penempatan <caption> yang berada dibawah table menggunakan CSS.

HTML
<table id="table5">
  <caption>Nilai Ulangan Harian Siswa</caption>
  <tr>
    <th rowspan="2">No.</th>
    <th rowspan="2">Nama</th>
    <th colspan="3">Nilai</th>
    <th rowspan="2">Jumlah</th>
  </tr>
  <tr>
    <td>Matematika</td>
    <td>Biologi</td>
    <td>Fisika</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Bevi</td>
    <td>9</td>
    <td>7</td>
    <td>8</td>
    <th>24</th>
  </tr>
  <tr>
    <td>2</td>
    <td>Fika</td>
    <td>8</td>
    <td>7</td>
    <td>8</td>
    <th>23</th>
  </tr>
</table>
CSS
/* style untuk contoh 5 */
table#table5 {
border-collapse: collapse;
}
/* judul (caption) diletakkan dibawah tabel */
table#table5 caption {
caption-side: bottom;
}
table#table5 td, table#table5 th {
border: thin solid #ccc;
padding: .3em 1em;
}