Πίνακας-διάταξη - CSS-Κόλπα

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

table ( table-layout: fixed; )

Όπως εξηγείται στην προδιαγραφή CSS2.1, η διάταξη του πίνακα γενικά είναι θέμα γεύσης και θα ποικίλει ανάλογα με τις επιλογές του σχεδιασμού. Τα προγράμματα περιήγησης, ωστόσο, θα εφαρμόσουν αυτόματα ορισμένους περιορισμούς που θα καθορίσουν τον τρόπο διάταξης των πινάκων. Αυτό συμβαίνει όταν η table-layoutιδιότητα έχει οριστεί σε auto(η προεπιλογή). Αλλά αυτοί οι περιορισμοί μπορούν να αρθούν όταν table-layoutρυθμιστεί σε fixed.

Αξίες

auto: η προεπιλεγμένη. Ο αυτόματος αλγόριθμος του προγράμματος περιήγησης χρησιμοποιείται για να καθορίσει τον τρόπο διάταξης των γραμμών, κελιών και στηλών ενός πίνακα. Η προκύπτουσα διάταξη πίνακα εξαρτάται γενικά από το περιεχόμενο του πίνακα.
fixed: Με αυτήν την τιμή, η διάταξη του πίνακα αγνοεί το περιεχόμενο και αντ 'αυτού χρησιμοποιεί το πλάτος του πίνακα, οποιοδήποτε καθορισμένο πλάτος στηλών και τις τιμές διαχωριστικών περιθωρίων και κελιών. Οι τιμές στήλης που χρησιμοποιούνται βασίζονται σε πλάτη που ορίζονται σε στήλες ή κελιά για την πρώτη σειρά του πίνακα.
inherit: δηλώνει ότι η τιμή κληρονομείται από την table-layoutτιμή του γονέα της

Προκειμένου μια τιμή fixedνα έχει οποιοδήποτε αποτέλεσμα, το πλάτος του πίνακα πρέπει να οριστεί σε κάτι διαφορετικό από το auto(η προεπιλογή για την widthιδιότητα). Στις παρακάτω επιδείξεις, όλα τα πλάτη του πίνακα έχουν οριστεί στο 100%, το οποίο υποθέτει ότι θέλουμε ο πίνακας να γεμίσει ο γονικός περιέκτης του οριζόντια.

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

Δείτε το Pen Demo για την ιδιότητα διάταξης πίνακα CSS από τον Louis Lazaris (@impressivewebs) στο CodePen.

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

Εάν κάνετε κλικ στο κουμπί "Εναλλαγή διάταξης πίνακα: σταθερό", θα δείτε πώς μοιάζει η διάταξη του πίνακα όταν χρησιμοποιείται ο αλγόριθμος "σταθερή". Όταν table-layout: fixedεφαρμόζεται, το περιεχόμενο δεν υπαγορεύει πλέον τη διάταξη, αλλά αντ 'αυτού, το πρόγραμμα περιήγησης χρησιμοποιεί τυχόν καθορισμένα πλάτη από την πρώτη σειρά του πίνακα για να καθορίσει τα πλάτη της στήλης. Εάν δεν υπάρχουν πλάτη στην πρώτη σειρά, τα πλάτη της στήλης διαιρούνται εξίσου στον πίνακα, ανεξάρτητα από το περιεχόμενο μέσα στα κελιά.

Περαιτέρω παραδείγματα μπορεί να σας βοηθήσουν να το καταστήσετε πιο σαφές. Στην παρακάτω επίδειξη, ο πίνακας έχει ένα στοιχείο του οποίου το πρώτο στοιχείο έχει πλάτος 400px. Σημειώστε σε αυτήν την περίπτωση, η εναλλαγή table-layout: fixedδεν έχει αποτέλεσμα.

Δείτε το Pen Demo για την ιδιότητα διάταξης πίνακα CSS από τον Louis Lazaris (@impressivewebs) στο CodePen.

Αυτό συμβαίνει επειδή ο προεπιλεγμένος αλγόριθμος διάταξης λέει ουσιαστικά «κάντε την πρώτη στήλη πλάτος 400px και διανείμετε τις υπόλοιπες στήλες με βάση το περιεχόμενό τους». Δεδομένου ότι οι άλλες τρεις στήλες έχουν το ίδιο περιεχόμενο μεταξύ τους, δεν θα υπάρξει καμία αλλαγή. Αλλά τώρα ας προσθέσουμε επιπλέον περιεχόμενο κειμένου σε μία από τις άλλες στήλες:

Δείτε το Pen Demo για την ιδιότητα διάταξης πίνακα CSS με πλάτος στήλης και μεταβλητό περιεχόμενο από τον Louis Lazaris (@ impressivewebs) στο CodePen.

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

Πώς ένας αλγόριθμος σταθερής διάταξης καθορίζει τα πλάτη των στηλών

Οι ακόλουθες δύο επιδείξεις θα βοηθήσουν στην κατανόηση ότι η πρώτη σειρά του πίνακα είναι αυτό που βοηθά στον καθορισμό του πλάτους στηλών ενός πίνακα table-layout: fixed.

Δείτε το Pen Demo για τη διάταξη πίνακα του CSS με το κελί στη σειρά 1 δεδομένου καθορισμένου πλάτους από τον Louis Lazaris (@ impressivewebs) στο CodePen.

Στην παραπάνω επίδειξη, το πρώτο κελί στην πρώτη σειρά του πίνακα έχει πλάτος 350 εικονοστοιχεία. Η εναλλαγή table-layout: fixedπροσαρμόζει τις άλλες στήλες, αλλά η πρώτη παραμένει η ίδια. Τώρα δοκιμάστε την ακόλουθη επίδειξη:

Δείτε το Pen Demo για τη διάταξη πίνακα του CSS με το κελί στη σειρά 2 που έχει καθορισμένο πλάτος από τον Louis Lazaris (@ impressivewebs) στο CodePen.

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

Οφέλη ενός αλγορίθμου σταθερής διάταξης

Τα αισθητικά οφέλη από τη χρήση table-layout: fixedπρέπει να είναι ξεκάθαρα από τις παραπάνω επιδείξεις. Αλλά το άλλο σημαντικό όφελος είναι η απόδοση. Η προδιαγραφή αναφέρεται στον σταθερό αλγόριθμο ως «γρήγορο» αλγόριθμο, και για καλό λόγο. Το πρόγραμμα περιήγησης δεν χρειάζεται να αναλύσει ολόκληρο το περιεχόμενο του πίνακα πριν καθορίσει το μέγεθος των στηλών. χρειάζεται μόνο να αναλύσει την πρώτη σειρά. Έτσι το αποτέλεσμα είναι μια ταχύτερη επεξεργασία της διάταξης του πίνακα.