Βικιπαίδεια:Σφάλματα στη χρήση πινάκων
Σε αυτή τη σελίδα καταγράφεται μια σειρά από σφάλματα στη χρήση πινάκων, είτε σφάλματα σύνταξης που μπορεί να προκαλέσουν πρόβλημα ορατό, ή πρόβλημα που μπορεί να εντοπιστεί τεχνικά, είτε σφάλματα που έχουν δεν προκαλούν τεχνικό σφάλμα αλλά οδηγούν σε προβλήματα χρηστικότητας και προσβασιμότητας. Αυτή η σελίδα δεν μπορεί να καταγράψει όλα τα λάθη που υπάρχουν ή μπορεί να υπάρχουν αλλά μόνο τα πιο συνηθισμένα ή αυτά που προκαλούν περισσότερα προβλήματα.
Σωστός πίνακας Επεξεργασία
Ας ξεκινήσουμε με τον ορθό και απλό τρόπο σύνταξης:
{| class="wikitable"
|+ Τίτλος πίνακα
|-
! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
εμφανίζει:
| Κείμενο κεφαλίδας | Κείμενο κεφαλίδας | Κείμενο κεφαλίδας |
|---|---|---|
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
Αυτός είναι και ο τύπος πίνακα που εισάγεται με το κουμπί εισαγωγής πίνακα, είτε με τον επεξεργαστή κώδικα, είτε με τον οπτικό επεξεργαστή.
Σφάλματα χρηστικότητας/προσβασιμότητας Επεξεργασία
Τα ακόλουθα σφάλματα ως προς τη σύνταξη δεν εμφανίζουν πρόβλημα, αλλά ουσιαστικά δεν χρησιμοποιούν την ανάλογη σύνταξη για τον σκοπό για τον οποίο υπάρχει. Τα σφάλματα αυτά μπορεί να μην είναι ορατά και να μην γίνονται κατανοητά από συντάκτες και αναγνώστες εκτός ορισμένων συνθηκών, όπως π.χ. πρόσβαση από κινητό τηλέφωνο, εκτύπωση, λειτουργία νυκτός, χρήση με φωνητικό αναγνώστη, κατανόηση από μηχανές αναζήτησης και τεχνητή νοημοσύνη κλπ.
Προσαρμοσμένη μορφοποίηση χωρίς λόγο Επεξεργασία
{| style="background:#ECECEC; padding:1px: margin:5px; border: 1px solid #ddd; padding: 8px; border-collapse: collapse;"
|- style="background:#a2a9b1;"
! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
| Κείμενο κεφαλίδας | Κείμενο κεφαλίδας | Κείμενο κεφαλίδας |
|---|---|---|
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
Το αποτέλεσμα της προσαρμοσμένης μορφοποίησης ενός πίνακα μπορεί να είναι όμορφο ή άσχημο οπτικά, αλλά οπωσδήποτε αχρείαστα διαφορετικό από την ομοιόμορφη μορφοποίηση πινάκων της Βικιπαίδειας σε όλο το εύρος των λημμάτων. Πέρα από την ομοιομορφία, η χρήση των λεγόμενων inline styles δυσκολεύει την σωστή εμφάνιση του πίνακα σε άλλα περιβάλλοντα πέρα από αυτό στο οποίο σχεδιάστηκαν.
Κεφαλίδες μέσω χρωματισμού αντί πραγματικές κεφαλίδες Επεξεργασία
{| class="wikitable"
|- style="background:#eaecf0;"
| '''Κείμενο κεφαλίδας''' || '''Κείμενο κεφαλίδας''' || '''Κείμενο κεφαλίδας'''
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
εμφανίζει:
| Κείμενο κεφαλίδας | Κείμενο κεφαλίδας | Κείμενο κεφαλίδας |
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
Μπορεί οπτικά να είναι πανομοιότυπο με το σωστό, οι υπολογιστές δεν μπορούν να κατανοήσουν το ότι η πρώτη σειρά είναι οι επικεφαλίδες των στηλών και όχι απλά δεδομένα όπως στα κελιά από κάτω.
Τίτλος πίνακα ως εκτεταμένο κελί Επεξεργασία
{| class="wikitable"
! colspan="3" | Τίτλος πίνακα
|-
! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
εμφανίζει:
| Τίτλος πίνακα | ||
|---|---|---|
| Κείμενο κεφαλίδας | Κείμενο κεφαλίδας | Κείμενο κεφαλίδας |
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
| Κείμενο κελιού | Κείμενο κελιού | Κείμενο κελιού |
Πολλές φορές και με προσαρμοσμένο χρωματισμό με inline css. Όχι μόνο δεν είναι η ομοιόμορφη και επιλεγμένη εμφάνιση του τίτλου, αλλά οι υπολογιστές θεωρούν ότι ο πίνακας έχει μόνο μια στήλη που διαιρείται σε υποστήλες. Φυσικά πρέπει να ξεχαστεί οποιαδήποτε δυνατότητα για «sortable» πίνακα ή παραμονή της επικεφαλίδας στην οθόνη κατά την κύλιση της σελίδας.
Τίτλος πίνακα ως εξωτερικός πίνακας (πίνακας μέσα σε πίνακα) Επεξεργασία
{| class="wikitable" style="padding:0"
! Τίτλος πίνακα
|-
|
{| style="margin:0"
|- style="background:#efefef;"
! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
|}
εμφανίζει:
| Τίτλος πίνακα | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
και με διάφορες παραλλαγές κεφαλίδων μέσω χρωματισμού ή προσαρμοσμένης μορφοποίησης για να μην φαίνεται πολύ διαφορετικός.
Ως αποτέλεσμα έχει τα ίδια προβλήματα ανάγνωσης, διαχείρισης, και τροποποίησης με τις άλλες περιπτώσεις.
Υπάρχουν και περιπτώσεις που εκτός από ακατάλληλη χρήση είναι εσφαλμένη και η σύνταξη, και είναι ανιχνεύσιμες.
Πίνακας εκτεινόμενος κατά πλάτος Επεξεργασία
| Έτος απογραφής | 1940 | 1951 | 1961 | 1971 | 1981 | 1991 | 2001 | 2011 |
|---|---|---|---|---|---|---|---|---|
| Πληθυσμός | 3.933 | 4.707 | 5.650 | 6.370 | 7.169 | 7.440 | 8.192 | 6.852 |
Στην αρχή ο παραπάνω πίνακας μπορεί να φαίνεται ok, και φαινομενικά γλυτώνει χώρο. Αν σκεφτούμε όμως ότι ενδέχεται ή σίγουρα θα γεμίσει νέα δεδομένα, και θα πρέπει να επεκταθεί κι άλλο σε πλάτος, τότε θα διαπιστωθεί ότι εξαρχής δεν ήταν σωστός καθώς θα ξεπεράσει σε πλάτος οποιοδήποτε μέσο, είτε οθόνη είτε έντυπο. Στην πραγματικότητα ο παραπάνω πίνακας είναι ήδη φαρδύς για μικρές οθόνες. Άλλωστε, η συνηθισμένη πρακτική είναι ότι τα νέα δεδομένα προστίθενται με νέες γραμμές και όχι νέες στήλες.
Είναι ενδιαφέρον να επισημανθεί ότι το κελί "Πληθυσμός" δεν είναι πραγματικά κελί κεφαλίδας, αλλά το παριστάνει μέσω μορφοποίησης. Θα μπορούσε να είναι κελί κεφαλίδας αλλά με εντελώς διαφορετική σύνταξη ολόκληρου του πίνακα, αφού άλλωστε ως έχει, η κεφαλίδα "Έτος απογραφής" σημασιολογικά δηλώνει τι περιλαμβάνεται στην στήλη από κάτω της και όχι στα κελιά που ακολουθούν οριζόντια (θα χρειαζόταν attribute scope, κάνοντας το ακόμη πιο πολύπλοκο).
Οπότε κάθε ανάλογος πίνακας θα πρέπει να είναι απλά κάθετος:
| Έτος απογραφής | Πληθυσμός |
|---|---|
| 1940 | 3.933 |
| 1951 | 4.707 |
| ... | ... |
Φώλιασμα πινάκων μέσα σε άλλο πίνακα για λόγους διάταξης Επεξεργασία
{| style="width:100%; text-align:center;"
|
{| class="wikitable"
|+ Τίτλος πίνακα 1
|-
! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
|
{| class="wikitable"
|+ Τίτλος πίνακα 2
|-
! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας !! Κείμενο κεφαλίδας
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|-
| Κείμενο κελιού || Κείμενο κελιού || Κείμενο κελιού
|}
|}
|
|
Είναι ευρέως διαδεδομένη η παρατήρηση ότι οι πίνακες HTML (το αποτέλεσμα των πινάκων κώδικα wiki) είναι πίνακες δεδομένων και όχι πίνακες διάταξης. Η χρήση τους για λόγους διάταξης είτε απαγορεύεται είτε αποτρέπεται από τις προδιαγραφές HTML και WCAG. Οι πίνακες όταν χρησιμοποιούνται για λόγους διάταξης δεν είναι προσβάσιμοι, δυσχεραίνουν την αναγνώριση περιεχομένου, δυσκολεύουν την επεξεργασία από άλλους χρήστες, και είναι άκαμπτοι σε διαφορετικούς τρόπους εμφάνισης και εκτύπωσης. Στο παραπάνω παράδειγμα υπάρχουν ουσιαστικά δύο πίνακες δεδομένων εντός ενός άλλου «αόρατου» στα μάτια, αλλά εκλαμβανόμενου ως αληθινού πίνακα από τον υπολογιστή, και για παράδειγμα σε εκτύπωση ή μικρές αναλύσεις. Η δημιουργία εύκαμπτων διατάξεων που φαίνονται καλά σε πολλές οθόνες, προγράμματα περιήγησης και αναλύσεις είναι σχετικά εύκολη με τη χρήση CSS χωρίς χρήση πινάκων.
Σπάσιμο πίνακα για λόγους διάταξης Επεξεργασία
|
|
Παραλλαγή του φωλιάσματος πινάκων μέσα σε άλλο πίνακα για λόγους διάταξης, το σπάσιμο ενός ενιαίου πίνακα σε δύο πίνακες για λόγους διάταξης και «εξοικονόμησης χώρου» (π.χ. αν έχουν στενές στήλες και πολλές γραμμές) είναι επίσης επιζήμια σε ότι αφορά την προσβασιμότητα, δυσκολεύει την επεξεργασία από άλλους χρήστες, δυσχεραίνει την αναγνώριση περιεχομένου με όποιο τρόπο και αν γίνεται (ακόμη και αν δεν χρησιμοποιείται εξωτερικός πίνακας αλλά css). Άλλωστε ακόμη και ο επιδιωκόμενος στόχος δεν επιτυγχάνεται, καθώς μπορεί να «εξοικονομείται χώρος» σε φαρδιές οθόνες αλλά ενδεχομένως να αποκρύπτεται ο πίνακας σε στενές οθόνες και την εκτύπωση.
Συγχώνευση πινάκων για λόγους διάταξης Επεξεργασία
| Πίνακας 1 | Πίνακας 2 | Πίνακας 3 | |||
|---|---|---|---|---|---|
| Κεφαλίδα Α | Κεφαλίδα Β | Κεφαλίδα Α | Κεφαλίδα Β | Κεφαλίδα Α | Κεφαλίδα Β |
| Σειρά 1 | Κείμενο κελιού | Σειρά 1 | Κείμενο κελιού | Σειρά 1 | Κείμενο κελιού |
| Σειρά 2 | Κείμενο κελιού | Σειρά 2 | Κείμενο κελιού | Σειρά 2 | Κείμενο κελιού |
| Σειρά 3 | Κείμενο κελιού | Σειρά 3 | Κείμενο κελιού | Σειρά 3 | Κείμενο κελιού |
Ακριβώς το αντίθετο από το #Σπάσιμο πίνακα για λόγους διάταξης με ή χωρίς τίτλο πίνακα ως εκτεταμένο κελί. Επιζήμιο σε ότι αφορά την προσβασιμότητα, δυσκολεύει την επεξεργασία από άλλους χρήστες, δυσχεραίνει την αναγνώριση περιεχομένου. Ο πιθανά επιδιωκόμενος στόχος δεν επιτυγχάνεται, καθώς μπορεί να «εξοικονομείται χώρος» σε φαρδιές οθόνες αλλά ενδεχομένως να αποκρύπτεται ο πίνακας σε στενές οθόνες και την εκτύπωση. Από υπαρκτό παράδειγμα γίνεται εμφανές το αδιέξοδο όταν χρειάστηκε να μικρύνει η γραμματοσειρά κάτω από επιτρεπτά όρια (σφάλμα προσβασιμότητας), προκειμένου να χωράει ακόμη και σε τυπικού μεγέθους οθόνες υπολογιστή. Η ανάγνωση σε προβολή κινητού παραμένει αδύνατη. Σημασιολογικά όλα τα κελιά του παραπάνω πίνακα ανήκουν στον ίδιο πίνακα και απλώς σε διαφορετικές στήλες. Η μόνη αποδεκτή δομή είναι οι διαφορετικοί πίνακες.