Σπίτι Ασφάλεια Οριζόντια και κάθετη στοίχιση στοιχείων. Πώς να κάνετε στοίχιση κειμένου στο κέντρο, το πλάτος, τις άκρες της σελίδας σε HTML

Οριζόντια και κάθετη στοίχιση στοιχείων. Πώς να κάνετε στοίχιση κειμένου στο κέντρο, το πλάτος, τις άκρες της σελίδας σε HTML

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

1. Οριζόντια στοίχιση στο κέντρο του μπλοκ / σελίδας

1.1. Εάν το μπλοκ έχει πλάτος:

div (πλάτος: 300 εικονοστοιχεία, περιθώριο: 0 αυτόματα, /*κέντρωμα του στοιχείου οριζόντια εντός του γονικού μπλοκ*/ )

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

1.2. Εάν ένα μπλοκ είναι ένθετο σε ένα άλλο μπλοκ και δεν έχει οριστεί κανένα πλάτος για αυτό:

.wrapper(text-align:center;)

1.3. Εάν το μπλοκ έχει πλάτος και πρέπει να στερεωθεί στο κέντρο του γονικού μπλοκ:

.wrapper (θέση: σχετική; /*ρυθμίστε το γονικό πλαίσιο στη σχετική θέση, ώστε να μπορούμε να τοποθετήσουμε απολύτως το πλαίσιο μέσα σε αυτό αργότερα*/) .box (πλάτος: 400 εικονοστοιχεία; θέση: απόλυτο; αριστερά: 50%; περιθώριο-αριστερό: - 200 px; / *μετατόπιση του μπλοκ προς τα αριστερά κατά μια απόσταση ίση με το μισό του πλάτους του*/ )

1.4. Εάν δεν έχει οριστεί πλάτος για μπλοκ, μπορείτε να κεντράρετε χρησιμοποιώντας το γονικό μπλοκ περιτυλίγματος:

.wrapper (text-align: center; /*κεντράρετε το περιεχόμενο του μπλοκ*/) εσοχή μεταξύ των μπλοκ*/ )

2. Κάθετη ευθυγράμμιση

2.1. Εάν το κείμενο καταλαμβάνει μία γραμμή, για παράδειγμα, για κουμπιά και στοιχεία μενού:

.button (ύψος: 50 εικονοστοιχεία, ύψος γραμμής: 50 εικονοστοιχεία; )

2.2. Για να ευθυγραμμίσετε ένα μπλοκ κατακόρυφα μέσα στο γονικό μπλοκ:

