🌐
Miniclass Web
  • Miniclass Web
  • 1. Pengenalan Pemrograman Web
    • Cara Kerja Website
    • Pengenalan Backend dan Frontend
    • HTTP Request dan HTTP Response
  • 2. HTML
    • Pengenalan HTML
    • Text Formatting
    • Link
    • Media
    • List
    • Table
    • Form
    • Grouping
  • 3. CSS
    • Pengenalan CSS
    • Selector CSS
    • Text Formatting
    • Background
    • Border
    • Height dan Width
    • Spacing
    • Layouting
    • Responsive Design
    • Membuat Template Web Responsive
  • 4. Javascript
    • Pengenalan JavaScript
    • Javascript for Java developer
    • Array
    • Fungsi
    • Manipulasi DOM
    • Event
    • Fetch API
    • Object JavaScript
    • UI Component Lanjutan
  • 5. Node.js
    • Pengenalan Node.js
    • Membuat Server HTTP
    • Routing
    • Import Export
    • Node Package Manager
    • Nodemon
  • 6. Express.js
    • Pengenalan Express.js
    • HTTP Method
    • Menerima Data dari URL
    • Middleware
    • Menerima Data dari Body
    • Mengunggah File
    • Menampilkan File dalam Folder
    • Menyimpan Data ke Database MySQL
  • 7. Modern Frontend Development
    • ECMAScript
    • Transpiler
    • Module Bundler
  • 8. React Fundamental
    • Pengenalan React JS
    • Props
    • Event
    • State
    • Conditional Rendering
    • Component Mapping
    • Side Effect
    • Custom Hook
  • 9. React State Management
    • Lifting State Up
    • Context
    • Reducer
  • 10. React Performance
    • Debounce
    • Throttling
    • Memoization
    • Profiling
  • 11. React Testing
    • Component Testing
    • Hook Testing
    • Mocking
    • End to End Testing
  • 12. Object Relational Mapping
    • Pengenalan Object Relational Mapping
  • 13. Document Oriented Database
    • Document Oriented Database
    • Object Document Mapping
  • 14. Web Service
    • REST
    • GraphQL
  • 15. Autentikasi
    • JSON Web Token
    • Membuat Web Service Sederhana
  • 16. Microservices
    • Microservices
    • Microservices Gateway
    • Message Queue
    • Remote Procedure Call
    • Membuat Micro Service Sederhana
  • 18. Caching
Powered by GitBook
On this page
  • 1. Permasalahan
  • 2. Cara Membuat Table Pada HTML
  • 2.1. Tag <table>
  • 2.2. Tag <tr>
  • 2.3. Tag <th>
  • 2.4. Tag <td>
  • 3. Contoh penggunaan table dalam sebuah kasus
  • 3.1 Buat file html
  • 3.2 Buat tag table
  • 3.3 Membuat table header
  • 3.4 Membuat table data
  • 3.5 Tambahan
  • Contoh penulisan keseluruhan

Was this helpful?

  1. 2. HTML

Table

1. Permasalahan

Pada pembuatan website, biasanya kita butuh menampilkan data yang memiliki banyak property, misalnya data siswa memiliki property NIS, nama, kelas, dan gender. Data ini akan tidak cocok apabila ditampilkan menggunakan list. Cara yang lebih cocok untuk menampilkan data ini adalah dengan menggunakan tabel. Sehingga masing - masing property akan ditampilkan pada masing - masing kolom pada tabel tersebut.

2. Cara Membuat Table Pada HTML

Dalam table terdapat baris dan kolom untuk memudahkan penyajian data. Untuk membuat table pada HTML, kita dapat menggunakan kombinasi tag table dengan tr, th, dan td.

2.1. Tag <table>

Langkah pertama untuk membuat tabel pada HTML adalah dengan menuliskan tag <table>. Tag ini digunakan untuk membuat tabel baru. Kita juga bisa memberikan border pada table tersebut dengan menuliskan lebar border pada attribute border

<table border="1px"></table>

2.2. Tag <tr>

Sebelum membuat table header atau table data, kita perlu membuat baris baru terlebih dahulu. Untuk membuat baris baru, kita bisa menuliskan tag <tr> di dalam tag <table> seperti berikut.

<table border="1px">
  <tr></tr>
</table>

2.3. Tag <th>

