Panduan Komprehensif untuk Membuat Jadual HTML yang Lebih Baik pada 2024

Jika anda melanggan perkhidmatan daripada pautan di halaman ini, Reeves and Sons Limited mungkin mendapat komisen. Lihat kami pernyataan etika.

Anehnya, salah satu teknologi web yang paling sukar untuk dikuasai adalah salah satu yang paling awal tersedia untuk penyemak imbas selepas teks biasa dan gambar. Masalahnya lebih besar lagi hari ini dengan begitu banyak jenis peranti yang perlu difikirkan.

Jadual yang sempurna hampir tidak mungkin dibuat melainkan mengandungi begitu sedikit item sehingga tidak ada masalah yang mungkin akan dicetuskan. Jenis kesalahan yang boleh timbul termasuk:

  • Pembungkus teks tidak betul
  • Kesalahan justifikasi
  • Papan pemaparan jadual
  • Masalah tatal
  • Kesalahan ketinggian baris
  • Kesalahan lebar lajur
  • Keburukan umum atau kegelisahan

Dalam artikel ini kita akan melihat cara untuk mengelakkan masalah seperti itu, jadi jadual anda mempunyai peluang terbaik untuk mencipta kesan yang baik.

Strategi mengelakkan yang perlu dielakkan

Oleh kerana jadual sangat sukar untuk betul, sebilangan orang cuba mengelak dari menggunakannya. Beberapa strategi umum adalah menggunakan CSS untuk membuat tabel palsu, dan menggunakan gambar jadual data tanpa menerapkannya dalam kod.

Kedua-dua strategi penghindaran ini mempunyai kekurangan dan harus dielakkan. Menggunakan CSS untuk meniru jadual tidak mempunyai struktur semantik yang terdapat dalam jadual, yang dapat menimbulkan masalah kebolehgunaan dan aksesibilitas.

Imej jadual tidak akan mengalami masalah yang disenaraikan dalam pengenalan, tetapi merendahkan potensi SEO anda dan tidak boleh diubah suai dengan mudah jika data anda perlu dikemas kini. Ia juga memperkenalkan masalah kebolehgunaan dan kebolehcapaian.

Kerangka kerja adalah rakan anda

Kerangka kerja biasa seperti Bootstrap dan Foundation mengandungi banyak alat penjimatan masa, dan jadual tidak terkecuali. Membina meja yang kelihatan berkelas di Bootstrap tidaklah sukar, tetapi ada beberapa batasan jika anda hanya membina rak tanpa menambahkan beberapa pesanan khusus untuk usaha anda.

Rupa bukan segalanya

Oleh kerana kandungan dan gaya harus selalu bebas, masuk akal untuk membina meja anda dalam HTML biasa terlebih dahulu untuk memastikannya kelihatan baik sebelum gaya meja khas diterapkan.

Ini juga boleh membantu dalam mengingatkan anda bahawa pembinaan meja yang baik memerlukan lebih daripada sekadar membuat meja kelihatan baik. Ia juga harus berguna dalamformatsistem penghantaran ion. Jika matlamat jadual bukan untuk menyampaikan masukformation, maka anda tidak sepatutnya menggunakan jadual untuk apa sahaja yang anda lakukan.

Matlamat untuk aksesibiliti

Sesetengah orang mengalami kesukaran melihat dan membaca teks bercetak, jadi adalah idea yang baik untuk menjadikan jadual boleh diakses untuk mereka. Anda boleh mengetahui semua yang anda perlu tahu tentang menjadikan jadual anda lebih mudah diakses daripadanya WebAIM.

Pertimbangkan untuk memberikan nilai ID pada komponen jadual

Untuk kawalan maksimum ke atas setiap bahagian jadual (baris, sel), anda boleh mempertimbangkan untuk memberikannyadivinilai dual ID. Menambah nilai kelas juga akan memberi anda lebih banyak fleksibiliti.

Melakukan perkara ini menghasilkan lebih banyak kerja untuk anda, jadi ia hanya praktikal apabila anda perlu dapat memperhalusi mana-mana item dengan rujukan. Jika anda memutuskan untuk melakukan ini, anda akan dapat memanipulasi secara langsung mana-mana item jadual menggunakan JavaScript dan CSS.

Salah satu kerumitan pembuatan jadual adalah kita menyatakan baris tetapi bukan lajur. Lajur dibuat secara dinamik, dikira mengikut berapa banyak item data yang anda letakkan pada setiap baris. Inilah sebabnya mengapa jadual menambah masa memuatkan halaman anda.

Secara berkesan ini bermakna lajur hanya wujud dalam erti kata abstrak sebelum halaman itu dipaparkan, jadi anda tidak boleh memberi mereka sebarang jenis rujukan. Dengan memberikan item TD pertama pada baris kelas, sebagai contoh, "firstCol", anda menyediakan cara untuk merujuk terus lajur.

