Πίνακες HTML: Πρέπει όλοι να το ξέρετε

Κρίνοντας από το γεγονός ότι δημιουργήσαμε wpDataTables, δεν είναι μυστικό ότι μας αρέσουν τα τραπέζια. Τόσο πολύ που γράψαμε αυτό το μακρύ άρθρο για να βοηθήσουμε εκείνους από σας που είναι αρχάριοι και θέλουν να μάθουν για πίνακες HTML.

Οι πίνακες HTML χρησιμοποιούνται για την εμφάνιση δεδομένων που έχουν νόημα στο λογισμικό υπολογιστικών φύλλων. Αποτελούνται από σειρές και στήλες και χρησιμοποιούνται συχνά σε ιστότοπους για την αποτελεσματική προβολή των πινακοποιημένων δεδομένων.

Πώς να δημιουργήσετε ένα τραπέζι σε HTML; Πότε να το χρησιμοποιήσετε και γιατί; Τι είναι τα καλά παραδείγματα πίνακα HTML; Σήμερα, θα απαντήσουμε σε αυτά τα ερωτήματα και περισσότερο για να σας βοηθήσουμε να καταλάβετε όλα όσα υπάρχουν για να μάθετε σχετικά με τους πίνακες HTML.

Πίνακας περιεχομένων

  • Εισαγωγή στα τραπέζια
  • Στυλ πίνακα
  • Οι πίνακες HTML συχνά έκαναν ερωτήσεις
  • Εργαλεία γεννήτριας πίνακα HTML

Εισαγωγή στα τραπέζια

Ο πίνακας HTML χρησιμοποιείται για την ταξινόμηση δεδομένων (όπως κείμενο, εικόνες, συνδέσμους κ.λπ.) στον πίνακα - βασικά, σειρές και στήλες.

Πότε να χρησιμοποιείτε τους πίνακες

Ένας πίνακας σε HTML κάνει πολύ νόημα όταν θέλετε να οργανώσετε δεδομένα που θα φαίνονται καλύτερα σε ένα υπολογιστικό φύλλο. Ένας πίνακας HTML είναι ένας πολύ καλός τρόπος για να εμφανίσετε πράγματα όπως οικονομικά δεδομένα, ημερολόγια, τιμολόγηση, σύγκριση χαρακτηριστικών, πίνακας πληροφοριών για τις πληροφορίες σχετικά με τα θρεπτικά στοιχεία, βαθμολογίες μπόουλινγκ και πολλά άλλα πινακοειδή δεδομένα.

Υπάρχει μια πιθανότητα να έχετε ακούσει ότι τα τραπέζια ήταν ανυπολόγιστα. Ωστόσο, αυτό δεν είναι καθόλου αληθές. Οι πίνακες σημαίνουν σημασιολογικά δεδομένα και είναι η καλύτερη επιλογή για την εμφάνιση δεδομένων αυτού του είδους.

Όταν δεν χρησιμοποιείτε πίνακες

Ενώ κάποια δεδομένα φαίνονται υπέροχα στους πίνακες, υπάρχουν πράγματα που δεν πρέπει να διευθετηθούν με αυτόν τον τρόπο απλώς και μόνο επειδή δεν θα είχε νόημα. Υπάρχουν επίσης κάποιες άλλες ακατάλληλες χρήσεις του πίνακα CSS που πρέπει να αποφεύγονται αν είναι δυνατόν.

Για παράδειγμα, δεν πρέπει ποτέ να χρησιμοποιήσετε πίνακες για διάταξη. Το θέμα είναι ότι τα στοιχεία πίνακα σημασιολογικά περιγράφουν πίνακες δεδομένων και η χρήση τους για άλλους σκοπούς αποτελεί παραβίαση σημασιολογικού καθήκοντος.

