Μέγεθος πίνακα html ανά περιεχόμενο.

Table, th, td ( περίγραμμα: 1px συμπαγές μαύρο; ) Δοκιμάστε »

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

Ακόμα κι αν αφαιρέσετε τα κενά μεταξύ των κελιών χρησιμοποιώντας την τιμή της ιδιότητας διάστιχο περιγράμματος 0, τα περιγράμματα των κελιών θα ακουμπήσουν το ένα το άλλο, διπλασιάζοντας το μέγεθος. Για να συνδυάσετε περιγράμματα κελιών, χρησιμοποιήστε την ιδιότητα σύμπτυξη περιγράμματος. Μπορεί να έχει δύο έννοιες:

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

Μέγεθος τραπεζιού

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

Th, td ( padding: 7px; ) Δοκιμάστε »

Το μέγεθος ενός τραπεζιού εξαρτάται από το περιεχόμενό του, αλλά συχνά προκύπτουν καταστάσεις όταν το τραπέζι είναι πολύ στενό και καθίσταται απαραίτητο να το τεντώσετε. Το πλάτος και το ύψος του πίνακα μπορούν να αλλάξουν χρησιμοποιώντας τις ιδιότητες πλάτους και ύψους, ορίζοντας τις επιθυμητές διαστάσεις είτε στον ίδιο τον πίνακα είτε στα κελιά:

Πίνακας (πλάτος: 70%; ) ου (ύψος: 50 px; ) Δοκιμάστε »

Στοίχιση κειμένου

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

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

• κορυφή: το κείμενο στοιχίζεται στο επάνω περίγραμμα του κελιού
• μέση: στοιχίζει το κείμενο στο κέντρο (προεπιλογή)
• bottom: το κείμενο στοιχίζεται στο κάτω περίγραμμα του κελιού

Εναλλαγή του χρώματος φόντου των σειρών του πίνακα

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

Η προσθήκη ενός χαρακτηριστικού κλάσης σε κάθε άλλη γραμμή είναι αρκετά κουραστική. Το pseudo-class:nth-child προστέθηκε στο CSS3 για να παρέχει μια εναλλακτική λύση σε αυτό το πρόβλημα. Τώρα το εφέ παρεμβολής μπορεί να επιτευχθεί μόνο με χρήση CSS, χωρίς να καταφύγουμε στην αλλαγή της σήμανσης HTML του εγγράφου. Χρησιμοποιώντας την ψευδο-κλάση:nth-child, μπορείτε να επιλέξετε όλες τις ζυγές ή περιττές σειρές ενός πίνακα χρησιμοποιώντας μία από τις λέξεις-κλειδιά: ζυγός (άρτιος) ή περιττός (μονός):

Tr:nth-child(odd) (χρώμα φόντου: #EAF2D3; ) Δοκιμάστε »

Αλλαγή φόντου σειράς κατά την τοποθέτηση του δείκτη

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

Η εφαρμογή ενός τέτοιου εφέ είναι πολύ απλή για να γίνει αυτό, πρέπει να προσθέσετε μια ψευδο-κλάση: τοποθετήστε τον δείκτη του ποντικιού στον επιλογέα σειρών του πίνακα και να ορίσετε το επιθυμητό χρώμα φόντου:

Tr:hover (χρώμα φόντου: #E0E0FF; ) Δοκιμάστε »

Ευθυγράμμιση ενός τραπεζιού στο κέντρο

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

Πίνακας ( περιθώριο: 10 px auto; ) Δοκιμάστε »

Εάν χρειάζεστε διαφορετικά περιθώρια στο επάνω και στο κάτω μέρος του πίνακα, μπορείτε να ορίσετε την ιδιότητα περιθωρίου σε τρεις τιμές: η πρώτη θα είναι υπεύθυνη για το επάνω περιθώριο, η δεύτερη για την οριζόντια στοίχιση και η τρίτη για το κάτω περιθώριο:

Πίνακας ( περιθώριο: 10 px auto 30 px; )

3.5. Πλάτος και ύψος πίνακα και κελιών

Το πλάτος του πίνακα καθορίζεται από το χαρακτηριστικό width του στοιχείου TABLE. Η τιμή μπορεί να καθοριστεί τόσο σε απόλυτες μονάδες (πλάτος = 2 5 0") όσο και σε σχετικές μονάδες (πλάτος = 80%"). Για παράδειγμα, ορίζοντας το πλάτος στα 600 pixel, μπορείτε να είστε σίγουροι ότι ο πίνακας θα χωράει στο παράθυρο του προγράμματος περιήγησης σε οποιαδήποτε ανάλυση οθόνης. Εάν το πλάτος καθορίζεται ως ποσοστό, τότε υπολογίζονται από το πλάτος του παραθύρου του προγράμματος περιήγησης ή από το πλάτος του κελιού ενός άλλου πίνακα στον οποίο έχει εισαχθεί αυτός. Το ίδιο μπορεί να γίνει με το ύψος του πίνακα χρησιμοποιώντας το χαρακτηριστικό height.

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

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

Στο Σχ. Τα 3.9 και 3.10 δείχνουν δύο πίνακες με το ίδιο περιεχόμενο, αλλά διαφορετικά πλάτη και ύψη.

Ρύζι. 3.9.Το πλάτος του πίνακα είναι το 80% του πλάτους του παραθύρου του προγράμματος περιήγησης

Ρύζι. 3.10.Το πλάτος και το ύψος του πίνακα είναι 300 pixel

Το πλάτος του πρώτου πίνακα είναι το 80% του μεγέθους του παραθύρου του προγράμματος περιήγησης και η πρώτη στήλη αυτού του πίνακα είναι το 50% του συνολικού πλάτους του πίνακα. Το ύψος της πρώτης γραμμής είναι 100 pixel.

Ο δεύτερος πίνακας είναι τετράγωνος, το πλάτος της πλευράς είναι 300 pixel. Οι καταχωρίσεις 3.4 και 3.5 εμφανίζουν κωδικούς για τις σελίδες που περιέχουν τους περιγραφόμενους πίνακες.

Λίστα 3.4.Πλάτος κωδικού πίνακα 80% του πλάτους του παραθύρου του προγράμματος περιήγησης

Λίστα 3.5.Κωδικός πίνακα πλάτους 300 pixel

Οι τιμές του πλάτους και του ύψους του πίνακα μπορούν να καθοριστούν είτε ως απόλυτη τιμή (σε pixel) είτε ως σχετική τιμή - ως ποσοστό. Για παράδειγμα, 20 px και 20% αντίστοιχα.

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

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

Πλάτος: αυτόματο;

Ύψος: αυτόματο;

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

Καθορισμός μεγεθών μεμονωμένων κελιών και στηλών

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

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

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

1. Δώστε στα κελιά ονόματα μεμονωμένων κλάσεων. Θα μοιάζει με αυτό: class="cell-50px"

   Και μετά από αυτό θα πρέπει να εφαρμόσετε στυλ για αυτές τις τάξεις.

2. Ενεργοποίηση χαρακτηριστικού στυλ, μέσα στο οποίο γράψτε τον απαραίτητο κώδικα CSS.

Στην πράξη, η δεύτερη επιλογή θα μοιάζει με αυτό: