Tabel HTML

Dalam tutorial ini akan belajar bagaimana menampilkan data tabular menggunakan tabel HTML.

Membuat Tabel dalam HTML

Tabel HTML memungkinkan Kalian untuk mengatur data ke dalam baris dan kolom. Mereka biasanya digunakan untuk menampilkan data tabular seperti daftar produk, detail pelanggan, laporan keuangan, dan sebagainya.

Kalian dapat membuat tabel menggunakan elemen <table>. Di dalam elemen <table>, Kalian dapat menggunakan elemen <tr> untuk membuat baris, dan untuk membuat kolom di dalam baris, Kalian dapat menggunakan elemen <td>. Kalian juga dapat menentukan sel sebagai header untuk grup sel tabel menggunakan elemen <th>.

Contoh berikut menunjukkan struktur paling dasar dari sebuah tabel.

<table>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Peter Parker</td>
    <td>16</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Clark Kent</td>
    <td>34</td>
  </tr>
</table>

Tabel tidak memiliki batas secara default. Kalian dapat menggunakan properti perbatasan CSS untuk menambahkan batas ke tabel. Juga, sel tabel berukuran cukup besar agar sesuai dengan konten secara default. Untuk menambahkan lebih banyak ruang di sekitar konten di sel tabel, Kalian dapat menggunakan properti padding CSS.

Aturan gaya berikut menambahkan border 1 pixel ke tabel dan padding 10 pixel ke selnya.

table,
th,
td {
  border: 1px solid black;
}
th,
td {
  padding: 10px;
}

Secara default, batas di sekitar tabel dan selnya dipisahkan satu sama lain. Tetapi Anda dapat menciutkannya menjadi satu dengan menggunakan properti border-collapse pada elemen <table>.

Juga, teks di dalam elemen <th> ditampilkan dalam font tebal, disejajarkan secara horizontal di tengah sel secara default. Untuk mengubah perataan default, Anda dapat menggunakan properti text-align CSS.

Aturan gaya berikut menciutkan batas tabel dan meratakan teks header tabel ke kiri.

table {
  border-collapse: collapse;
}
th {
  text-align: left;
}

Silakan lihat tutorial tentang tabel CSS untuk mempelajari tentang menata tabel HTML secara detail.

CATATAN

Sebagian besar atribut elemen <table> seperti border, cellpadding, cellpacing, width, align, dll. untuk tampilan tabel penataan gaya di versi sebelumnya telah dihapus di HTML5, jadi hindari menggunakannya. Gunakan CSS untuk menata tabel HTML sebagai gantinya.

Mencakup Banyak Baris dan Kolom

Spanning memungkinkan Kalian untuk memperluas baris dan kolom tabel di beberapa baris dan kolom lainnya.

Biasanya, sel tabel tidak dapat melewati ruang di bawah atau di atas sel tabel lain. Namun, Kalian dapat menggunakan atribut rowspan atau colspan untuk merentangkan beberapa baris atau kolom dalam sebuah tabel.

Mari kita coba contoh berikut untuk memahami cara kerja colspan pada dasarnya:

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Carter</td>
    <td>5550192</td>
    <td>5550152</td>
  </tr>
</table>

Demikian pula, kalian dapat menggunakan atribut rowspan untuk membuat sel yang mencakup lebih dari satu baris. Mari kita coba contoh untuk memahami cara kerja rentang baris pada dasarnya:

<table>
  <tr>
    <th>Name:</th>
    <td>John Carter</td>
  </tr>
  <tr>
    <th rowspan="2">Phone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Menambahkan Teks ke Tabel

Anda dapat menentukan keterangan (atau judul) untuk tabel Anda menggunakan elemen <caption>.

Elemen <caption> harus ditempatkan langsung setelah tag pembuka <table>. Secara default, teks muncul di bagian atas tabel, tetapi Anda dapat mengubah posisinya menggunakan properti caption-side CSS.

Contoh berikut menunjukkan cara menggunakan elemen ini dalam tabel.

<table>
  <caption>
    Users Info
  </caption>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Peter Parker</td>
    <td>16</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Clark Kent</td>
    <td>34</td>
  </tr>
</table>

Mendefinisikan Tabel Header, Body, dan Footer

HTML menyediakan serangkaian tag <thead>, <tbody>, dan <tfoot> yang membantu kalian membuat tabel yang lebih terstruktur, dengan mendefinisikan masing-masing region header, body, dan footer.

Contoh berikut menunjukkan penggunaan elemen-elemen ini.

<table>
  <thead>
    <tr>
      <th>Items</th>
      <th>Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stationary</td>
      <td>2,000</td>
    </tr>
    <tr>
      <td>Furniture</td>
      <td>10,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>12,000</td>
    </tr>
  </tfoot>
</table>

CATATAN

Dalam HTML5, elemen <tfoot> dapat ditempatkan sebelum atau sesudah elemen <tbody> dan <tr>, tetapi harus muncul setelah elemen <caption>, <colgroup>, dan <thead>.

TIP

Jangan gunakan tabel untuk membuat tata letak halaman web. Tata letak tabel lebih lambat dalam rendering, dan sangat sulit untuk dipelihara. Ini harus digunakan hanya untuk menampilkan data tabular.