HTML table Tag

Tutorial HTML <table>

Element HTML <table> mendefinisikan table HTML, element ini digunakan sebagai element yang mewakili Data Tabular, yang berisi informasi data yang terdiri dari kolom dan baris.

Contoh HTML <table>

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td>
      <td>12Tahun</td>
    </tr>
  </tbody>
</table>

Attribute HTML <table>

align Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan keselarasan atau posisi

Contoh :

<table align="right">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah left, center, right

bgcolor Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan warna Background pada table

Contoh :

<table bgcolor="bisque">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah Kode Warna

border Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan border pada element table

Contoh :

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah Angka

cellpadding Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan ketebalan dinding cell pada table

Contoh :

<table cellpadding="12">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah Angka

cellspacing Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan jarak ruang antar cell pada table

Contoh :

<table cellspacing="12">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah Angka

frame Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan bagaimana bingkai pada sisi table harus ditampilkan

Contoh :

<table frame="above">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah above, below, border, box, hsides, lhs, rhs, void, vsides

rules Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan bagian garis mana yang harus ditampilkan untuk bagian dalam table

Contoh :

<table rules="all">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah all, cols, groups, none, rows

summary Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan ringkasan atau rangkuman element table

Contoh :

<table summary="Data Lomba Lukis Tingkat Nasional">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12 Tahun</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>13 Tahun</td>
  </tr>  
  <tr>
    <td>Doni</td>
    <td>11 Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah Teks

width Attribute ini tidak support pada HTML 5

Attribute ini digunakan untuk menentukan lebar dari element table

Contoh :

<table width="200">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

<table width="250px">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

<table width="100%">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>12Tahun</td>
  </tr>
</table>

Nilai atau value attribute ini adalah Angka

Global Attributes:

Element <table> mencakup Global Attributes HTML.

Event Attributes:

Element <table> mencakup Event Attributes HTML.

Browser Support HTML <table>

Desktop

Element	Chrome	Safari	Firefox	Opera	IE	Edge
<table>	1	Ya	1	Ya	Ya	Ya

Mobile

Element	Android webview	Chrome Android	Edge mobile	Firefox Android	IE mobile	Opera Android	iOS Safari
<table>	1	1	Ya	4	Ya	Ya	Ya

Default CSS :

Browser yang support dengan element <table>, mempunyai nilai default :

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}