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