Tabel memainkan peran penting ketika harus menampilkan data dalam format yang terorganisir. Dalam tutorial ini, Anda akan belajar bagaimana cara membuat HTML tabel dasar dan menggunakan tag-tag penting untuk tata letak dan strukturnya.
Panduan Langkah-demi-Langkah
Mari kita mulai dengan membuat tabel pertama Anda! Pertama-tama, Anda perlu tahu bahwa tag dasar untuk sebuah tabel adalah. Tag ini mencakup seluruh tabel.
Sekarang kita tambahkan satu baris. Setiap baris didefinisikan dengan tag, yang berarti "baris tabel". Di baris ini belum ada data, jadi tetap kosong untuk saat ini. Anda bisa membayangkan bahwa setiap baris dapat menyediakan ruang untuk beberapa kolom.
Sekarang saatnya untuk memasukkan beberapa data ke dalam tabel. Untuk itu, kita menggunakan tag - dan menambahkan nilai-nilai yang sesuai. Misalkan, nama pertama adalah “Jan”, email “support@programmierenlern.info” dan tanggal lahir adalah 23.06.1982. Baris Anda kemudian akan terlihat seperti ini:
Pastikan tabel sekarang terlihat lebih baik. Anda bisa menambahkan sebanyak mungkin baris dengan menggunakan lebih banyak tag - dan -. Mari kita tambahkan satu karyawan lagi. Kita sebut dia “Joe Average” dan emailnya bisa “joe@average.com”.
Jika kita sekarang memuat ulang tabel, kita akan melihat bahwa tabel tersebut tumbuh dan semua data yang dimasukkan terlihat. Struktur tabel itu penting, karena memberikan Anda gambaran yang jelas tentang informasi tersebut.
Bagaimana jika Anda ingin menambahkan footer di akhir tabel, misalnya untuk hak cipta? Di sinilah colspan berperan. Dengan colspan, Anda dapat menentukan seberapa banyak kolom yang harus ditempati oleh sebuah sel. Jadi untuk menempatkan hak cipta di atas ketiga kolom, Anda menulis: Hak Cipta 2015 coding-geeks.de.
Setelah menambahkan footer ini, Anda harus memeriksa tampilannya. Ide dasarnya adalah footer harus diposisikan di bawah kolom dan menyajikan data dengan jelas. Dalam hal ini, footer tidak memiliki kolomnya sendiri dan karena itu harus berada di atas ketiga kolom lainnya.
Jika Anda sekarang mengurangi colspan menjadi dua, Anda juga bisa menambahkan petunjuk kedua. Misalkan, Anda ingin menampilkan “Coding Geeks” di kolom baru. Untuk itu, gunakan kembali tag - sambil menerapkan colspan dengan benar.
Jika Anda telah mengikuti semua langkah ini, Anda telah belajar bagaimana cara membuat tabel HTML dasar. Namun, desain visual harus selalu dilakukan dengan CSS untuk meningkatkan tata letak dan kemudahan penggunaan. Ini mencakup pemisahan konten dari tata letaknya, sehingga Anda memiliki lebih banyak fleksibilitas dalam desain situs web Anda di masa depan.
Ringkasan - Membuat Dasar-dasar Tabel HTML
Anda telah mempelajari struktur dan penggunaan tabel HTML, mulai dari pembangunannya hingga penempatan data hingga footer. Dengan ini, Anda sekarang dapat menampilkan data tabel dasar di situs web Anda.
Pertanyaan yang Sering Diajukan
Apa saja tag dasar untuk tabel HTML?Tag dasar adalah,, untuk judul dan untuk sel data.
Bisakah saya membuat tanpa batas banyak baris dan kolom dalam sebuah tabel?Ya, secara teori Anda bisa menambahkan banyak baris dan kolom, tetapi penting untuk tetap memperhatikan keterbacaan.
Bagaimana seharusnya saya mendesain tabel secara stylistic?Gunakan CSS untuk desain, bukan atribut HTML langsung seperti border.
Apa itu colspan?Pengaturan atribut colspan memungkinkan sebuah sel memperluas ke beberapa kolom.
Mengapa CSS lebih cocok untuk tata letak daripada atribut HTML?CSS memisahkan konten dari styling-nya dan memberikan lebih banyak fleksibilitas dan opsi untuk desain.
