Οι πίνακες HTML παρουσιάζουν δεδομένα πίνακα (σειρές και στήλες σχετικών δεδομένων) — όχι διάταξη. Ένας προσβάσιμος πίνακας χρησιμοποιεί σωστή δομή έτσι ώστε τα προγράμματα ανάγνωσης οθόνης να μπορούν να ανακοινώσουν κεφαλίδες με κάθε κελί.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> με scope — σημειώνει κελιά κεφαλίδας. scope="col" για κεφαλίδες στηλών, scope="row" για κεφαλίδες σειρών. Τα προγράμματα ανάγνωσης οθόνης τότε ανακοινώνουν "North, Revenue: $12,000" αντί να διαβάζουν κελιά χωρίς περιεχόμενο.<caption> — τίτλος για ολόκληρο τον πίνακα, το πρώτο παιδί του <table>· διαβάζεται για να προσανατολίσει τους χρήστες.<thead>/<tbody>/<tfoot> — ομαδοποιεί κεφαλίδες, σώμα και σειρές περίληψης· βοηθά στην πλοήγηση και επιτρέπει την επανάληψη της κεφαλίδας κατά την εκτύπωση.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Οι πίνακες διάταξης ερεθίζουν τα προγράμματα ανάγνωσης οθόνης (ανακοινώνουν σημασιολογία πίνακα δεδομένων) και είναι άκαμπτοι. Χρησιμοποιήστε CSS Grid/Flexbox για διάταξη σελίδας.
Η σωστή σημασιολογία πίνακα (<th scope>, <caption>, ενότητες) είναι αυτό που κάνει τους πίνακες δεδομένων χρησιμοποιήσιμους για χρήστες προγραμμάτων ανάγνωσης οθόνης — συνδέουν κάθε τιμή με τις κεφαλίδες σειράς και στήλης της.
Αποθεματίστε <table> αποκλειστικά για γνήσια δεδομένα πίνακα.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά