Tanda <table> HTML

Definisi dan penggunaan

<table> Label menentukan tabel HTML.

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

Tabel HTML dapat mengandung elemen berikut:

Lihat pula:

Pelajaran HTML:Tabel HTML

Referensi DOM HTML:Objek Tabel

Pelajaran CSS:Pengaturan gaya tabel

Contoh

Contoh 1

Sebuah tabel HTML sederhana, berisi dua kolom dan dua baris:

<table>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba Sendiri

Contoh 2

Bagaimana untuk menambah bingkai yang digabungkan ke tabel (menggunakan CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Coba Sendiri

Contoh 3

Bagaimana untuk menengahkan kanan tabel (menggunakan CSS):

<table style="float:right">
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 4

Bagaimana untuk menengahkan tabel (menggunakan 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>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 5

Bagaimana untuk menambah warna latar belakang tabel (menggunakan CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 6

Bagaimana untuk menambah jarak antar baris tabel (menggunakan CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Coba Sendiri

Contoh 7

Bagaimana untuk mengatur lebar tabel (menggunakan CSS):

<table style="width:400px">
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 8

Bagaimana untuk membuat judul tabel:

<table>
  <tr>
    <th>Nama</th>
    <th>Email</th>
    <th>Telepon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Coba Sendiri

Contoh 9

Bagaimana untuk membuat tabel dengan judul:

<table>
  <caption>Tabungan Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba Sendiri

Contoh 10

Bagaimana untuk mendefinisikan sel tabel yang melintasi baris dan kolom berbeda:

<table>
  <tr>
    <th>Nama</th>
    <th>Email</th>
    <th colspan="2">Telepon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Coba Sendiri

Atribut Global

<table> Tanda ini juga mendukung Atribut Global HTML.

Atribut Acara

<table> Tanda ini juga mendukung Atribut Acara di HTML.

Pengaturan CSS Baku

Sebagian besar peramban akan menampilkan nilai baku berikut ini <table> Elemen:

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

Coba Sendiri

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan