Fungsi Penggunaan Elemen elemen Dasar Pada HTML
 1. <!DOCTYPE html>: Menentukan tipe dokumen dan versi HTML yang digunakan.
2. <html>: Elemen akar dari dokumen HTML, yang membungkus semua elemen lainnya.
3. <head>: Berisi metadata tentang dokumen, seperti judul dan pengaturan karakter.
4. <meta>: Memberikan informasi tambahan tentang dokumen, seperti encoding dan viewport.
5. <title>: Menentukan judul halaman yang ditampilkan di tab browser.
6. <body>: Bagian yang berisi konten yang ditampilkan kepada pengguna.
7. <hl> hingga <h6>: Digunakan untuk heading, dengan <hl> sebagai yang paling penting dan besar.
8. <p>: Menampilkan paragraf teks.
9. <a>: Membuat hyperlink untuk navigasi antar halaman.
10. <img>: Menampilkan gambar dengan atribut src dan alt.
11. <ul>, <ol>, <li>: Membuat daftar (tak berurutan atau berurutan).
12. <div>: Elemen kontainer untuk mengelompokkan elemen lain, sering digunakan untuk styling.
13. <span>: Kontainer inline untuk mengelompokkan teks kecil.
14. <br> dan <hr>: Memulai baris baru dan menampilkan garis horizontal sebagai pemisah.
15. <form>: Membuat formulir input untuk mengumpulkan data dari pengguna.
A. Pendahuluan
   HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat halaman web. Salah satu fitur HTML adalah kemampuan untuk membuat tabel, yang dapat digunakan untuk menyajikan data dengan rapi. Dalam laporan ini, kita akan membuat tabel sederhana untuk data penjualan toko mainan dan ATK anak.
B. Tujuan
   Membuat tabel yang berfungsi untuk menampilkan data penjualan dengan informasi seperti nama produk, kategori, jumlah terjual, harga satuan, dan total penjualan. Data ini akan disusun dalam tabel HTML agar mudah dibaca dan dipahami.
c. Langkah-langkah Membuat Tabel
  1. Struktur Dasar HTML
    Pertama, buat struktur dasar HTML. Berikut adalah contoh kode untuk struktur HTML sederhana:
 2. Membuat Judul dan Tabel
Tambahkan judul untuk halaman, lalu buat tabel dengan tag <table>. Di dalam tabel, kita bisa menggunakan beberapa elemen, yaitu:
<thead> untuk bagian judul kolom tabel.
<tbody> untuk bagian isi data.
<tfoot> untuk bagian footer yang berfungsi untuk menampilkan total keseluruhan data.
3. Menyusun Data Tabel
  Berikut adalah kode lengkap untuk menampilkan tabel data penjualan:
4. Penjelasan Kode
<table border="l " 0" cellspacing="0">: Membuat tabel dengan garis pembatas di setiap sel, serta memberikan jarak di dalam dan di antara sel.
<thead>: Bagian untukjudul kolom, digunakan untuk memberi informasi mengenai isi masing-masing kolom.
<tbody>: Bagian utama dari tabel yang berisi data penjualan. Setiap baris diisi dengan informasi produk.
<tfoot>: Bagian ini berfungsi untuk menampilkan total keseluruhan penjualan di baris paling bawah.
colspan="5" pada <th> di <tfoot>: Menyatukan 5 kolom untuk memberikan ruang bagi total keseluruhan penjualan di kolom terakhir.
5. Kesimpulan
   Dengan menggunakan HTML, kita dapat membuat tabel sederhana untuk menyajikan data penjualan toko mainan dan ATK anak secara efektif. Tabel ini memudahkan pengelolaan dan pemahaman data sehingga dapat membantu dalam analisis dan pengambilan keputusan.
6. TabeI ini mencakup beberapa kolom penting seperti nama produk, kategori, jumlah terjual, harga per unit, dan total penjualan.
1. Header:
  Bagian ini berfungsi sebagai judul utama halaman, menampilkan teks "Daftar Sumber Toko Mainan dan ATK" dan deskripsi singkat di bawahnya. Header ini menggunakan warna latar biru dan teks putih agar lebih mencolok, sehingga pembaca langsung tahu informasi apa yang akan disajikan.
2. Bagian Tabel Toko Mainan:
   Tabel ini mencakup daftar toko mainan, yang terdiri dari kolom nomor urut, nama toko, alamat, kontak, dan deskripsi produk atau layanan yang ditawarkan. Informasi ini diatur dalam bentuk tabel untuk memudahkan pembaca mencari toko tertentu atau mendapatkan gambaran lengkap tentang berbagai jenis mainan yang dijual oleh masing-masing toko. Setiap toko memiliki deskripsi yang singkat, seperti jenis mainan atau target usia, untuk membantu pembaca memahami produk utama yang tersedia.
3. Bagian Tabel ATK (Alat Tulis Kantor):
   Tabel ini memiliki struktur yang sama seperti tabel toko mainan. Namun, informasi di sini khusus untuk toko yang menjual alat tulis kantor dan perlengkapan sekolah atau kantor Iainnya. Dengan tabel ini, pembaca dapat melihat daftar sumber ATK dan mendapatkan informasi terkait kontak dan lokasi. Deskripsi singkatjuga mencakup informasi tambahan, seperti jenis produk yang dijual, dari kertas hingga alat tulis grosir.
4. Gaya (CSS):
   Beberapa elemen CSS digunakan di dalam tag <style> untuk membuat tampilan halaman lebih menarik. CSS mengatur warna latar belakang, font, tata letak tabel, dan tampilan header agar terlihat rapi dan konsisten. Misalnya, warna latar belakang abu-abu terang di bagian utama membantu membuat konten lebih mudah dibaca, dan setiap kolom tabel diberi jarak untuk memastikan informasi tidak bertumpuk.
Baca konten-konten menarik Kompasiana langsung dari smartphone kamu. Follow channel WhatsApp Kompasiana sekarang di sini: https://whatsapp.com/channel/0029VaYjYaL4Spk7WflFYJ2H
