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>).

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

<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
Demo dengan Source Code Editor

Demo Editor
Demo HTML <table>
Code Editor
  Contoh Lainnya

Contoh lainnya yang berkaitan, untuk memperkaya materi yang disampaikan.

Contoh 3

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

<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>
/* 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;
}
Juara Lomba Bulu Tangkis Antar Kelas IX
Hadiah

Juara 1 mendapatkan Uang Pembinaan sebesar Rp. 3.000.000, Juara 2 sebesar Rp. 2.000.000 dan Juara 3 sebesar Rp. 1.000.000.

No. Kelas Juara
1. Kelas IX A Juara 1
2. Kelas IX C Juara 2
3. Kelas IX B Juara 3

Contoh 4

Contoh HTML table yang ditulis di dalam element <figure>

<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>
/* 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;
}
Juara Kelas Tahun Ajaran 2015-2016 Kelas VIII

Ranking 1-3 masing-masing mendapatkan uang saku sebesar Rp. 500.000.

No. Nama Nilai Rata-Rata Ranking
1. Suntiyem 9.5 Ranking 1
2. Markonah 9.0 Ranking 2
3. Sarboah 8.5 Ranking 3

Contoh 5

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

<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>
/* 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;
}
Nilai Ulangan Harian Siswa
No. Nama Nilai Jumlah
Matematika Biologi Fisika
1 Bevi 9 7 8 24
2 Fika 8 7 8 23