Jadual padat adalah yang terbaik

Ia telah menjadi bergaya untuk membina segala-galanya dengan komponen keterlihatan tinggi yang besar. Dari sudut kebolehcapaian, ini bagus. Dari segi kebolehgunaan, bagaimanapun, ia tidak selalunya cara terbaik, kerana ia boleh membawa kepada masalah.

Pembangun Bootstrap bereksperimen dengan responsive jadual, tetapi jadual dan responsiveness tidak berjalan lancar bersama. Mereka bentuk jadual anda dari mula supaya ia muat pada skrin mudah alih dalam mod potret adalah langkah pintar.

Jadual selalu boleh ditatal

Amalan yang baik untuk sentiasa menetapkan nilai limpahan jadual kepada automatik, tetapi bukan pada jadual itu sendiri. Sebaliknya, bungkus jadual di dalam div, seperti ini:

Kemudian terdapat banyak kod PHP yang membina badan jadual, ditutup dengan ini:

Bahagian yang melakukan kerja membuat jadual digulung adalah pada baris pertama, di mana meja-bungkus div diberi ketinggian tetap dan nilai limpahannya ditetapkan ke automatik. Sekiranya anda melakukan ini ke meja itu sendiri, dan bukan pada pembungkus di sekeliling meja, ia boleh membawa kesan yang tidak diingini.

Hubungi pemukul berat jika anda perlu

Untuk jadual sederhana, ini berlebihan, tetapi apabila anda mempunyai jadual yang benar-benar memerlukan kelebihan seperti lebar lajur dan penyusunan lajur, terdapat beberapa aplikasi jQuery yang kuat yang telah dibina untuk membantu tugas membina jadual yang kompleks.

Pilihan paling mengagumkan yang anda inginkan untuk tapak WordPress ialah wpDataTables, jadual WordPress plugin yang memudahkan kerja anda dengan jadual, carta dan pengurusan data. Dengan itu, anda boleh mencipta responsive Jadual dan carta WordPress.

wpdatatables plugin

. plugin berfungsi dengan pantas dengan jadual besar, sehingga berjuta-juta baris, tetapi anda juga boleh melakukan banyak penyesuaian dan penapisan pada jadual hampir seolah-olah anda berada dalam Excel atau Google Spreadsheets.

Yang paling besar dan kemungkinan besar adalah Flexigrid. Ini memiliki tampilan yang serupa dengan meja Java Swing, dan berfungsi dengan cara yang serupa.

Ciri-ciri Flexigrid mungkin terlalu banyak untuk keperluan anda, jadi dalam hal ini anda boleh mempertimbangkan Penyusun Jadual, yang agak lebih sederhana.

Walaupun ciri-ciri alat jenis ini boleh menjadi menarik, adalah penting bahawa ia akan menambah lebih banyak lagi pada masa pemuatan halaman anda. Adalah lebih baik untuk menyimpan perkara seperti ini apabila anda benar-benar mesti memilikinya.

Alat penukaran automatik biasanya tidak akan memberikan hasil yang terbaik

Terdapat pemalam CMS yang membolehkan anda menukar jadual dokumen menjadi jadual HTML. Tempat ini tidak semudah membina meja sendiri secara manual, jadi jika anda mahukan hasil yang lebih baik, automasi seperti ini bukanlah jalan yang sesuai.

Walau bagaimanapun, automasi buatan sendiri adalah baik

Menggunakan PHP untuk membina jadual anda daripada pangkalan data dalamformation sentiasa idea yang baik, dan pastinya lebih baik untuk menaip semuanya secara manual. Perbezaan di sini ialah anda mempunyai kawalan penuh ke atas cara automasi berfungsi.

Apabila anda menggunakan automasi pihak ketiga, pengarang pihak ketiga perlu membuat andaian tentang jadual anda. Ini bermakna anda akan mendapat jadual generik yang mungkin kekurangan banyak ciri berbanding dengan mencipta jadual itu sendiri.

Gunakan jadual dengan betul dan mereka akan memberi ganjaran kepada anda

Meja yang baik direka bentuk, ia bukan berlaku begitu sahaja. Apabila anda mereka bentuk informatsistem penyampaian ion, anda mahu ia cekap dan berkesan. Pastikan jadual anda direka bentuk sedemikian sahaja dan tapak anda akan mencapai manfaat maksimum daripada kemasukannya.

gambar header milik

Bogdan Rancea

Bogdan adalah ahli pengasas Inspired Mag, yang telah mengumpulkan hampir 6 tahun pengalaman dalam tempoh ini. Pada masa lapang dia suka belajar muzik klasik dan mendalami seni visual. Dia juga taksub dengan fixies juga. Dia sudah memiliki 5 orang.

Komen-komen Responses 0

Sila tinggalkan balasan anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda *

Kedudukan *

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.