Ο γενικός κανόνας είναι ότι οι ιστότοποι πρέπει να είναι προσβάσιμοι. Ένα μέρος της προσβασιμότητας είναι οι αναγνώστες οθόνης που διαβάζουν πίνακες από πάνω προς τα κάτω, από αριστερά προς τα δεξιά. Με τους πίνακες σε HTML, η σειρά εμφάνισης του ιστότοπου καθορίζεται από οπτικές επιλογές αντί των επιλογών προσβασιμότητας. Σε περιπτώσεις όπως αυτό, οι αναγνώστες οθόνης δεν λειτουργούν πάντα όπως θα θέλατε.

Στοιχεία πίνακα

Οι πίνακες HTML συνήθως συνοδεύονται από μια σύντομη περιγραφή του σκοπού τους. Μερικές φορές, παρέχεται μια πιο λεπτομερής περιγραφή μέσω του χαρακτηριστικού σύνοψης προς όφελος των ανθρώπων που χρησιμοποιούν χρήστες ομιλίας ή Braille.

Οι σειρές των τραπεζιών μπορούν να ομαδοποιηθούν σε τμήματα κεφαλής, ποδιού και σώματος (μέσω των στοιχείων THEAD, TFOOT και TBODY). Οι πράκτορες χρήστη μπορούν να εκμεταλλευτούν το τμήμα κεφαλής / σώματος / ποδιού για να υποστηρίξουν την κύλιση των τμημάτων του σώματος ανεξάρτητα από τα τμήματα κεφαλής και ποδιού. Όταν εκτυπώνουμε τους μεγάλους πίνακες HTML, οι πληροφορίες κεφαλής και ποδιού εμφανίζονται συνήθως σε κάθε σελίδα που περιέχει τον πίνακα.

Εάν θέλετε να δώσετε περισσότερες πληροφορίες σχετικά με τη δομή, μπορείτε επίσης να ομαδοποιήσετε στήλες. Εκτός αυτού, οι ιδιότητες στήλης μπορούν να δηλώνονται στην αρχή του ορισμού του πίνακα χρησιμοποιώντας τα στοιχεία COLGROUP και COL.

Τα κελιά πίνακα περιέχουν τις πληροφορίες κεφαλίδας και / ή δεδομένα και μπορούν να εκτείνονται σε πολλαπλές στήλες και σειρές. Όταν επισημάνετε κάθε κελί με τη λειτουργία πίνακα HTML 4, οι μη οπτικοί πράκτορες χρήστη μπορούν να μεταδώσουν τις πληροφορίες στον χρήστη πιο εύκολα. Όχι μόνο αυτό είναι χρήσιμο για χρήστες με ειδικές ανάγκες, αλλά καθιστά δυνατή τη χρήση ασύρματων browsers με περιορισμένες δυνατότητες προβολής για τη διαχείριση πινάκων HTML.

Αναφέρθηκε ήδη ότι οι πίνακες HTML δεν πρέπει να χρησιμοποιούνται για τη διάταξη. Αντ 'αυτού, θα πρέπει να χρησιμοποιείτε φύλλα στυλ όποτε είναι απαραίτητο για την επίτευξη καλύτερων αποτελεσμάτων και καλύτερης προσβασιμότητας.

Κεφάλι και Σώμα

Ας ρίξουμε μια ματιά σε ένα βασικό παράδειγμα στυλ πίνακα HTML:

Φανταστείτε να βλέπετε μια σειρά (οριζόντια) για να δείτε ένα μόνο άτομο και σχετικές πληροφορίες σχετικά με αυτές. Όταν κοιτάζετε πάνω και κάτω μια στήλη (κάθετη), θα πάρετε μια αίσθηση της ποικιλίας ή του σχεδίου των δεδομένων.

Η πρώτη σειρά είναι η κεφαλίδα του πίνακα και δεν περιέχει δεδομένα - μόνο τους τίτλους των στηλών. Μπορείτε να δείξετε σημασιολογικά ότι συμβαίνει αυτό με το στοιχείο , το οποίο θα τυλίξει το πρώτο (θα μπορούσε να τυλίξει όσες σειρές χρειάζονται και όλες οι πληροφορίες κεφαλίδας).