Tag <th> digunakan untuk membuat table header atau kolom header. Biasanya tag ini digunakan untuk mendeskripsikan data - data apa saja yang akan disajikan pada tabel yang akan dibuat. Untuk membuat table header baru, masukkan tag <th> ke dalam tag <tr> yang sudah dibuat

<table border="1px">
  <tr>
    <th>kolom 1</th>
    <th>kolom 2</th>
    <th>kolom 3</th>
  </tr>
</table>

2.4. Tag <td>

Tag <td> digunakan untuk membuat table data, atau bisa dibilang data yang akan disajikan pada table tersebut. Untuk membuat table data baru, masukkan tag <td> ke dalam tag <tr> baru.

<table border="1px">
  <tr>
    <th>kolom 1</th>
    <th>kolom 2</th>
    <th>kolom 3</th>
  </tr>
  <tr>
    <td>data baris 1 kolom 1</td>
    <td>data baris 1 kolom 2</td>
    <td>data baris 1 kolom 3</td>
  </tr>
  <tr>
    <td>data baris 2 kolom 1</td>
    <td>data baris 2 kolom 2</td>
    <td>data baris 2 kolom 3</td>
  </tr>
</table>

3. Contoh penggunaan table dalam sebuah kasus

Dalam sebuah halaman sekolah, ingin menampilkan data-data seluruh siswanya seperti NIS, Nama, Kelas, dan Gender. Contoh table seperti berikut :

3.1 Buat file html

Buat file baru menggunakan text editor dengan nama file index.html

3.2 Buat tag table

Tulislah dalam html dengan tag <table> lalu tutup dengan </table>

<html>
  <head>
    <title>Membuat tabel</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

3.3 Membuat table header

Selanjutnya, tambahkan table header untuk memberikan deskripsi tentang data apa yang akan ditampilkan. Disini kita bisa membuat baris baru menggunakan <tr>, kemudian di dalam baris tersebut bisa kita tambahkan tag <th> untuk membuat beberapa table header sesuai kebutuhan.

<html>
  <head>
    <title>Membuat tabel</title>
  </head>
  <body>
    <table>
      <tr>
        <th>NIS</th>
        <th>Nama</th>
        <th>Kelas</th>
        <th>Gender</th>
      </tr>
    </table>
  </body>
</html>

3.4 Membuat table data

Table data digunakan untuk menampilkan data-data yang ingin disajikan. Sebelum membuat table data jangan lupa untuk membuat baris baru menggunakan tag <tr> terlebih dahulu. Untuk membuat table data tulislah tag <td> lalu tutup dengan </td>

<html>
  <head>
    <title>Membuat tabel</title>
  </head>
  <body>
    <table>
      <tr>
        <th>NIS</th>
        <th>Nama</th>
        <th>Kelas</th>
        <th>Gender</th>
      </tr>
      <tr>
        <td>20120302</td>
        <td>Ahmad Faisal</td>
        <td>3A</td>
        <td>Laki-laki</td>
      </tr>
    </table>
  </body>
</html>

3.5 Tambahan

Agar table mudah dilihat, kita bisa memberikan table border. Untuk memberikan table border, kita perlu menambahkan attribute border dalam tag <table>.

<table border="1px"></table>

Contoh penulisan keseluruhan

<html>
  <head>
    <title>Membuat tabel</title>
  </head>
  <body>
    <table border="1px">
      <tr>
        <th>NIS</th>
        <th>Nama</th>
        <th>Kelas</th>
        <th>Gender</th>
      </tr>
      <tr>
        <td>20120302</td>
        <td>Ahmad Faisal</td>
        <td>3A</td>
        <td>Laki-laki</td>
      </tr>
      <tr>
        <td>20120303</td>
        <td>Annisa Safitri</td>
        <td>3C</td>
        <td>Perempuan</td>
      </tr>
      <tr>
        <td>20120304</td>
        <td>Christan Febri</td>
        <td>3B</td>
        <td>Laki-laki</td>
      </tr>
      <tr>
        <td>20120305</td>
        <td>Diana Putri</td>
        <td>3B</td>
        <td>Perempuan</td>
      </tr>
      <tr>
        <td>20120306</td>
        <td>Fitriani</td>
        <td>3A</td>
        <td>Perempuan</td>
      </tr>
    </table>
  </body>
</html>
PreviousListNextForm

Last updated 4 years ago

Was this helpful?

Contoh kasus menggunakan table