.wrapper (θέση: σχετική

2.3. Κατακόρυφη στοίχιση ανά τύπο πίνακα:

.wrapper ( οθόνη: πίνακας, πλάτος: 100%; ) .box ( εμφάνιση: κελί πίνακα; ύψος: 100 εικονοστοιχεία, στοίχιση κειμένου: κέντρο, κατακόρυφη στοίχιση: μέση; )

2.4. Εάν το πλαίσιο έχει οριστεί πλάτος και ύψος και πρέπει να κεντραριστεί στο γονικό πλαίσιο:

.wrapper ( θέση: σχετική; ) .box ( ύψος: 100 εικονοστοιχεία; πλάτος: 100 εικονοστοιχεία; θέση: απόλυτη; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; περιθώριο: αυτόματη; υπερχείλιση: αυτόματη; /* έως το περιεχόμενο δεν διαδόθηκε */ )

2.5. Απόλυτη τοποθέτηση στο κέντρο της σελίδας/μπλοκ με χρήση μετασχηματισμού CSS3:

εάν το στοιχείο έχει διαστάσεις

div ( πλάτος: 300 px; /*ορίστε το πλάτος του μπλοκ*/ ύψος:100 px; /*ορίστε το ύψος του μπλοκ*/ μετασχηματισμός: translate(-50%, -50%); θέση: απόλυτη; επάνω: 50%; αριστερά: 50% ;)

εάν το στοιχείο δεν έχει διαστάσεις και δεν είναι κενό

Κάποιο κείμενο εδώ

h1 ( περιθώριο: 0; μετασχηματισμός: translate (-50%, -50%); θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; )

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

Παρακάτω είναι οι κύριοι τρόποι επίλυσης του προβλήματος, τα πλεονεκτήματα και τα μειονεκτήματά τους. Για να κατανοήσετε την ουσία των παραδειγμάτων, συνιστώ να μειώσετε το ύψος / το πλάτος του παραθύρου Αποτέλεσμα στα παραδείγματα στους συνδέσμους που υποδεικνύονται.

Επιλογή 1. Αρνητική επένδυση.

Τοποθέτηση ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟπάνω και αριστερά χαρακτηριστικά κατά 50%, και γνωρίζοντας εκ των προτέρων το ύψος και το πλάτος του μπλοκ, ορίστε ένα αρνητικό περιθώριο, το οποίο είναι ίσο με το μισό μέγεθος ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Τεράστιο μείον αυτή την επιλογήείναι ότι πρέπει να μετρήσετε αρνητικές εσοχές. Τον ίδιο τρόπο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟδεν συμπεριφέρεται σωστά στο περιβάλλον των γραμμών κύλισης - απλώς κόβεται επειδή έχει αρνητικές εσοχές.

Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block ( πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτο; επάνω: 50%, αριστερά : 50%; περιθώριο: -125 εικονοστοιχεία 0 0 -125 εικονοστοιχεία; img (μέγ. πλάτος: 100%; ύψος: αυτόματη; οθόνη: μπλοκ; περιθώριο: 0 αυτόματο; περίγραμμα: κανένα; ) )

Επιλογή 2: Αυτόματη εσοχή.

Λιγότερο κοινό, αλλά παρόμοιο με το πρώτο. Για ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟορίστε το πλάτος και το ύψος, τοποθετήστε τα χαρακτηριστικά πάνω δεξιά κάτω αριστερά σε 0 και ορίστε το αυτόματο περιθώριο. Το πλεονέκτημα αυτής της επιλογής είναι οι λειτουργικές γραμμές κύλισης μητρική εταιρεία, εάν το τελευταίο έχει 100% πλάτος και ύψος. Το μειονέκτημα αυτής της μεθόδου είναι το άκαμπτο μέγεθος.

Γονικό ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block (πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτη; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; περιθώριο: αυτόματο; img (μέγιστο πλάτος: 100%; ύψος: αυτόματο; οθόνη: μπλοκ; περιθώριο: 0 αυτόματο; περίγραμμα: κανένα; ) )

Επιλογή 3. Πίνακας.

Ρωτάμε μητρική εταιρείαστυλ πίνακα, κελί μητρική εταιρείαΡυθμίστε τη στοίχιση κειμένου στο κέντρο. ΑΛΛΑ συνασπισμόςορίστε το μοντέλο του ενσωματωμένου μπλοκ. Τα μειονεκτήματα δεν είναι οι λειτουργικές γραμμές κύλισης, και γενικά, όχι η αισθητική της «εξομοίωσης» του πίνακα.

Γονικός ( πλάτος: 100%; ύψος: 100%; οθόνη: πίνακας; θέση: απόλυτη; επάνω: 0; αριστερά: 0; > .inner ( οθόνη: πίνακας-κελί; στοίχιση κειμένου: κέντρο; κατακόρυφη στοίχιση: μέση; ) ) .block ( display: inline-block; img ( display: block; περίγραμμα: κανένα; ) )

Για να προσθέσετε μια κύλιση σε αυτό το παράδειγμα, θα πρέπει να προσθέσετε ένα ακόμη στοιχείο στη δομή.
Παράδειγμα: jsfiddle.net/serdidg/fk5nqh52/3 .

Επιλογή 4. Ψευδοστοιχείο.

Αυτή η επιλογή δεν περιέχει όλα τα προβλήματα που αναφέρονται στις προηγούμενες μεθόδους και επιλύει επίσης τις αρχικές εργασίες. Το θέμα είναι να έχεις μητρική εταιρείασετ στυλ ψευδοστοιχείοπριν, δηλαδή 100% ύψος, ευθυγράμμιση στο κέντρο και ενσωματωμένο μοντέλο κουτιού. Το ίδιο με ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟβάλτε το μοντέλο του ενσωματωμένου μπλοκ, στοίχιση στο κέντρο. Προς την ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟδεν έπεσε κάτω ψευδοστοιχείοόταν οι διαστάσεις του πρώτου είναι μεγαλύτερες από μητρική εταιρεία, προσδιορίστε μητρική εταιρείαλευκό διάστημα: nowrap και μέγεθος γραμματοσειράς: 0 μετά από το οποίο y ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟακυρώστε αυτά τα στυλ με το εξής - κενό διάστημα: κανονικό. ΣΤΟ αυτό το παράδειγμαμέγεθος γραμματοσειράς: Απαιτείται 0 για να αφαιρεθεί το κενό που προκύπτει μητρική εταιρείακαι ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟσε σχέση με τη μορφοποίηση κώδικα. Το κενό μπορεί να αφαιρεθεί με άλλους τρόπους, αλλά θεωρείται καλύτερο απλά να μην το επιτρέψετε.

Γονικός (πλάτος: 100%; ύψος: 100%, θέση: απόλυτο; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; λευκό διάστημα: nowrap; στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 0; &:πριν ( ύψος: 100%, οθόνη: ενσωματωμένο μπλοκ, κατακόρυφη στοίχιση: μέση, περιεχόμενο: ""; ) ) .block ( οθόνη: ενσωματωμένο μπλοκ; λευκό διάστημα: κανονικό, κατακόρυφη στοίχιση: μέση, στοίχιση κειμένου: αριστερά ; img ( εμφάνιση: μπλοκ, περίγραμμα: κανένα; ) )

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

Γονικός (θέση: σταθερό; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; υπερχείλιση: αυτόματο; κενό διάστημα: nowrap; στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 0; &:πριν (ύψος: 100%; οθόνη: inline-block; κατακόρυφη στοίχιση: μέση; περιεχόμενο: ""; ) ) .block ( εμφάνιση: inline-block; λευκό διάστημα: κανονικό; κατακόρυφη στοίχιση: μέση; στοίχιση κειμένου: αριστερά; img ( οθόνη: μπλοκ, περίγραμμα: κανένα; ) )

Επιλογή 5. Flexbox.

Ένας από τους απλούστερους και πιο κομψούς τρόπους είναι να χρησιμοποιήσετε το flexbox. Δεν απαιτεί περιττές κινήσεις του σώματος, περιγράφει την ουσία αυτού που συμβαίνει αρκετά ξεκάθαρα και έχει υψηλή ευελιξία. Το μόνο πράγμα που πρέπει να θυμάστε όταν επιλέγετε αυτή τη μέθοδο- υποστήριξη για IE από την έκδοση 10 συμπεριλαμβανομένης. caniuse.com/#feat=flexbox

Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: σταθερό; επάνω: 0; αριστερά: 0; οθόνη: flex; στοίχιση-στοιχεία: κέντρο; στοίχιση-περιεχόμενο: κέντρο; δικαιολογητικό-περιεχόμενο: κέντρο; υπερχείλιση: αυτόματη; ) .block ( φόντο: #60a839; img ( εμφάνιση: μπλοκ; περίγραμμα: κανένα; ) )

Επιλογή 6. Μετασχηματισμός.

Κατάλληλο αν περιοριζόμαστε από τη δομή και δεν υπάρχει τρόπος χειραγώγησης γονικό στοιχείο, και το μπλοκ πρέπει να ευθυγραμμιστεί με κάποιο τρόπο. Η συνάρτηση translate() css θα έρθει στη διάσωση. Με αξία 50% απόλυτη τοποθέτησηθα τοποθετήσει την επάνω αριστερή γωνία του πλαισίου ακριβώς στο κέντρο και, στη συνέχεια, μια αρνητική τιμή μετάφρασης θα μετακινήσει το πλαίσιο σε σχέση με τις δικές του διαστάσεις. Λάβετε υπόψη ότι τα αρνητικά εφέ μπορεί να εμφανιστούν με τη μορφή θολών άκρων ή στυλ γραμματοσειράς. Επίσης, μια παρόμοια μέθοδος μπορεί να οδηγήσει σε προβλήματα με τον υπολογισμό της θέσης του μπλοκ χρησιμοποιώντας java-script "a. Μερικές φορές, για να αντισταθμιστεί η απώλεια του 50% του πλάτους λόγω χρήση cssη αριστερή ιδιότητα μπορεί να βοηθηθεί από τον κανόνα που έχει οριστεί για το μπλοκ: margin-right: -50%; .

Γονικό (πλάτος: 100%; ύψος: 100%, θέση: σταθερό; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block (θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; μετατροπή: μετάφραση( -50%, -50%); img ( εμφάνιση: μπλοκ; ) )

Επιλογή 7. Κουμπί.

Επιλογή χρήστη όπου ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟτυλιγμένο σε ετικέτα κουμπιού. Το κουμπί έχει τη δυνατότητα να κεντράρει όλα όσα βρίσκονται μέσα του, δηλαδή τα στοιχεία του μοντέλου inline και block-line (inline-block). Δεν το προτείνω στην πράξη.

Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; φόντο: κανένα; περίγραμμα: κανένα; περίγραμμα: κανένα; ) .block ( οθόνη: ενσωματωμένο μπλοκ; img (εμφάνιση: μπλοκ;; περίγραμμα: κανένα; ) )

Δώρο

Χρησιμοποιώντας την ιδέα της 4ης επιλογής, μπορείτε να ορίσετε περιθώρια για ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ, και ταυτόχρονα το τελευταίο θα εμφανίζεται επαρκώς στο περιβάλλον των γραμμών κύλισης.
Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/2 .

Μπορείτε επίσης να ευθυγραμμίσετε την εικόνα στο κέντρο και εάν η εικόνα είναι μεγαλύτερη μητρική εταιρεία, κλιμακώστε το σε μέγεθος μητρική εταιρεία.
Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/3 .
Παράδειγμα μεγάλης εικόνας:

Βλαντ Μέρζεβιτς

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

Κάθετο κεντράρισμα

Ένας τρόπος για να δείξετε στον επισκέπτη την εστίαση και τον τίτλο του ιστότοπου είναι να χρησιμοποιήσετε μια σελίδα splash. Αυτή είναι η πρώτη σελίδα, στην οποία, κατά κανόνα, υπάρχει μια εισαγωγή flash ή μια εικόνα που εκφράζει την κύρια ιδέα του ιστότοπου. Η εικόνα είναι επίσης ένας σύνδεσμος προς άλλες ενότητες του ιστότοπου. Απαιτείται η τοποθέτηση αυτής της εικόνας στο κέντρο του παραθύρου του προγράμματος περιήγησης, ανεξάρτητα από την ανάλυση της οθόνης. Για το σκοπό αυτό, μπορείτε να χρησιμοποιήσετε ένα τραπέζι με πλάτος και ύψος ίσο με 100% (παράδειγμα 1).

Παράδειγμα 1: Κεντράρισμα εικόνας

ευθυγραμμία

Σε αυτό το παράδειγμα, η οριζόντια στοίχιση ορίζεται χρησιμοποιώντας την παράμετρο ετικέτας align="center". , και τα περιεχόμενα του κελιού δεν χρειάζεται να είναι κεντραρισμένα κατακόρυφα, καθώς αυτή η θέση έχει οριστεί από προεπιλογή.

Για να ορίσετε το ύψος του τραπεζιού στο 100%, αφαιρέστε, ο κωδικός δεν είναι πλέον έγκυρος.

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

Οριζόντια ευθυγράμμιση

Συνδυάζοντας τα χαρακτηριστικά align (οριζόντια στοίχιση) και valign ( κατακόρυφη στοίχιση) ετικέτα , επιτρέπεται η ρύθμιση πολλών τύπων θέσεων στοιχείων μεταξύ τους. Στο σχ. Το 1 δείχνει πώς να ευθυγραμμίσετε τα στοιχεία οριζόντια.

Ας δούμε μερικά παραδείγματα στοίχισης κειμένου σύμφωνα με το παρακάτω σχήμα.

Ευθυγράμμιση από πάνω

Για να καθορίσετε τη στοίχιση των περιεχομένων των κελιών στην κορυφή, για την ετικέτα απαιτείται να ορίσετε το χαρακτηριστικό valign με την τιμή επάνω (παράδειγμα 2).

Παράδειγμα 2: Χρήση valign

ευθυγραμμία

Στήλη 1

Στήλη 2

Σε αυτό το παράδειγμα, τα χαρακτηριστικά κελιών ελέγχονται χρησιμοποιώντας παραμέτρους ετικέτας , αλλά είναι επίσης πιο βολικό να αλλάζετε μέσα από στυλ. Συγκεκριμένα, η στοίχιση κελιών καθορίζεται από τις ιδιότητες κάθετης στοίχισης και στοίχισης κειμένου (παράδειγμα 3).

Παράδειγμα 3: Εφαρμογή στυλ για στοίχιση

ευθυγραμμία

Στήλη 1

Στήλη 2

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

Η στοίχιση από κάτω γίνεται με τον ίδιο τρόπο, αλλά χρησιμοποιείται κάτω αντί για πάνω.

Στοίχιση στο κέντρο

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

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

Παράδειγμα 4: Ευθυγράμμιση τύπου

ευθυγραμμία

(18.6)

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

Ευθυγράμμιση στοιχείων φόρμας

Οι πίνακες είναι χρήσιμοι για την τοποθέτηση πεδίων φόρμας, ειδικά όταν είναι διάσπαρτοι με κείμενο. Μία από τις επιλογές σχεδίασης για τη φόρμα, η οποία έχει σχεδιαστεί για να εισάγει ένα σχόλιο, φαίνεται στο Σχ. 3.

Προκειμένου το κείμενο κοντά στα πεδία της φόρμας να είναι δεξιά στοίχιση και τα ίδια τα στοιχεία της φόρμας να είναι στοίχιση αριστερά, χρειάζεστε έναν πίνακα με ένα αόρατο περίγραμμα και δύο στήλες. Η αριστερή στήλη θα περιέχει το ίδιο το κείμενο και η δεξιά στήλη θα περιέχει πεδία κειμένου (παράδειγμα 5).

Παράδειγμα 5 Ευθυγράμμιση πεδίων φόρμας

ευθυγραμμία

Σε αυτό το παράδειγμα, το χαρακτηριστικό align="right" έχει προστεθεί για κελιά που απαιτούν σωστή στοίχιση. Προκειμένου η ετικέτα "Σχόλιο" να βρίσκεται στο επάνω περίγραμμα του κειμένου πολλών γραμμών, το αντίστοιχο κελί ρυθμίζεται σε στοίχιση από πάνω χρησιμοποιώντας το χαρακτηριστικό valign.