HTML for Kids · Pelajaran

Tabel: Mengatur Data

Pelajari cara membuat tabel untuk menampilkan informasi

Pelajaran 1 dari 410 langkah

Tabel: Mengatur Data adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 4 pelajaran total.

Tabel: Mengatur Data

Selamat datang di pelajaran berikutnya! Hari ini, kita akan mempelajari cara membuat tabel dalam HTML. Tabel sangat berguna untuk mengatur informasi dalam baris dan kolom.

Apa Itu Tabel?

Tabel adalah cara untuk menampilkan informasi dalam format yang terstruktur. Setiap tabel terdiri atas baris dan kolom.

Berikut tampilan sebuah tabel:

Name      Age      City


Alice     12       New York


Bob       15       London

Mari kita membuat tabel ini menggunakan HTML!

Membuat Tabel Sederhana

Tabel dalam HTML dibuat menggunakan tag <table>. Baris dibuat menggunakan tag <tr>, dan sel dibuat menggunakan tag <td>.

Contoh:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Menambahkan Header Tabel

Anda dapat menambahkan header ke tabel menggunakan tag <th>. Header membuat tabel Anda lebih mudah dipahami.

Contoh:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Menambahkan Batas pada Tabel

Secara default, tabel tidak memiliki batas. Anda dapat menambahkan batas menggunakan atribut border atau CSS.

Contoh:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Membentangkan Kolom dan Baris

Terkadang, Anda mungkin perlu membuat sebuah sel membentang di beberapa kolom atau baris. Gunakan atribut colspan atau rowspan untuk melakukannya.

Contoh:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Memberi Gaya pada Tabel

Anda dapat membuat tampilan tabel lebih baik menggunakan CSS. Misalnya, Anda dapat mengubah warna, menambahkan padding, atau meratakan teks.

Contoh:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Coba Sendiri

Mari kita membuat tabel yang mencantumkan film favorit Anda. Berikut contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

Kerja Bagus!

Selamat! Anda telah mempelajari cara membuat tabel, menambahkan header, dan bahkan memberi gaya pada tabel. Tabel adalah cara yang sangat baik untuk mengatur dan menampilkan data. Pada pelajaran berikutnya, kita akan mempelajari formulir untuk mengumpulkan masukan pengguna. Bersiaplah untuk membuat halaman Anda interaktif!

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 16
Pelajaran: 35

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tabel: Mengatur Data” gratis?

Ya — teks lengkap “Tabel: Mengatur Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Tabel: Mengatur Data”?

Pelajari cara membuat tabel untuk menampilkan informasi Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML for Kids?

Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Tabel: Mengatur Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?

Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML for Kids