tRikSonic
Tema
  • Original
  • Translate
/ / HTML table Tag

HTML table Tag

Terakhir diperbarui : 22 Mei 2018 - 07.48
/ / 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.
html table

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
    border: 1px solid silver;
}
</style>
</head>
<body>

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

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
    border: 1px solid silver;
}
</style>
</head>
<body>

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

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
    border: 1px solid silver;
}
</style>
</head>
<body>

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

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
    border: 1px solid silver;
}
</style>
</head>
<body>

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

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
code {
   color : blue;
}
</style>
</head>
<body>

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

<p>
  silahkan ganti value dengan data berikut
  untuk melihat fungsinya.
</p>

<ul>
  <li><code>above</code></li>
  <li><code>below</code></li>
  <li><code>border</code></li>
  <li><code>box</code></li>
  <li><code>hsides</code></li>
  <li><code>lhs</code></li>
  <li><code>rhs</code></li>
  <li><code>void</code></li>
  <li><code>vsides</code></li>
</ul>

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
code {
   color : blue;
}
</style>
</head>
<body>

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

<p>
  silahkan ganti value dengan data berikut
  untuk melihat fungsinya.
</p>

<ul>
  <li><code>all</code></li>
  <li><code>cols</code></li>
  <li><code>groups</code></li>
  <li><code>none</code></li>
  <li><code>rows</code></li>
</ul>

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
   border : 1px solid silver;
}
</style>
</head>
<body>

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

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
table, th, td {
   border : 1px solid silver;
}
</style>
</head>
<body>

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

</body>
</html>
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
ElementChromeSafariFirefoxOperaIEEdge
<table>1Ya1YaYaYa
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<table>11Ya4YaYaYa

Default CSS :

Browser yang support dengan element <table>, mempunyai nilai default :
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.