Αξιοποιήστε στο έπακρο τους πίνακες HTML εκπληρώνοντας τα χαρακτηριστικά πίνακα
Τα χαρακτηριστικά του πίνακα HTML σας δίνουν πολύ μεγαλύτερο έλεγχο στους πίνακες HTML. Υπάρχουν πολλά χαρακτηριστικά διαθέσιμα στα τραπέζια για να τα κάνετε πιο ενδιαφέροντα και να αλλάξετε την εμφάνιση της σελίδας σας.
Χαρακτηριστικά στοιχείου στοιχείου HTML TABLE
Στο HTML5 το στοιχείο χρησιμοποιεί τα γενικά χαρακτηριστικά και ένα άλλο χαρακτηριστικό:. Και έχει αλλάξει για να έχει μόνο την τιμή 1 ή άδειο (δηλαδή border = ""). Αν θέλετε να αλλάξετε το πλάτος του περιγράμματος, θα πρέπει να χρησιμοποιήσετε την ιδιότητα CSS για το πλάτος περιθωρίου.
Δείτε παρακάτω για να μάθετε σχετικά με τα έγκυρα χαρακτηριστικά πίνακα HTML5.
Υπάρχουν επίσης πολλά χαρακτηριστικά που αποτελούν μέρος της προδιαγραφής HTML 4.01 που έχει ξεπεραστεί στην HTML5:
- -Χρησιμοποιήστε την ιδιότητα γεμίσματος CSS στα στοιχεία TD και TH του πίνακα.
- -Χρησιμοποιήστε την απόσταση των ορίων της ιδιότητας CSS στο τραπέζι.
- -Χρήση στυλ CSS border-color: μαύρο. και το μεθοριακό στυλ στο τραπέζι.
- -Χρήση στυλ CSS border-color: μαύρο. και το στυλ των συνόρων στα κατάλληλα στοιχεία του πίνακα.
- - Αντ 'αυτού, θα πρέπει να περιγράψετε τη δομή του πίνακα σε ένα CAPTION ή να τοποθετήσετε ολόκληρο τον πίνακα σε ένα ΣΧΕΔΙΟ και να το περιγράψετε σε ΕΙΚΟΝΑ. Εναλλακτικά, θα μπορούσατε να απλοποιήσετε τη δομή του τραπεζιού, ώστε να μην χρειάζεται καμία εξήγηση.
- -Χρήση της ιδιότητας πλάτους CSS.
Και ένα χαρακτηριστικό που καταργήθηκε στο HTML 4.01 και είναι επίσης παρωχημένο σε HTML5.
Μάθετε περισσότερα σχετικά με τα Χαρακτηριστικά ΠΙΝΑΚΑ HTML 4.01.
- ευθυγράμμιση - Χρησιμοποιήστε την ιδιότητα περιθωρίου CSS.
Υπάρχουν επίσης πολλά χαρακτηριστικά που δεν αποτελούν μέρος οποιασδήποτε προδιαγραφής HTML.
Χρησιμοποιήστε αυτά τα χαρακτηριστικά αν γνωρίζετε ότι τα προγράμματα περιήγησης που υποστηρίζετε μπορούν να τα χειριστούν και δεν σας ενδιαφέρει έγκυρο HTML.
- -Χρησιμοποιήστε το χρώμα φόντου της ιδιότητας CSS.
- bordercolor - Χρησιμοποιήστε το χρώμα περιγράμματος ιδιοκτησίας CSS.
- bordercolorlight - Χρησιμοποιήστε το χρώμα περιγράμματος ιδιότητας CSS.
- bordercolordark - Χρησιμοποιήστε το χρώμα περιγράμματος ιδιοκτησίας CSS.
- cols-Δεν υπάρχει εναλλακτική λύση σε αυτό το χαρακτηριστικό.
- height - Χρησιμοποιήστε το ύψος ιδιότητας CSS.
- -Χρησιμοποιήστε το περιθώριο ιδιοτήτων CSS.
- -Χρησιμοποιήστε το περιθώριο ιδιοτήτων CSS.
- -Αντίθετα χρησιμοποιήστε το λευκό-χώρο της ιδιότητας CSS.
- -Χρησιμοποιήστε την ιδιότητα CSS κατακόρυφα-ευθυγράμμιση αντ 'αυτού.
Μάθετε περισσότερα σχετικά με τα Χαρακτηριστικά ΠΙΝΑΚΑΣ για το συγκεκριμένο πρόγραμμα περιήγησης.
Χαρακτηριστικά στοιχείου στοιχείου HTML5 ΠΙΝΑΚΑ
Όπως αναφέρθηκε παραπάνω, υπάρχει ένα μόνο χαρακτηριστικό, πέρα από τα παγκόσμια χαρακτηριστικά, που ισχύει σε ένα στοιχείο HTML5 TABLE: σύνορο.
Το χαρακτηριστικό συνόρων χρησιμοποιείται για τον ορισμό ενός περιγράμματος γύρω από ολόκληρο τον πίνακα και όλα τα κελιά μέσα σε αυτόν. Υπήρχε κάποια ερώτηση σχετικά με το εάν θα συμπεριληφθεί στην προδιαγραφή HTML5, αλλά παρέμεινε επειδή παρείχε πληροφορίες σχετικά με τη δομή του πίνακα, πέρα από απλές επιπτώσεις στυλ.
Για να προσθέσετε το χαρακτηριστικό περιγράμματος, ορίστε την τιμή σε 1 εάν υπάρχει ένα περιθώριο και είναι κενό (ή αφήστε το χαρακτηριστικό) εάν δεν υπάρχει. Τα περισσότερα προγράμματα περιήγησης θα υποστηρίζουν επίσης το 0 χωρίς σύνορα και οποιαδήποτε άλλη ακέραια τιμή (2, 3, 30, 500 κ.λπ.) για να δηλώσει το πλάτος των συνόρων σε εικονοστοιχεία, αλλά αυτό είναι ξεπερασμένο στο HTML5. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε τις ιδιότητες στυλ περιγράμματος CSS για να ορίσετε το πλάτος των περιθωρίων και άλλα στυλ.
Για να δημιουργήσετε έναν πίνακα με ένα περίγραμμα, γράψτε:
border = "1" >
Αυτός είναι ένας πίνακας με περιθώριο
Υπάρχουν ιδιότητες HTML 4.01 που είναι ξεπερασμένες στο HTML5. Αν σκοπεύετε να γράψετε έγγραφα HTML 4.01, μπορείτε να τα μάθετε, διαφορετικά, μπορείτε να τα αγνοήσετε. Τα περισσότερα από αυτά τα χαρακτηριστικά έχουν εναλλακτικές λύσεις, που περιγράφονται παραπάνω.
Περιγράφουμε τα χαρακτηριστικά του στοιχείου που ισχύουν σε HTML5 (και HTML 4.01). Αυτό περιγράφει τα χαρακτηριστικά γνωρίσματα TABLE που ισχύουν στο HTML 4.01, αλλά είναι ξεπερασμένα σε HTML5. Αν εξακολουθείτε να γράφετε έγγραφα HTML 4.01, μπορείτε να χρησιμοποιήσετε αυτά τα χαρακτηριστικά, αλλά τα περισσότερα από αυτά έχουν εναλλακτικές λύσεις που θα κάνουν τις σελίδες σας πιο προστατευμένες από το μέλλον όταν μεταβαίνετε σε HTML5.
Ισχύοντα χαρακτηριστικά HTML 4.01
Το χαρακτηριστικό που περιγράψαμε παραπάνω.
Η μόνη διαφορά στο HTML 4.01 από το HTML5 είναι ότι μπορείτε να ορίσετε οποιονδήποτε ολόκληρο ακέραιο αριθμό (0, 1, 2, 15, 20, 200, κλπ.) Για να ορίσετε το πλάτος του περιγράμματος σε εικονοστοιχεία.
Για να δημιουργήσετε ένα τραπέζι με περίγραμμα 5px, γράψτε:
border = "5" >
Αυτός ο πίνακας έχει ένα περιθώριο 5px.
Δείτε ένα παράδειγμα δύο πινάκων με σύνορα.
Το χαρακτηριστικό καθορίζει το μέγεθος του χώρου μεταξύ των συνόλων κυψελών και των περιεχομένων του κελιού. Η προεπιλογή είναι δύο εικονοστοιχεία. Ρυθμίστε την κυτταρική σμίκρυνση στο 0 αν δεν θέλετε κενό μεταξύ των περιεχομένων και των ορίων.
Για να ρυθμίσετε την επένδυση κυττάρων σε 20, γράψτε:
cellpadding = "20" >
Αυτός ο πίνακας έχει μια κυψελίδα 20.
Τα σύνορα κελιών θα διαχωριστούν κατά 20 εικονοστοιχεία.
Προβάλετε ένα παράδειγμα πίνακα με cellpadding
Το χαρακτηριστικό καθορίζει το μέγεθος του χώρου μεταξύ των κελιών του πίνακα και του περιεχομένου κυψέλης. Όπως και η κυτταρίνη, η προεπιλεγμένη τιμή έχει οριστεί σε δύο εικονοστοιχεία, οπότε πρέπει να την ορίσετε στο 0 εάν δεν θέλετε διαστήματα κυψελών.
Για να προσθέσετε απόσταση κελιών σε έναν πίνακα, γράψτε:
< tablespace cell = "20" >
Αυτός ο πίνακας έχει κυψέλη 20.
Τα κελιά διαχωρίζονται κατά 20 εικονοστοιχεία.
Δείτε έναν πίνακα με κυψέλη κυψέλης
Το χαρακτηριστικό προσδιορίζει ποια τμήματα του περιγράμματος που περιβάλλει το εξωτερικό ενός πίνακα θα είναι ορατά. Μπορείτε να πλαισιώσετε το τραπέζι σας και στις τέσσερις πλευρές, σε οποιαδήποτε πλευρά, επάνω και κάτω, αριστερά και δεξιά ή κανένα.
Εδώ είναι το HTML για έναν πίνακα με μόνο το αριστερό πλευρικό όριο:
πλαίσιο = "lhs" >
Αυτός ο πίνακας
θα έχει
μόνο το
πλαισιωμένη στην αριστερή πλευρά.
Και ένα άλλο παράδειγμα με το κάτω πλαίσιο:
frame = "κάτω" >
Αυτός ο πίνακας έχει ένα πλαίσιο στο κάτω μέρος.
Ελέγξτε μερικά τραπέζια με πλαίσια
Το χαρακτηριστικό είναι παρόμοιο με το χαρακτηριστικό πλαισίου, επηρεάζει μόνο τα περιγράμματα γύρω από τα κελιά του πίνακα. Μπορείτε να ορίσετε κανόνες σε όλα τα κελιά, μεταξύ των στηλών, μεταξύ ομάδων όπως TBODY και TFOOT ή κανένας.
Για να δημιουργήσετε ένα τραπέζι με γραμμές μόνο μεταξύ των γραμμών, γράψτε:
κανόνες = "γραμμές" >
Αυτός ο πίνακας 4x4 έχει
οι σειρές όχι οι στήλες
που περιγράφονται με το
χαρακτηριστικό κανόνων.
Και ένα άλλο με γραμμές ανάμεσα στις στήλες:
κανόνες = "cols" >
Αυτό είναι
ένας πίνακας
όπου
στήλες
είναι
επισημαίνονται
Ακολουθεί ένα παράδειγμα ενός πίνακα με κανόνες
Το χαρακτηριστικό παρέχει πληροφορίες σχετικά με τον πίνακα για συσκευές ανάγνωσης οθόνης και άλλους χρήστες που ενδέχεται να έχουν πρόβλημα κατά την ανάγνωση των πινάκων. Για να χρησιμοποιήσετε το χαρακτηριστικό σύνοψης, γράφετε μια σύντομη περιγραφή του πίνακα και το βάζετε ως την τιμή του χαρακτηριστικού. Η περίληψη δεν θα εμφανίζεται στην ιστοσελίδα στα περισσότερα τυπικά προγράμματα περιήγησης ιστού.
Εδώ είναι πώς να γράψετε ένα απλό πίνακα με μια σύνοψη:
summary = "Αυτός είναι ένας πίνακας δειγμάτων που περιέχει πληροφορίες πλήρωσης. Σκοπός αυτού του πίνακα είναι να δείξει μια σύνοψη." >
στήλη 1 σειρά 1
στήλη 2 σειρά 1
στήλη 1 σειρά 2
στήλη 2 σειρά 2
Προβολή πίνακα με σύνοψη
Το χαρακτηριστικό καθορίζει το πλάτος του πίνακα σε εικονοστοιχεία ή ως ποσοστό του στοιχείου του δοχείου. Εάν το πλάτος δεν έχει οριστεί, ο πίνακας θα διαρκέσει μόνο τον ίδιο χώρο που χρειάζεται για την εμφάνιση των περιεχομένων, με μέγιστο πλάτος ίδιο με το πλάτος του γονικού στοιχείου.
Για να δημιουργήσετε ένα τραπέζι με συγκεκριμένο πλάτος σε εικονοστοιχεία, γράψτε:
< πλάτος πίνακα = "300" >
Αυτός ο πίνακας είναι το 80% του πλάτους του περιέκτη που βρίσκεται.
Και για να δημιουργήσετε ένα τραπέζι με πλάτος που είναι ένα ποσοστό του γονικού στοιχείου, γράψτε:
< πλάτος πίνακα = "80%" >
Αυτός ο πίνακας είναι το 80% του πλάτους του περιέκτη που βρίσκεται.
Δείτε ένα παράδειγμα πίνακα με πλάτος
Απορριφθέν χαρακτηριστικό HTML 4.01 TABLE
Υπάρχει ένα χαρακτηριστικό του στοιχείου ΠΙΝΑΚΑ που έχει καταργηθεί στο HTML 4.01 και παρωχημένο σε HTML5: ευθυγράμμιση . Αυτό το χαρακτηριστικό σας επιτρέπει να ορίσετε πού να βρίσκεται ο πίνακας στη σελίδα σε σχέση με το κείμενο που βρίσκεται δίπλα του. Αυτό το χαρακτηριστικό έχει καταργηθεί στο HTML 4.01 και θα πρέπει να το αποφύγετε. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε την ιδιότητα CSS ή το αριστερό περιθώριο: auto; και margin-right: auto; στυλ. Η ιδιότητα float σας δίνει ένα αποτέλεσμα που είναι πιο κοντά σε αυτό που παρέχει το χαρακτηριστικό ευθυγράμμισης, αλλά μπορεί να επηρεάσει τον τρόπο εμφάνισης του υπόλοιπου περιεχομένου της σελίδας. Το περιθώριο-δεξιά: αυτόματα. και περιθώριο αριστερά: αυτόματα. είναι αυτό που συνιστά το W3C ως εναλλακτική λύση.
Εδώ είναι ένα παράδειγμα που έχει καταργηθεί χρησιμοποιώντας το χαρακτηριστικό ευθυγράμμισης:
align = "right" >
Αυτός ο πίνακας είναι ευθυγραμμισμένος σωστά
Το κείμενο κυλάει γύρω του προς τα αριστερά
Δείτε ένα παράδειγμα που έχει καταργηθεί χρησιμοποιώντας το χαρακτηριστικό ευθυγράμμισης.
Και για να αποκτήσετε το ίδιο αποτέλεσμα με έγκυρο (μη υποτιμημένο) HTML, γράψτε:
style = "float: right" >
Αυτός ο πίνακας είναι ευθυγραμμισμένος σωστά
Το κείμενο κυλάει γύρω του προς τα αριστερά
Τα παρακάτω εξηγούν χαρακτηριστικά TABLE που δεν αποτελούν μέρος οποιασδήποτε προδιαγραφής HTML.
Οι προηγούμενες πληροφορίες περιγράφουν χαρακτηριστικά του στοιχείου HTML που ισχύουν στο HTML 4.01 αλλά είναι ξεπερασμένα σε HTML5.
Τα παρακάτω περιγράφουν τα χαρακτηριστικά πίνακα που δεν ισχύουν σε οποιαδήποτε τρέχουσα προδιαγραφή. Αν δεν σας ενδιαφέρει αν οι σελίδες σας επικυρώνονται και οι χρήστες σας χρησιμοποιούν ένα πρόγραμμα περιήγησης που υποστηρίζει αυτά τα στοιχεία, τότε μπορείτε να χρησιμοποιήσετε αυτά τα στοιχεία. Αλλά οι περισσότεροι από αυτούς είτε δεν υποστηρίζονται στα σύγχρονα προγράμματα περιήγησης είτε έχουν εναλλακτικές λύσεις που είναι πιο συμβατές με τα πρότυπα.
Δεν συνιστούμε να χρησιμοποιείτε αυτά τα χαρακτηριστικά στους πίνακες HTML.
Το χαρακτηριστικό είναι ένα παλιό χαρακτηριστικό που συμπεριλήφθηκε πριν υποστηριχθεί ευρέως το CSS. Σας επιτρέπει να αλλάξετε το χρώμα φόντου του πίνακα. Μπορείτε να ορίσετε ένα όνομα χρώματος ή έναν δεκαεξαδικό κώδικα. Αυτό το χαρακτηριστικό εξακολουθεί να λειτουργεί σε πολλά προγράμματα περιήγησης, αλλά για μελλοντική HTML, δεν θα πρέπει να το χρησιμοποιήσετε και να χρησιμοποιήσετε το CSS.
Η καλύτερη εναλλακτική λύση σε αυτό το χαρακτηριστικό είναι η ιδιότητα στυλ.
Για να αλλάξετε το χρώμα φόντου ενός πίνακα, γράψτε:
style = "χρώμα φόντου: # ccc;" >
Αυτός ο πίνακας έχει γκρίζο φόντο
Παρόμοια με το χαρακτηριστικό bgcolor, το χαρακτηριστικό bordercolor σάς επιτρέπει να αλλάξετε το χρώμα του χαρακτηριστικού. Αυτό το χαρακτηριστικό υποστηρίζεται μόνο από τον Internet Explorer. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε την ιδιότητα στυλ χρώματος περιγράμματος.
Για να αλλάξετε το χρώμα του περιγράμματος του τραπεζιού σας, γράψτε:
style = "χρώμα περιγράμματος: κόκκινο" >
Αυτός ο πίνακας έχει κόκκινο περίγραμμα.
Τα χαρακτηριστικά bordercolorlight και bordercolordark συμπεριλήφθηκαν στον Internet Explorer για να σας επιτρέψουν να δημιουργήσετε ένα 3D περίγραμμα γύρω από τον πίνακα σας. Ωστόσο, από IE8 και άνω, αυτό υποστηρίζεται μόνο στο IE7 Mode Mode και Quirks Mode . Η Microsoft αναφέρει ότι αυτές οι ιδιότητες δεν υποστηρίζονται πλέον.
Για ένα μικρό χρονικό διάστημα, το χαρακτηριστικό cols στο στοιχείο TABLE προτάθηκε για να βοηθήσει τους browsers να γνωρίζουν πόσα στήλες είχε ένας πίνακας. Η προϋπόθεση ήταν ότι αυτό θα βοηθούσε στην επιτάχυνση της εκτέλεσης μεγάλων τραπεζιών. Ωστόσο, εφαρμόστηκε μόνο από τον Internet Explorer, και από IE8 και άνω, αυτό υποστηρίζεται μόνο από το IE7 Mode Mode και Quirks Mode.
Επειδή υπάρχει ένα χαρακτηριστικό πλάτους (παρωχημένο σε HTML5) πολλοί άνθρωποι υποθέτουν ότι υπήρχε και ένα χαρακτηριστικό ύψους για πίνακες επίσης. Αλλά επειδή οι πίνακες συμμορφώνονται με το πλάτος του περιεχομένου τους ή το καθορισμένο πλάτος στο χαρακτηριστικό CSS ή πλάτος, το ύψος δεν μπορεί να περιοριστεί. Αντίθετα, τα προγράμματα περιήγησης επέτρεψαν το χαρακτηριστικό ύψους να καθορίσει το ελάχιστο ύψος του πίνακα. Εάν το τραπέζι ήταν ψηλότερο από αυτό το ύψος, θα εμφανίζονταν ψηλότερα. Αλλά πρέπει να χρησιμοποιήσετε την ιδιοκτησία
Με την ιδιότητα ύψους CSS μπορείτε να περιορίσετε το ύψος αν χρησιμοποιείτε επίσης την ιδιότητα CSS για να καθορίσετε τι συμβαίνει με οποιοδήποτε πλεονάζον περιεχόμενο.
Για να ορίσετε το ελάχιστο ύψος σε ένα τραπέζι, γράψτε:
style = "height: 30em;" >
Αυτός ο πίνακας είναι τουλάχιστον 30 ems υψηλός.
Τα δύο χαρακτηριστικά και πρόσθετος χώρος γύρω από την αριστερή / δεξιά πλευρά (hspace) και πάνω / κάτω (vspace) του πίνακα. Πρέπει να χρησιμοποιήσετε την ιδιότητα στυλ.
Για να ορίσετε τον κάθετο χώρο σε 20 εικονοστοιχεία και τον οριζόντιο χώρο σε 40 pixels, γράψτε:
style = "margin: 20px 40px;"
Αυτός ο πίνακας έχει vspace 20 pixels και hspace 40 pixels.
Το χαρακτηριστικό είναι ένα χαρακτηριστικό boolean που καθορίζει αν τα περιεχόμενα του πίνακα πρέπει να τυλίγονται στην άκρη του γονικού στοιχείου ή του παραθύρου ή να εξαναγκάζουν την οριζόντια κύλιση. Αντ 'αυτού, θα πρέπει να ορίσετε τα χαρακτηριστικά περιτυλίγματος κάθε κελιά πίνακα χρησιμοποιώντας την ιδιότητα CSS.
Για να κάνετε μια στήλη με πολλά κείμενα που δεν τυλίγονται, γράψτε:
style = "λευκό-space: nowrap;" > Αυτή είναι μια στήλη με έναν τόνο περιεχομένου. Αλλά ακόμα και αν είναι ευρύτερο από το δοχείο, το κείμενο δεν πρέπει να τυλίγεται στην επόμενη γραμμή, αλλά να αναγκάσει το παράθυρο του προγράμματος περιήγησης να μετακινηθεί οριζόντια για να δει όλο το περιεχόμενο.
Τέλος, το χαρακτηριστικό καθορίζει πώς τα περιεχόμενα κάθε κελιού πρέπει να ευθυγραμμίζονται κάθετα μέσα στο κελί. Αντί αυτού του άκυρου χαρακτηριστικού, θα πρέπει να χρησιμοποιήσετε την ιδιότητα CSS σε κάθε κελιά που θέλετε να αλλάξετε την ευθυγράμμιση. Δεν θα παρατηρήσετε τα αποτελέσματα αυτού του στυλ, εκτός αν το περιεχόμενο του κελιού είναι μικρότερο από τον διαθέσιμο χώρο που δημιουργείται από άλλα, μεγαλύτερα κελιά.
Για να αναγκάσετε μια κυψέλη να ευθυγραμμιστεί προς τα κάτω (αντί για τη μέση, ως προεπιλογή), γράψτε:
Αυτό το κελί είναι μεγαλύτερο από το υπόλοιπο και έτσι θα υποχρεώσει το ύψος να είναι ψηλότερο. Έτσι, θα δείτε ότι η κάθετα ευθυγραμμισμένη κυψέλη ευθυγραμμίζεται προς τα κάτω.
style = "κατακόρυφη ευθυγράμμιση: κάτω" > Περιεχόμενα στο κάτω μέρος.
Περιεχόμενα στη μέση.