Home » HTML » Tabel di HTML: Cara Membuat dan Contoh Sintaknya

Tabel di HTML: Cara Membuat dan Contoh Sintaknya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I
by Hanifah Nurbaeti
by Hanifah Nurbaeti

Tabel di HTML bisa digunakan untuk mengelompokkan data lebih terstruktur yang terdiri baris dan kolom.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Perusahaan</th>
    <th>Kontak</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Medina.ltd</td>
    <td>Maria</td>
    <td>Jerman</td>
  </tr>
  <tr>
    <td>CT Crop</td>
    <td>Chairul Tanjung</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Net TV</td>
    <td>Edo Wicaksono</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Stark Indusry</td>
    <td>Tony Stark</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Postcard</td>
    <td>Yoshi </td>
    <td>Canada</td>
  </tr>

</table>

</body>
</html>

Menetapkan Tabel di HTML

Tag <table> mendefinisikan tabel HTML.

Setiap baris tabel didefinisikan dengan tag <tr> . Setiap header tabel didefinisikan dengan tag <th> . Setiap data tabel / sel/ isi didefinisikan dengan tag <td> .

Secara default, teks dalam elemen <th> dicetak tebal dan di tengah.

Secara default, teks dalam elemen <td> beraturan dan rata kiri.

Contoh :

Tabel HTML Sederhana

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Nickname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Baller</td>
    <td>Ball</td>
    <td>18</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Smith</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Violet Evergarden</td>
    <td>Vio</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Catatan: Elemen <td> adalah wadah data dari tabel. Elemen <td> bisa berisi semua jenis elemen HTML seperti ,teks, gambar, daftar, tabel lain, dll.

Tabel HTML – Menambahkan Border/Garis Tepi

Untuk menambahkan border ke tabel kita bisa gunakan properti border dari CSS:

Contoh :

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

<h2>Table With Border</h2>

<p>Gunakan Properti CSS untuk menambahkan border pada tabel.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Nickname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Baller</td>
    <td>Ball</td>
    <td>18</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Smith</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Violet Evergarden</td>
    <td>Vio</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Jangan lupa untuk menentukan garis tepi untuk tabel dan isi tabel!

Tabel HTML – Border Collapse

Untuk menghilangkan spasi pada border, kita bisa tambahkan properti CSS border-collapse:

Contoh :

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

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Nickname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Baller</td>
    <td>Ball</td>
    <td>18</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Smith</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Violet Evergarden</td>
    <td>Vio</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Tabel HTML – Menambahkan Cell Padding

Cell padding berfungsi untuk menentukan ruang antara konten sel dan batasnya.

Jika kita tidak menentukan padding, sel tabel akan ditampilkan tanpa padding.

Untuk menyetel padding, kita akan gunakan properti padding CSS:

Contoh :

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

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Nickname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Baller</td>
    <td>Ball</td>
    <td>18</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Smith</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Violet Evergarden</td>
    <td>Vio</td>
    <td>28</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>
</html>

Tabel HTML – Left-align Headings

Secara default, judul tabel akan dicetak tebal dan di tengah.

Untuk meratakan kiri judul tabel, gunakan properti text-align CSS:

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Nickname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Baller</td>
    <td>Ball</td>
    <td>18</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Smith</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Violet Evergarden</td>
    <td>Vio</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Tabel HTML – Menambahkan Border Spacing

Border Spacing berfungsi untuk menentukan jarak antar sel.

Untuk menyetel border spacing untuk tabel, gunakan properti border spacing CSS:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Nickname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Baller</td>
    <td>Ball</td>
    <td>18</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Smith</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Violet Evergarden</td>
    <td>Vio</td>
    <td>28</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the border-spacing to 5px.</p>

</body>
</html>

Catatan: Jika tabel memiliki collapse border, border-spacing tidak berpengaruh.

Tabel HTML – Colspan

Untuk membuat lebih dari satu kolom ke samping, kita bisa gunakan atribut colspan:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

Tabel HTML – Rowspan

Untuk membuat lebih dari satu baris ke bawah, kita bisa gunakan atribut rowspan:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

Tabel HTML – Caption

Untuk menambahkan keterangan/caption ke tabel, gunakan tag <caption>:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>

<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>

<table style="width:100%">
  <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>$50</td>
  </tr>
</table>

</body>
</html>

Catatan: Tag <caption> disisipkan setelah tag <table> .

Style Table

Untuk menentukan style untuk satu tabel tertentu, tambahkan atribut id ke tabel:

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
#t01 {
  width: 100%;    
  background-color: #f1f1c1;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Contoh lain Style untuk table

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
 background-color: #fff;
}
#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Rangkuman

  • Gunakan elemen <table> HTML untuk mendefinisikan tabel
  • Gunakan elemen <tr> HTML untuk menentukan baris tabel
  • Gunakan elemen <td> HTML untuk menentukan isian/sel tabel
  • Gunakan elemen <th>  HTML untuk menentukan judul tabel
  • Gunakan elemen <caption> HTML untuk menentukan judul tabel
  • Gunakan properti border CSS untuk menentukan batas/tepi
  • Gunakan properti CSS border-collapse untuk menciutkan batas sel
  • Gunakan properti padding CSS untuk menambahkan padding ke sel
  • Gunakan properti CSS text-align untuk meratakiri kan teks
  • Gunakan properti CSS border-spacing untuk mengatur jarak antar sel
  • Gunakan atribut colspan untuk membuat sel menjangkau banyak kolom
  • Gunakan atribut rowspan untuk membuat sel menjangkau banyak baris
  • Gunakan atribut id untuk mendefinisikan satu tabel secara unik

You may also like

Perbedaan HTML dan HTML5

Daftar Simbol – Simbol HTML

Waktu – Simbol HTML

Voltase – Simbol HTML

Volume – Simbol HTML

Radiasi – Simbol HTML

Kecepatan – Simbol HTML

Unit lain-lain – Simbol HTML

Kekuatan – Simbol HTML

Unit tekanan – Simbol HTML