Όταν χρησιμοποιείτε , δεν πρέπει να υπάρχει που είναι άμεσο παιδί

. Όλες οι σειρές πρέπει να είναι είτε στο πλαίσιο , , ή .

Υποσέλιδο πίνακα

Μαζί με τα

και , υπάρχει για την περιτύλιξη των γραμμών του πίνακα που υποδεικνύουν το υποσέλιδο του πίνακα. Όπως το , είναι καλύτερο να υποδηλώνει σημασιολογικά ότι δεν πρόκειται για σειρές δεδομένων αλλά για επικουρικές πληροφορίες.

Η τοποθέτηση του

είναι μοναδική σε HTML καθώς έρχεται μετά από και πριν από το ! Έτσι, αν και φαίνεται λογικό να το βρούμε στο τέλος του
, δεν συμβαίνει στην πραγματικότητα. Δεδομένου ότι το υποσέλιδο περιέχει πληροφορίες απαραίτητες για την κατανόηση του πίνακα, τοποθετείται πριν από τα δεδομένα με τη σειρά πηγής για καλύτερη πρόσβαση.

Το υποσέλιδο πίνακα μπορεί να χρησιμοποιηθεί σε μεγάλους πίνακες HTML για να επαναλάβει την κεφαλίδα, για παράδειγμα. Ωστόσο, μπορεί να χρησιμοποιηθεί και για άλλους σκοπούς, για παράδειγμα, με μια διάταξη όπου η θέση των στοιχείων μεταπηδά από κάτω προς τα πάνω ανάλογα με τις ανάγκες.

Στοιχεία πίνακα και τα χαρακτηριστικά τους

Ετικέτα HTML

Το στοιχείο

προσδιορίζει ένα ή περισσότερα στοιχεία που περιέχουν περιληπτικά περιεχόμενα των στηλών ενός πίνακα. Το στοιχείο πρέπει να είναι ο άμεσος απόγονος ενός στοιχείου
.

Στο HTML5, το

μπορεί να τοποθετηθεί είτε πριν είτε μετά από τα στοιχεία και , αλλά πρέπει να εμφανιστεί μετά από οποιαδήποτε στοιχεία και .

Ετικέτα HTML

Το στοιχείο

πρέπει να είναι ένας άμεσος απόγονος ενός στοιχείου
,
και χρησιμοποιείται για την ταυτοποίηση στοιχείων που αποτελούν το σώμα του πίνακα. Το στοιχείο πρέπει πάντα να έρχεται μετά από ένα στοιχείο και μπορεί να έρθει πριν ή μετά από ένα στοιχείο .

Ετικέτα HTML

