Τα χαρακτηριστικά του πίνακα HTML σας δίνουν πολύ μεγαλύτερο έλεγχο στους πίνακες HTML. Υπάρχουν πολλά χαρακτηριστικά διαθέσιμα στα τραπέζια για να τα κάνετε πιο ενδιαφέροντα και να αλλάξετε την εμφάνιση της σελίδας σας.
Χαρακτηριστικά στοιχείου στοιχείου HTML TABLE
Στο HTML5 το στοιχείο χρησιμοποιεί τα γενικά χαρακτηριστικά και ένα άλλο χαρακτηριστικό:. Και έχει αλλάξει μόνο για να έχει αξία 1 ή άδειο (δηλ. border = ""). Εάν θέλετε να αλλάξετε το πλάτος του περιγράμματος, θα πρέπει να χρησιμοποιήσετε το πλάτος του πλαισίου Ιδιότητα CSS.
Δείτε παρακάτω για να μάθετε σχετικά με τα έγκυρα χαρακτηριστικά πίνακα HTML5.
Υπάρχουν επίσης πολλά χαρακτηριστικά που αποτελούν μέρος της προδιαγραφής HTML 4.01 που έχει ξεπεραστεί στην HTML5:
- -Χρήσε το CSS
υλικό παραγεμίσματοςιδιοκτησία στο τραπέζιTDκαιΘστοιχεία. - -Χρήση της ιδιότητας CSS
απόσταση μεταξύ των ορίωνπάνω στο τραπέζι. - -Χρήση στυλ CSS
Χρώμα περιγράμματος: μαύρο.καιμεθοριακό στυλπάνω στο τραπέζι. - -Χρήση στυλ CSS
Χρώμα περιγράμματος: μαύρο.καιμεθοριακό στυλσχετικά με τα κατάλληλα στοιχεία του πίνακα. - - Αντ 'αυτού, θα πρέπει να περιγράψετε τη δομή του πίνακα σε ένα
ΛΕΖΑΝΤΑή να τοποθετήσετε ολόκληρο τον πίνακα σε έναΦΙΓΟΥΡΑκαι την περιγραφή του σε έναΣΧΗΜΑ. Εναλλακτικά, θα μπορούσατε να απλοποιήσετε τη δομή του τραπεζιού, ώστε να μην χρειάζεται καμία εξήγηση. - -Χρήσε το CSS
πλάτοςιδιοκτησία.
Και ένα χαρακτηριστικό που καταργήθηκε στο HTML 4.01 και είναι επίσης παρωχημένο σε HTML5.
Μάθετε περισσότερα σχετικά με τα Χαρακτηριστικά ΠΙΝΑΚΑ HTML 4.01.
ευθυγραμμίζω-Χρήσε το CSSπεριθώριοιδιότητα αντί.
Υπάρχουν επίσης πολλά χαρακτηριστικά που δεν αποτελούν μέρος οποιασδήποτε προδιαγραφής HTML. Χρησιμοποιήστε αυτά τα χαρακτηριστικά αν γνωρίζετε ότι τα προγράμματα περιήγησης που υποστηρίζετε μπορούν να τα χειριστούν και δεν σας ενδιαφέρει έγκυρο HTML.
- -Χρήση της ιδιότητας CSS
χρώμα του φόντουαντι αυτου. χρώμα πλαισίου-Χρήση της ιδιότητας CSSχρώμα πλαισίουαντι αυτου.bordercolorlight-Χρήση της ιδιότητας CSSχρώμα πλαισίουαντι αυτου.bordercolordarkark-Χρήση της ιδιότητας CSSχρώμα πλαισίουαντι αυτου.cols-Δεν υπάρχει άλλη εναλλακτική λύση σε αυτό το χαρακτηριστικό.ύψος-Χρήση της ιδιότητας CSSύψοςαντι αυτου.- -Χρήση της ιδιότητας CSS
περιθώριοαντι αυτου. - -Χρήση της ιδιότητας CSS
περιθώριοαντι αυτου. - -Χρήση της ιδιότητας CSS
λευκό-χώροαντι αυτου. - -Χρήση της ιδιότητας CSS
κατακόρυφη ευθυγράμμισηαντι αυτου.
Μάθετε περισσότερα σχετικά με τα Χαρακτηριστικά ΠΙΝΑΚΑΣ για το συγκεκριμένο πρόγραμμα περιήγησης.
Χαρακτηριστικά στοιχείου στοιχείου HTML5 ΠΙΝΑΚΑ
Όπως αναφέρθηκε παραπάνω, υπάρχει μόνο ένα χαρακτηριστικό, πέρα από τις παγκόσμιες ιδιότητες, που ισχύει σε ένα HTML5 ΤΡΑΠΕΖΙ στοιχείο: σύνορο.
ο σύνορο attribute χρησιμοποιείται για τον ορισμό ενός περιγράμματος γύρω από ολόκληρο τον πίνακα και όλα τα κελιά μέσα σε αυτόν. Υπήρχε κάποια ερώτηση σχετικά με το εάν θα συμπεριληφθεί στην προδιαγραφή HTML5, αλλά παρέμεινε επειδή παρείχε πληροφορίες σχετικά με τη δομή του πίνακα, πέρα από απλές επιπτώσεις στυλ.
Για να προσθέσετε το σύνορο , ορίζετε την τιμή σε 1 αν υπάρχει ένα περιθώριο και κενό (ή να αφήσετε εκτός από το χαρακτηριστικό) αν δεν υπάρχει. Τα περισσότερα προγράμματα περιήγησης θα υποστηρίξουν επίσης 0 χωρίς σύνορα και οποιαδήποτε άλλη ακέραια τιμή (2, 3, 30, 500, κλπ) για να δηλώσει το πλάτος των συνόρων σε εικονοστοιχεία, αλλά αυτό είναι ξεπερασμένο σε HTML5. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε τις ιδιότητες στυλ περιγράμματος CSS για να ορίσετε το πλάτος των περιθωρίων και άλλα στυλ.
Για να δημιουργήσετε έναν πίνακα με ένα περίγραμμα, γράψτε:
border = "1" >
Πρόκειται για ένα τραπέζι με σύνορα
Υπάρχουν ιδιότητες HTML 4.01 που είναι ξεπερασμένες στο HTML5. Αν σκοπεύετε να γράψετε έγγραφα HTML 4.01, μπορείτε να τα μάθετε, διαφορετικά, μπορείτε να τα αγνοήσετε. Τα περισσότερα από αυτά τα χαρακτηριστικά έχουν εναλλακτικές λύσεις, που περιγράφονται παραπάνω.
Περιγράφουμε τα χαρακτηριστικά του στοιχείου που ισχύουν σε HTML5 (και HTML 4.01). Αυτό περιγράφει τοΤΡΑΠΕΖΙ ιδιότητες που ισχύουν στο 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 pixels.
Προβάλετε ένα παράδειγμα πίνακα με cellpadding
Το χαρακτηριστικό καθορίζει το μέγεθος του χώρου μεταξύ των κελιών του πίνακα και του περιεχομένου κυψέλης. Σανκυτταρίτιδα, η προεπιλεγμένη τιμή ορίζεται σε δύο εικονοστοιχεία, οπότε πρέπει να την ορίσετε0 αν δεν θέλετε διαστήματα κελιών.
Για να προσθέσετε απόσταση κελιών σε έναν πίνακα, γράψτε:
<> cellspacing = "20" > Αυτός ο πίνακας έχει ένα cellspacing από 20. Τα κύτταρα θα διαχωριστούν κατά 20 εικονοστοιχεία.
Δείτε έναν πίνακα με κυψέλη κυψέλης
Το χαρακτηριστικό προσδιορίζει ποια τμήματα του περιγράμματος που περιβάλλει το εξωτερικό ενός πίνακα θα είναι ορατά.Μπορείτε να πλαισιώσετε το τραπέζι σας και στις τέσσερις πλευρές, σε οποιαδήποτε πλευρά, επάνω και κάτω, αριστερά και δεξιά ή κανένα.
Εδώ είναι το HTML για έναν πίνακα με μόνο το αριστερό πλευρικό όριο:
frame = "lhs" >
Αυτός ο πίνακας θα έχω μόνο το αριστερά πλαισιωμένο.
Και ένα άλλο παράδειγμα με το κάτω πλαίσιο:
frame = "κάτω" >
Αυτός ο πίνακας έχει ένα πλαίσιο στο κάτω μέρος.
Ελέγξτε μερικά τραπέζια με πλαίσια
Το χαρακτηριστικό είναι παρόμοιο με τοπλαίσιο attribute, επηρεάζει μόνο τα σύνορα γύρω από τα κελιά του πίνακα. Μπορείτε να ορίσετε κανόνες σε όλα τα κελιά, μεταξύ των στηλών, μεταξύ ομάδων όπωςTBODY καιTFOOT ή καμία.
Για να δημιουργήσετε ένα τραπέζι με γραμμές μόνο μεταξύ των γραμμών, γράψτε:
κανόνες = "σειρές" >
Αυτός ο πίνακας 4x4 έχει οι σειρές όχι οι στήλες που περιγράφονται με το χαρακτηριστικό κανόνων.
Και ένα άλλο με γραμμές ανάμεσα στις στήλες:
κανόνες = "cols" >
Αυτό είναι ένα τραπέζι όπου το στήλες είναι επισημάνθηκε
Ακολουθεί ένα παράδειγμα ενός πίνακα με κανόνες
Το χαρακτηριστικό παρέχει πληροφορίες σχετικά με τον πίνακα για συσκευές ανάγνωσης οθόνης και άλλους χρήστες που ενδέχεται να έχουν πρόβλημα κατά την ανάγνωση των πινάκων. Για να χρησιμοποιήσετε τοπερίληψη attribute, γράφετε μια σύντομη περιγραφή του πίνακα και το βάζετε ως την αξία του χαρακτηριστικού. Η περίληψη δεν θα εμφανίζεται στην ιστοσελίδα στα περισσότερα τυπικά προγράμματα περιήγησης ιστού.
Εδώ είναι πώς να γράψετε ένα απλό πίνακα με μια σύνοψη:
<> 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 ή τοmargin-left: auto; καιmargin-right: auto; στυλ. οφλοτέρ property σας δίνει ένα αποτέλεσμα που είναι πιο κοντά σε αυτό που τοευθυγραμμίζω παρέχεται, αλλά μπορεί να επηρεάσει τον τρόπο εμφάνισης του υπόλοιπου περιεχομένου της σελίδας. οmargin-right: auto; καιmargin-left: auto; είναι αυτό που συνιστά το W3C ως εναλλακτική λύση.
Εδώ είναι ένα παράδειγμα που έχει καταργηθεί χρησιμοποιώντας τοευθυγραμμίζω Χαρακτηριστικό:
<> align = "right" > Αυτός ο πίνακας είναι ευθυγραμμισμένος Το κείμενο ρέει γύρω από αυτό προς τα αριστερά
Δείτε ένα παράδειγμα που έχει καταργηθεί χρησιμοποιώντας τοευθυγραμμίζω Χαρακτηριστικό.
Και για να αποκτήσετε το ίδιο αποτέλεσμα με έγκυρο (μη υποτιμημένο) HTML, γράψτε:
<> style = "float: right" > Αυτός ο πίνακας είναι ευθυγραμμισμένος Το κείμενο ρέει γύρω από αυτό προς τα αριστερά
Ακολουθούν τα παρακάτωΤΡΑΠΕΖΙ χαρακτηριστικά που δεν αποτελούν μέρος οποιασδήποτε προδιαγραφής HTML.
Οι προηγούμενες πληροφορίες περιγράφουν χαρακτηριστικά του στοιχείου HTML που ισχύουν στο HTML 4.01 αλλά είναι ξεπερασμένα σε HTML5.
Περιγράφονται τα ακόλουθαΤΡΑΠΕΖΙ χαρακτηριστικά που δεν ισχύουν σε οποιαδήποτε τρέχουσα προδιαγραφή. Αν δεν σας ενδιαφέρει αν οι σελίδες σας επικυρώνονται και οι χρήστες σας χρησιμοποιούν ένα πρόγραμμα περιήγησης που υποστηρίζει αυτά τα στοιχεία, τότε μπορείτε να χρησιμοποιήσετε αυτά τα στοιχεία. Αλλά οι περισσότεροι από αυτούς είτε δεν υποστηρίζονται στα σύγχρονα προγράμματα περιήγησης είτε έχουν εναλλακτικές λύσεις που είναι πιο συμβατές με τα πρότυπα.
Δεν συνιστούμε να χρησιμοποιείτε αυτά τα χαρακτηριστικά στους πίνακες HTML.
Το χαρακτηριστικό είναι ένα παλιό χαρακτηριστικό που συμπεριλήφθηκε πριν υποστηριχθεί ευρέως το CSS. Σας επιτρέπει να αλλάξετε το χρώμα φόντου του πίνακα. Μπορείτε να ορίσετε ένα όνομα χρώματος ή έναν δεκαεξαδικό κώδικα. Αυτό το χαρακτηριστικό εξακολουθεί να λειτουργεί σε πολλά προγράμματα περιήγησης, αλλά για μελλοντική HTML, δεν θα πρέπει να το χρησιμοποιήσετε και να χρησιμοποιήσετε το CSS.
Η καλύτερη εναλλακτική λύση σε αυτό το χαρακτηριστικό είναι η ιδιότητα στυλ.
Για να αλλάξετε το χρώμα φόντου ενός πίνακα, γράψτε:
<> style = "background-color: #ccc;" > Αυτός ο πίνακας έχει γκρίζο φόντο
Παρόμοιο με τοbgcolor χαρακτηριστικό, τοχρώμα πλαισίου attribute σας επιτρέπει να αλλάξετε το χρώμα του χαρακτηριστικού. Αυτό το χαρακτηριστικό υποστηρίζεται μόνο από τον Internet Explorer. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε την ιδιότητα στυλ χρώματος περιγράμματος.
Για να αλλάξετε το χρώμα του περιγράμματος του τραπεζιού σας, γράψτε:
style = "border-color: red"; >
Αυτός ο πίνακας έχει κόκκινο περίγραμμα.
οbordercolorlight καιbordercolordarkark τα χαρακτηριστικά συμπεριλήφθηκαν στον Internet Explorer για να σας επιτρέψουν να δημιουργήσετε ένα τρισδιάστατο περίγραμμα γύρω από τον πίνακα σας. Ωστόσο, από IE8 και άνω, αυτό υποστηρίζεται μόνο στο IE7 Mode Mode και Quirks Mode. Η Microsoft αναφέρει ότι αυτές οι ιδιότητες δεν υποστηρίζονται πλέον.
Για ένα μικρό χρονικό διάστημα, τοcols χαρακτηριστικό στοΤΡΑΠΕΖΙ Το στοιχείο προτάθηκε για να βοηθήσει τους browsers να γνωρίζουν πόσες στήλες είχε ένας πίνακας. Η προϋπόθεση ήταν ότι αυτό θα βοηθούσε στην επιτάχυνση της εκτέλεσης μεγάλων τραπεζιών. Ωστόσο, εφαρμόστηκε μόνο από τον Internet Explorer, και από IE8 και άνω, αυτό υποστηρίζεται μόνο από το IE7 Mode Mode και Quirks Mode.
Επειδή υπάρχει aπλάτος χαρακτηριστικό (παρωχημένο σε HTML5) πολλοί άνθρωποι υπολόγισαν ότι υπήρχε αύψος χαρακτηριστικό για πίνακες επίσης. Αλλά επειδή οι πίνακες συμμορφώνονται με το πλάτος του περιεχομένου τους ή το καθορισμένο πλάτος στο CSS ήπλάτος χαρακτηριστικό, το ύψος δεν μπορούσε να περιοριστεί. Έτσι, αντί αυτού, τα προγράμματα περιήγησης επέτρεψαν τούψος attribute για να ορίσετε το ελάχιστο ύψος του πίνακα. Εάν το τραπέζι ήταν ψηλότερο από αυτό το ύψος, θα εμφανίζονταν ψηλότερα. Αλλά πρέπει να χρησιμοποιήσετε την ιδιοκτησία
Με το 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 = "white-space: nowrap;" > Αυτή είναι μια στήλη με έναν τόνο περιεχομένου. Αλλά ακόμα κι αν είναι ευρύτερο από το δοχείο, το κείμενο δεν πρέπει να τυλίγεται στην επόμενη γραμμή, αλλά να αναγκάσει το παράθυρο του προγράμματος περιήγησης να μετακινηθεί οριζόντια για να δει όλο το περιεχόμενο.
Τέλος, το χαρακτηριστικό καθορίζει πώς τα περιεχόμενα κάθε κελιού πρέπει να ευθυγραμμίζονται κάθετα μέσα στο κελί. Αντί αυτού του άκυρου χαρακτηριστικού, θα πρέπει να χρησιμοποιήσετε την ιδιότητα CSS σε κάθε κελιά που θέλετε να αλλάξετε την ευθυγράμμιση. Δεν θα παρατηρήσετε τα αποτελέσματα αυτού του στυλ, εκτός αν το περιεχόμενο του κελιού είναι μικρότερο από τον διαθέσιμο χώρο που δημιουργείται από άλλα, μεγαλύτερα κελιά.
Για να αναγκάσετε μια κυψέλη να ευθυγραμμιστεί προς τα κάτω (αντί για τη μέση, ως προεπιλογή), γράψτε:
Αυτό το κελί είναι μεγαλύτερο από το υπόλοιπο και έτσι θα αναγκάσει το ύψος να είναι ψηλότερο. Έτσι θα δείτε ότι η κάθετα ευθυγραμμισμένη κυψέλη ευθυγραμμίζεται προς τα κάτω. <> style = "vertical-align: bottom" > Περιεχόμενα στο κάτω μέρος. Περιεχόμενα στη μέση.
