Tag <tabel> HTML


Contoh

Tabel HTML sederhana, berisi dua kolom dan dua baris:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Lebih banyak contoh "Coba Sendiri" di bawah ini.


Definisi dan Penggunaan

Tag <table>mendefinisikan tabel HTML.

Sebuah tabel HTML terdiri dari satu <table>elemen dan satu atau lebih elemen <tr> , <th> , dan <td> .

Elemen <tr> mendefinisikan baris tabel, elemen <th> mendefinisikan header tabel, dan elemen <td> mendefinisikan sel tabel.

Tabel HTML juga dapat menyertakan elemen <caption> , <colgroup> , <thead > , <tfoot> , dan <tbody> .


Dukungan Peramban

Element
<table> Yes Yes Yes Yes Yes

Atribut Global

Tag <table>juga mendukung Atribut Global dalam HTML .


Atribut Acara

Tag <table>juga mendukung Atribut Peristiwa dalam HTML .



Lebih Banyak Contoh

Contoh

Cara menambahkan batas yang diciutkan ke tabel (dengan CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Contoh

Cara menyelaraskan tabel (dengan CSS):

<table style="float:right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Contoh

Cara menyelaraskan tengah tabel (dengan CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<table class="center">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Contoh

Cara menambahkan warna latar belakang ke tabel (dengan CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Contoh

Cara menambahkan padding ke tabel (dengan CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Contoh

Cara mengatur lebar tabel (dengan CSS):

<table style="width:400px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Contoh

Cara membuat header tabel:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table>

Contoh

Cara membuat tabel dengan keterangan:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Contoh

Cara menentukan sel tabel yang menjangkau lebih dari satu baris atau satu kolom:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>

Halaman Terkait

Tutorial HTML: Tabel HTML

Referensi DOM HTML: Objek Tabel

Tutorial CSS: Menata Tabel


Pengaturan CSS Default

Sebagian besar browser akan menampilkan <table>elemen dengan nilai default berikut:

Contoh

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