Generator Tabel HTML

Apa yang membuat tabel HTML yang baik

Tabel HTML ada untuk menyajikan data yang benar-benar tabular, baris dan kolom di mana posisi sebuah nilai membawa makna, seperti matriks harga, jadwal, atau bagan perbandingan. Tabel yang benar lebih dari sekadar kisi sel; ia dibangun dari sekeluarga kecil elemen yang menggambarkan peran: table membungkus segalanya, thead dan tbody memisahkan header dari isi, th menandai sel judul, dan td menampung sel data. Generator ini memancarkan seluruh struktur itu untuk Anda sehingga keluarannya bersih dan sesuai standar.

Menata struktur dengan benar itu penting karena browser, mesin pencari, dan teknologi bantu semuanya bersandar padanya. Sebuah kisi yang dipalsukan dengan div mungkin terlihat seperti tabel tetapi tidak mengomunikasikan satu pun hubungannya, sedangkan markup tabel yang benar memberi tahu setiap konsumen halaman dengan persis bagaimana datanya disusun.

Dua cara memasukkan data Anda

Anda dapat membangun tabel secara interaktif di Grid Editor, menambah dan menghapus baris serta kolom dan mengetik langsung ke setiap sel, yang ideal untuk tabel kecil atau suntingan cepat. Untuk apa pun yang sudah berada di spreadsheet, tab CSV Import lebih cepat: tempel data Anda dan ia diurai ke dalam kisi dalam satu langkah.

Pengimpor fleksibel soal pemisah. Ia menerima teks yang dipisahkan koma, tab, titik koma, dan pipa, jadi salinan langsung dari Excel atau Google Sheets (yang memakai tab) dan CSV yang diunduh (yang memakai koma) keduanya berfungsi. Tandai First row is header ketika baris teratas Anda berisi judul kolom, dan nilai-nilai itu menjadi sel th di dalam thead alih-alih data biasa.

Sebuah contoh nyata

Tempel tiga baris ke CSV Import dengan baris pertama ditandai sebagai header: Name, Email, Phone di baris satu, lalu dua baris kontak. Alat menghasilkan sebuah tabel yang thead-nya menampung satu baris berisi tiga sel th dan yang tbody-nya menampung dua baris tr berisi sel td. Aktifkan Bordered dan Striped Rows, maka markup-nya memperoleh kelas dan gaya yang menggambar border sel serta naungan baris berselang-seling, sehingga pratinjaunya cocok persis dengan apa yang akan muncul di halaman Anda bahkan sebelum Anda menyalin kodenya.

Opsi penataan gaya visual

Basic Options mencakup penataan gaya yang paling sering Anda pakai. Bordered menggambar garis di sekeliling sel, Striped Rows menaungi baris secara selang-seling sehingga tabel yang panjang lebih mudah dipindai, dan Hover Effect menyoroti baris di bawah kursor, yang membantu pembaca menelusuri baris yang lebar. Setiap opsi tercermin langsung di pratinjau.

Untuk kontrol yang lebih halus, Advanced Options menampilkan padding dan jarak sel, lebar dan warna border, serta mode border-collapse, yang menentukan apakah border sel yang berdampingan menyatu menjadi garis tunggal (collapse) atau tetap berupa garis ganda terpisah (separate). Anda juga dapat melampirkan ID dan kelas kustom sehingga tabel terhubung ke stylesheet yang sudah ada alih-alih mengandalkan gaya inline semata.

Keterangan dan cakupan header untuk aksesibilitas

Sebuah keterangan memberi tabel judul yang terlihat dan terkait secara terprogram, dan Anda dapat menempatkannya di atas atau di bawah. Inilah cara yang aksesibel untuk menamai sebuah tabel, jauh lebih baik daripada paragraf di dekatnya, karena pembaca layar mengumumkannya sebagai label tabel.

Opsi Header Scope adalah satu-satunya pengaturan aksesibilitas terpenting di sini. Menyetel scope ke col pada sel header memberi tahu teknologi bantu bahwa setiap th melabeli kolom di bawahnya; menyetelnya ke row melabeli baris di sampingnya; dan opsi gabungan menangani tabel yang memiliki baris header sekaligus kolom header. Dengan scope yang disetel benar, pembaca layar dapat mengumumkan header yang relevan saat pengguna berpindah dari sel ke sel, sehingga sebuah nilai dibacakan sebagai Phone: 555-1234 alih-alih sekadar angka telanjang tanpa konteks.

Catatan penting soal responsivitas

Tabel pada dasarnya lebar, dan tabel dengan banyak kolom akan meluap dari layar ponsel. Opsi Responsive Table mengatasi ini dengan membungkus tabel agar ia di-scroll secara horizontal di dalam wadahnya alih-alih merusak tata letak halaman, yang menjaga setiap kolom tetap utuh dan terjangkau. Inilah default yang aman untuk tabel data di layar kecil.

Ada baiknya memahami pertukarannya: scroll horizontal mempertahankan data dengan setia tetapi meminta pembaca untuk menggulir. Tidak ada cara mengalirkan ulang tabel data sejati menjadi satu kolom sempit tanpa kehilangan hubungan baris-dan-kolom, jadi untuk konten yang benar-benar tabular, scroll adalah solusi yang jujur alih-alih akal-akalan.

Kesalahan umum yang harus dihindari

Penyalahgunaan paling sering adalah memakai tabel untuk mengendalikan tata letak halaman alih-alih untuk menyajikan data; CSS modern seperti flexbox dan grid adalah alat yang tepat untuk tata letak, dan tabel sebaiknya disediakan untuk konten tabular. Kekeliruan umum lainnya adalah menghilangkan sel header sama sekali, yang membuat pengguna pembaca layar tanpa konteks kolom, jadi selalu naikkan baris pertama Anda menjadi header ketika berisi judul. Terakhir, jangan kubur penataan gaya dalam atribut style inline yang panjang ketika sebuah kelas akan lebih bersih dan lebih mudah dipelihara; gunakan kolom ID dan kelas untuk menghubungkan tabel ke sebuah stylesheet.