Contoh Tabel Markdown
24/07/2025
|
3 menit baca
|
Bagikan artikel
Pengantar
Tabel adalah cara yang sangat efektif untuk mengorganisir dan menampilkan data dalam konten markdown Anda. Artikel ini menunjukkan berbagai format tabel dan bagaimana mereka ditampilkan di portfolio Anda.
Tabel Dasar
Berikut adalah tabel sederhana yang menunjukkan bahasa pemrograman dan karakteristiknya:
| Bahasa | Tipe | Tahun | Popularitas |
|---|---|---|---|
| JavaScript | Dinamis | 1995 | Sangat Tinggi |
| TypeScript | Statis | 2012 | Tinggi |
| Python | Dinamis | 1991 | Sangat Tinggi |
| Rust | Statis | 2010 | Berkembang |
| Go | Statis | 2009 | Tinggi |
Tabel dengan Perataan
Anda dapat mengontrol perataan teks dalam kolom tabel:
| Rata Kiri | Rata Tengah | Rata Kanan |
|---|---|---|
| Kiri | Tengah | Kanan |
| Data | Data | Data |
| Contoh | Contoh | Contoh |
Tabel Perbandingan Proyek
| Nama Proyek | Stack Teknologi | Status | GitHub Stars |
|---|---|---|---|
| Portfolio | Nuxt 3, Vue 3 | ✅ Live | 42 |
| Blog Engine | Next.js, React | 🚧 Dev | 18 |
| CLI Tool | Rust, Clap | ✅ Live | 127 |
| Mobile App | React Native | 📋 Plan | - |
Tabel dengan Kode
| Perintah | Deskripsi | Contoh |
|---|---|---|
npm install | Install dependensi | npm install vue |
npm run dev | Jalankan server development | npm run dev |
npm run build | Build untuk produksi | npm run build |
Tabel Metrik Performa
| Metrik | Sebelum Optimisasi | Setelah Optimisasi | Peningkatan |
|---|---|---|---|
| Waktu Load | 3.2s | 1.1s | 🚀 65% lebih cepat |
| Ukuran Bundle | 2.1MB | 850KB | 📦 60% lebih kecil |
| Skor Lighthouse | 72 | 98 | ⭐ 36% lebih baik |
| Core Web Vitals | Buruk | Baik | ✅ Sangat Baik |
Kesimpulan
Tabel menyediakan cara yang sangat baik untuk menyajikan data terstruktur dalam konten Anda. Gaya yang diterapkan memastikan tabel terlihat bagus dalam mode terang dan gelap, dengan efek hover yang tepat dan perilaku responsif.
Cobalah membuat tabel Anda sendiri menggunakan sintaks markdown yang ditunjukkan di atas!