Laman » Pengekodan » Bagaimana Menambah Kebolehan Jadual HTML dengan Markup
Bagaimana Menambah Kebolehan Jadual HTML dengan Markup
Kebolehaksesan web merujuk kepada reka bentuk aplikasi web dengan cara yang boleh digunakan dengan mudah oleh orang yang kurang upaya visual. Sesetengah pengguna ini bergantung pembaca skrin untuk membaca kandungan dalam laman web. Pembaca skrin tafsirkan kod yang ada pada halaman dan baca kandungannya kepada pengguna.
adalah elemen HTML yang digunakan secara meluas untuk memaparkan data dalam fesyen berstruktur dalam halaman web. Reka bentuknya adalah dari yang sederhana hingga yang rumit, lengkap dengan tajuk baris, tajuk gabungan dan lain-lain.
Jika jadual tidak direka dengan kemudahan dalam minda, sukar bagi pembaca skrin untuk menerjemahkan data dalam jadual kompleks dengan bermakna bagi pengguna. Oleh itu, untuk membuat jadual HTML kompleks lebih mudah difahami, untuk kebolehaksesan, kita mesti memastikan bahawa tajuk, kumpulan lajur, kumpulan baris, dan lain-lain jelas ditakrifkan. Kita akan lihat di bawah bagaimana ini dicapai dalam markup.
Atribut Skop
Malah untuk meja yang sederhana dengan
tag yang dengan jelas mentakrifkan tajuk, anda boleh meningkatkan aksesnya dengan skop atribut dan tidak memberi jalan kepada kekeliruan yang mungkin timbul daripada jenis data yang sama di dalam sel.
Nama Pekerja
Kod Pekerja
Kod Projek
Jawatan Kakitangan
John Doe
32456
456789
Pengarah
Miriam Luther
78902
456789
Timbalan Pengarah
Apakah ciri atasannya? Menurut W3C:
Dalam erti kata lain, ia membantu kita mengaitkan sel-sel data dengan sel-sel header mereka yang sepadan.
Sila ambil perhatian bahawa dalam contoh di atas, anda boleh menukar
untuk
. Selagi ia skop mempunyai nilai col, ia akan ditafsirkan sebagai tajuk lajur yang sepadan.
The skop atribut boleh mempunyai salah satu dari empat nilai ini; col, baris, rowgroup, colgroup untuk merujuk kepada tajuk lajur, tajuk baris, kumpulan header 'lajur dan kumpulan baris' masing-masing.
Jadual Kompleks
Kini mari kita beralih ke jadual yang lebih rumit.
Di atas adalah jadual yang menyenaraikan pelajar dalam kelas dan gred mereka dalam praktikal dan teori untuk tiga mata pelajaran.
Berikut adalah kod HTML untuknya. Jadual telah digunakan rowspan dan colspan untuk membuat tajuk yang digabungkan untuk sel data.
Nama pelajar
Biologi
Kimia
Fizik
Praktikal
Teori
Praktikal
Teori
Praktikal
Teori
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
Dalam jadual di atas, setiap sel data, iaitu setiap sel jadual memaparkan gred, dikaitkan dengan tiga maklumat:
Pelajar yang mana kelas ini dimiliki?
Subjek yang dimiliki oleh gred ini?
Adakah gred ini untuk seksyen Praktikal atau Teori?
Ketiga-tiga maklumat itu ditakrifkan dalam tiga jenis sel pengepala yang berstruktur dan visual:
Nama pelajar
Nama subjek
Praktikal atau teori
Mari kita tentukan sama untuk kebolehaksesan.
Nama pelajar
Biologi
Kimia
Fizik
Praktikal
Teori
Praktikal
Teori
Praktikal
Teori
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
Dalam markup di atas, kami telah menambah skop ke sel yang mengandungi maklumat tajuk mengenai sel data.
Kumpulan Lajur
Sel Biologi, Kimia dan Fizik akan dikaitkan dengan sekumpulan dua tiang masing-masing (Teori & Praktikal). Tambah sahaja colspan = "2" tidak mencipta kumpulan lajur, ia hanya menunjukkan bahawa sel tertentu adalah untuk menempati dua ruang sel.
Untuk membuat kumpulan lajur, anda mesti menggunakannya colgroup dan kemudian tambahkan span atribut kepadanya yang menunjukkan berapa banyak lajur yang dilampirkan oleh kumpulan lajur.
The
Nama pelajar
markup dengan skop = "col" membantu teknologi bantuan mengenal pasti bahawa sel-sel yang mengikuti di ruang yang sama adalah nama pelajar.
Begitu juga sel seperti
Biologi
mengandungi skop = "koleg" membantu pengguna mengenal pasti bahawa data dalam sel-sel yang mengikuti kumpulan lajur yang dipanjangkan itu dikaitkan dengan subjek tertentu.
Kemudian ada
John Doe
markup dengan skop = "baris" yang mentakrifkan bahawa sel-sel yang mengikutinya dalam baris yang sama, mengandungi “gred” maklumat berkenaan nama pelajar tertentu itu.
Kumpulan Baris
Sekarang mari kita beralih ke contoh lain, contoh ini akan mempunyai hampir jadual yang sama seperti yang di atas kecuali kita akan menukar tajuk baris dan lajur, jadi kita akan dapat bekerjasama dengan kumpulan baris.
Subjek
John Doe
Miriam Luther
Biologi
Praktikal
A
A
Teori
A+
A
Kimia
Praktikal
B
C
Teori
A
C+
Fizik
Praktikal
A
A
Teori
A-
A-
Sekarang kita mempunyai contoh kami untuk bekerja dengan membolehkan kami mulakan dengan membuat kumpulan baris seperti yang kami lakukan untuk kumpulan lajur dalam contoh terdahulu.
Bagaimanapun, kumpulan baris tidak boleh dibuat menggunakan tag seperti colgroup kerana tidak ada rowgroup elemen.
Barisan HTML umumnya dikumpulkan menggunakan , dan unsur-unsur. Satu HTML sahaja
elemen boleh mempunyai satu , satu dan berbilang . Kami akan menggunakan pelbagai tbody dalam jadual kami untuk mencipta kumpulan baris, dan tambahkan skop masing-masing ke sel pengepala.
Subjek
John Doe
Miriam Luther
Biologi
Praktikal
A
A
Teori
A+
A
Kimia
Praktikal
B
C
Teori
A
C+
Fizik
Praktikal
A
A
Teori
A-
A-
Kami telah menambah baris “Praktikal” dan “Teori” dalam setiap tbody mewujudkan kumpulan baris dengan dua baris dalam setiap. Kami juga telah menambah skop = "rowgroup" ke sel yang mengandungi maklumat tajuk tentang dua baris tersebut (yang merupakan nama subjek gred milik dalam kes ini).
