HTML Table Elements Demo

📝 Basic Tables

💡 Struktur Dasar Tabel

Tabel HTML terdiri dari baris dan kolom untuk menampilkan data tabular secara terstruktur.

basic-table.html

          
            <table>

              <tr>

                <th>Header 1</th>

                <th>Header 2</th>

              </tr>

              <tr>

                <td>Data 1</td>

                <td>Data 2</td>

              </tr>

              <tr>

                <td>Data 3</td>

                <td>Data 4</td>

              </tr>

            </table>

🔍 Penjelasan Detail:

• <table> - Elemen container utama untuk tabel
• <tr> - Table Row untuk membuat baris
• <th> - Table Header untuk judul kolom
• <td> - Table Data untuk konten sel
• Secara default tabel tidak memiliki border
• Gunakan CSS untuk styling seperti border, padding, dll
• Atribut colspan dan rowspan untuk menggabungkan sel

⚡ Pro Tips

Selalu gunakan <th> untuk header kolom agar lebih semantik dan aksesibel!

🔗 Advanced Table Features

💡 Fitur Lanjutan Tabel

HTML menyediakan elemen tambahan untuk membuat tabel lebih terstruktur dan aksesibel.

advanced-table.html

          
            <table>

              <caption>Daftar Harga Produk</caption>

              <thead>

                <tr>

                  <th colspan="2">Produk</th>

                  <th rowspan="2">Harga</th>

                </tr>

                <tr>

                  <th>Kode</th>

                  <th>Nama</th>

                </tr>

              </thead>

              <tbody>

                <tr>

                  <td>P001</td>

                  <td>Laptop</td>

                  <td>Rp 10.000.000</td>

                </tr>

              </tbody>

              <tfoot>

                <tr>

                  <td colspan="2">Total</td>

                  <td>Rp 10.000.000</td>

                </tr>

              </tfoot>

            </table>

🔍 Penjelasan Detail:

• <caption> - Judul tabel yang menjelaskan isi tabel
• <thead> - Bagian header tabel
• <tbody> - Bagian body tabel (konten utama)
• <tfoot> - Bagian footer tabel (summary/total)
• colspan - Menggabungkan beberapa kolom
• rowspan - Menggabungkan beberapa baris
• <colgroup> dan <col> untuk styling kolom spesifik
• Atribut scope pada <th> untuk aksesibilitas

⚡ Pro Tips

Untuk tabel kompleks, tambahkan atribut scope="col" atau scope="row" pada <th> untuk meningkatkan aksesibilitas!

🎨 Table Styling

💡 CSS untuk Tabel

Gunakan CSS untuk membuat tabel lebih menarik dan responsif.

style.css

          
            /* Basic table styling */

            table {

              border-collapse: collapse;

              width: 100%;

              margin: 1rem 0;

            }

            th, td {

              border: 1px solid #444;

              padding: 0.75rem;

              text-align: left;

            }

            th {

              background-color: #2d2d2d;

              color: #00bcd4;

            }

            tr:nth-child(even) {

              background-color: #252525;

            }

            tr:hover {

              background-color: #333;

            }

🔍 Penjelasan Detail:

• border-collapse: collapse - Menghilangkan spasi antar sel
• padding - Memberikan ruang dalam sel
• nth-child(even) - Warna selang-seling untuk keterbacaan
• :hover - Efek hover untuk interaktivitas
• text-align - Mengatur perataan teks dalam sel
• width: 100% - Membuat tabel responsif
• Media query bisa digunakan untuk tabel mobile-friendly

⚡ Pro Tips

Untuk tampilan mobile, pertimbangkan untuk mengubah tabel menjadi card layout dengan media query!