Γνωρίσματα

  • Το

    στοιχείο χρησιμοποιείται για την ομαδοποίηση των τιμών μπορεί να είναι ένα άμεσο παιδί ενός στοιχείου
    ή σε μια μόνο γραμμή των τίτλων του πίνακα ή των τιμών δεδομένων. Το στοιχείο
    ή ένα ένθετο μέσα σε ένα γονικό στοιχείο , ή .

    HTML Tag

    Γνωρίσματα

    Το στοιχείο

    χρησιμοποιείται για να προσθέσετε μια λεζάντα σε έναν πίνακα HTML. Ένα πρέπει να εμφανίζεται σε ένα έγγραφο HTML ως ο πρώτος απόγονος ενός γονέα , αλλά μπορεί να τοποθετηθεί οπτικά στο κάτω μέρος του πίνακα με το CSS.

    διάσελο

    Γνωρίσματα

    Το στοιχείο

    , το οποίο συνήθως χρησιμοποιείται ως παιδικό στοιχείο μιας γονικής ομάδας , μπορεί να χρησιμοποιηθεί για στόχευση μιας στήλης σε έναν πίνακα HTML.

    colgroup

    Γνωρίσματα

    Το στοιχείο

    χρησιμοποιείται ένα γονικό κοντέινερ για ένα ή περισσότερα στοιχεία τα οποία χρησιμοποιούνται για τη στόχευση στηλών σε έναν πίνακα HTML.

    Βασικό στυλ

    Η διάκριση των διαφόρων τμημάτων του τραπεζιού είναι εύκολη αν ο πίνακας έχει διαφορετικά χρώματα και γραμμές. Το περίγραμμα CSS πίνακα είναι ένα άλλο κοινό στοιχείο. Από προεπιλογή, όλα τα κελιά πίνακα βρίσκονται σε απόσταση μεταξύ τους κατά 2px. Μεταξύ της πρώτης και της υπόλοιπης σειράς, θα παρατηρήσετε ένα μικρό επιπλέον χάσμα που προκαλείται από την προεπιλεγμένη απόσταση μεταξύ των ορίων που εφαρμόζεται στα

    και , ωθώντας τα εκτός από λίγο επιπλέον.

    Μπορείτε να ελέγξετε την απόσταση:

    τραπέζι {απόσταση μεταξύ περιθωρίων: 0.5rem;}

    Ή μπορείτε απλά να αφαιρέσετε αυτό το διάστημα:

    τραπέζι {περιθώριο-κατάρρευση: κατάρρευση;}

    Η συμπλήρωση πίνακα HTML, ο τίτλος του πίνακα HTML, τα σύνορα και η δημιουργία στοιχείων

    αριστερά ευθυγραμμισμένα είναι ένας απλός αλλά αποτελεσματικός τρόπος να στυλιστούν τους πίνακες HTML.

    Σημαντικοί κανόνες στυλ για πίνακες

    Οι πίνακες CSS και οι ιδιότητές τους λειτουργούν εξαιρετικά αν τα χρησιμοποιείτε σωστά. Υπάρχουν, ωστόσο, κάποιες λεπτομέρειες που πρέπει να θυμάστε. Για παράδειγμα, εάν εφαρμόσετε μια συγκεκριμένη οικογένεια γραμματοσειρών στο τραπέζι, αλλά στη συνέχεια διαφορετική από την κυψέλη - το κελί κερδίζει επειδή είναι το πραγματικό στοιχείο με το εσωτερικό κείμενο.

    Αυτές οι ιδιότητες είναι είτε μοναδικές στα στοιχεία πίνακα είτε συμπεριφέρονται μοναδικά σε στοιχεία πίνακα.

    κατακόρυφη ευθυγράμμιση

    Πιθανές τιμές: βασική γραμμή, δευτερεύουσα, σούπερ, κειμένου-κορυφή, κείμενο-κάτω, μέση, κορυφή, κάτω,%, μήκος

    Ευθυγραμμίζει το περιεχόμενο μέσα σε ένα κελί. Λειτουργεί ιδιαίτερα καλά στα τραπέζια, αν και μόνο το πάνω / κάτω / μεσαίο έχουν πολύ νόημα σε αυτό το πλαίσιο.

    λευκό-χώρο

    Πιθανές τιμές: κανονική, προ, μενού, προ-τυλίγματος, προ-γραμμής

    Ελέγχει τον τρόπο περιτυλίγματος του κειμένου σε ένα κελί. Ορισμένα δεδομένα ίσως πρέπει να είναι όλα σε μια γραμμή για να έχουν νόημα.

    συνόρων-κατάρρευση

    Πιθανές τιμές: κατάρρευση, ξεχωριστή

    Εφαρμόστηκε στο τραπέζι για να προσδιοριστεί εάν τα σύνορα καταρρέουν σε αυτά (κάτι σαν περιθώριο που καταρρέει μόνο δυο κατευθύνσεις) ή όχι. Τι γίνεται αν δύο σύνολα που συρρικνώνονται το ένα στο άλλο έχουν αντιφατικά στυλ (όπως το χρώμα); Τα στυλ που εφαρμόζονται σε αυτούς τους τύπους στοιχείων θα "κερδίσουν", κατά σειρά "δύναμης": κυψέλη, σειρά, ομάδα γραμμών, στήλη, ομάδα στηλών, πίνακας.

    απόσταση μεταξύ ορίων

    Πιθανές τιμές: μήκος

    Εάν η κατάρρευση των περιθωρίων είναι ξεχωριστή, μπορείτε να καθορίσετε την απόσταση μεταξύ τους. Η σύγχρονη έκδοση του χαρακτηριστικού cellspacing. Και μιλώντας για αυτό, padding είναι η σύγχρονη έκδοση του χαρακτηριστικού cellpadding.

    πλάτος

    Πιθανές τιμές: μήκος

    Το πλάτος δουλεύει σε κελιά πίνακα ακριβώς για το πώς θα το σκεφτόσαστε, εκτός από όταν υπάρχει κάποιο είδος σύγκρουσης.

    Για παράδειγμα, εάν πείτε στο τραπέζι το ίδιο πλάτος 400px, τότε το πρώτο κελί μιας γραμμής τριών κυψελίδων που έχει πλάτος 100px και αφήνει τους άλλους μόνο, το πρώτο κελί θα έχει πλάτος 100px και οι άλλοι δύο θα χωρίσουν το υπόλοιπο διάστημα .

    Αλλά αν πείτε ότι και οι τρεις από αυτές έχουν πλάτος 20000px, ο πίνακας θα είναι ακόμη 400px και θα δώσει μόνο σε κάθε ένα το ένα τρίτο του χώρου. Αυτό υποθέτει ότι το λευκό-χώρο ή στοιχεία όπως μια εικόνα δεν μπαίνουν στο παιχνίδι.

    σύνορο

    Πιθανές τιμές: μήκος

    Τα σύνορα λειτουργούν σε οποιοδήποτε από τα στοιχεία πίνακα και ακριβώς όπως θα περιμένατε. Οι ιδιορρυθμίες έρχονται όταν καταρρέουν τα σύνορα.

    Σε αυτήν την περίπτωση, όλα τα κελιά του πίνακα θα έχουν μόνο ένα πλάτος συνόρων μεταξύ τους, αντί για τα δύο που θα περίμενε κανείς να έχουν (δεξιά-δεξιά στο πρώτο κελί και αριστερά στα επόμενα κελιά).

    Προκειμένου να αφαιρεθεί ένα περιθώριο σε περιβάλλον που έχει συρρικνωθεί, και τα δύο κύτταρα πρέπει να "συμφωνήσουν" να το αφαιρέσουν. Σαν αυτό:

    td: nth-child (2) {περιθώριο-δεξιά: 0; }}
    td: nth-παιδί (3) {περιθώριο-αριστερά: 0; }}

    Διαφορετικά, η σειρά πηγής / εξειδίκευση κερδίζει ποιο όριο εμφανίζεται σε ποιο άκρο.

    διάταξη πίνακα

    Πιθανές τιμές: αυτόματη, σταθερή

    Αυτόματη είναι η προεπιλογή. Το πλάτος του πίνακα και των κυττάρων του εξαρτάται από το εσωτερικό του.

    Εάν αλλάξετε αυτό σε σταθερό, το πλάτος του πίνακα και της στήλης καθορίζεται από τα πλάτη των στοιχείων πίνακα και κολλητών ή από το πλάτος της πρώτης γραμμής των κελιών.

    Τα κελιά στις επόμενες σειρές δεν επηρεάζουν τα πλάτη της στήλης, γεγονός που μπορεί να επιταχύνει την απόδοση. Εάν το περιεχόμενο σε επόμενα κελιά δεν μπορεί να χωρέσει, η ιδιότητα υπερχείλισης καθορίζει τι συμβαίνει.

    Πίνακας περιγράμματος

    Το CSS για τα σύνορα του πίνακα διευκολύνει την προβολή του πίνακα και είναι επίσης η καλύτερη μέθοδος για την εμφάνιση των συνόρων. Προσθέστε στυλ, μέσα στις ετικέτες