Μέγεθος γραμματοσειράς σε κελί html. Μέθοδοι επιλογής κειμένου. Καθορισμός μεγεθών μεμονωμένων κελιών και στηλών
Οι διαστάσεις του πίνακα, το ύψος και το πλάτος του, καθορίζονται αυτόματα ανάλογα με το τι περιέχουν τα κελιά μέσα τους. Όσο περισσότερο περιεχόμενο στα κελιά, τόσο μεγαλύτερο είναι το μέγεθος του πίνακα και το αντίστροφο.
Ωστόσο, οι δυνατότητες CSS σάς επιτρέπουν να αλλάξετε το μέγεθος ενός πίνακα σε HTML, προσδιορίζοντας ακριβώς το πλάτος και το ύψος που χρειάζεστε. Για να είμαστε δίκαιοι, θα πρέπει να σημειωθεί ότι τα χαρακτηριστικά του πίνακα σάς επιτρέπουν επίσης να ορίσετε τις επιθυμητές διαστάσεις. Ωστόσο, προς το παρόν θα μιλήσουμε μόνο για CSS.
Πρέπει να τονιστεί ότι κάθε πίνακας έχει το δικό του ελάχιστο πλάτος και ελάχιστο ύψος, τα οποία επηρεάζονται από το περιεχόμενό του. Και ακόμη και αν ορίσετε τις τιμές πλάτους και ύψους ακόμη μικρότερες, δεν θα συμβεί τίποτα. Οι πλευρές του τραπεζιού δεν θα υπερβαίνουν το ελάχιστο τους.
Για να καθορίσετε το πλάτος του πίνακα πρέπει να χρησιμοποιήσετε μια ιδιότητα CSS πλάτος, και για να ορίσετε το ύψος πρέπει να χρησιμοποιήσετε την ιδιότητα ύψος.
Σε ένα παράδειγμα μοιάζει με αυτό.
Πίνακας (πλάτος: 500 εικονοστοιχεία, ύψος: 100 εικονοστοιχεία; )
Αποτέλεσμα στο πρόγραμμα περιήγησης:
Πλήρης κωδικός:
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
Οι τιμές πλάτους και ύψους του πίνακα μπορούν να καθοριστούν είτε ως απόλυτη τιμή (σε pixel) είτε ως σχετική τιμή - ως ποσοστό. Για παράδειγμα, 20 px και 20% αντίστοιχα.
Εάν χρησιμοποιείτε ποσοστά για να ορίσετε διαστάσεις πίνακα, θα υπολογιστούν με βάση τις διαστάσεις του γονικού στοιχείου. Αν μιλάμε για το παράδειγμά μας, μιλάμε για ένα παράθυρο προγράμματος περιήγησης.
Υπάρχει μια άλλη έννοια - αυτόματο. Και είναι ιδιαίτερο γιατί με τη βοήθειά του, το πλάτος και το ύψος του τραπεζιού υπολογίζονται αυτόματα, από προεπιλογή. Στην πράξη, ο καθορισμός αυτής της τιμής μοιάζει με αυτό.
Πλάτος: αυτόματο;
Ύψος: αυτόματο;
Θα θέλαμε να επιστήσουμε την προσοχή σας σε ένα άλλο σημαντικό σημείο. Είναι καλύτερα να μην αναφέρετε το ύψος ως ποσοστό, καθώς, κατά κανόνα, σε αυτή την περίπτωση δεν θα λειτουργήσουν.
Καθορισμός των μεγεθών μεμονωμένων κελιών και στηλών
Εάν πιστεύετε ότι το πρόγραμμα περιήγησης δεν όρισε σωστά το πλάτος των στηλών με βάση τα περιεχόμενα των κελιών, τότε έχετε το δικαίωμα να καθορίσετε μόνοι σας τα μεγέθη των κελιών και των στηλών. Και τώρα θα μιλήσουμε για το πώς να αλλάξετε το μέγεθος του κελιού σε έναν πίνακα HTML.
Η αλλαγή μεγέθους κελιών γίνεται χρησιμοποιώντας τις ίδιες ιδιότητες CSS με τα μεγέθη πινάκων, και συγκεκριμένα: πλάτοςΚαι ύψος.
Για να προσθέσετε στυλ σε κελιά, μπορείτε να χρησιμοποιήσετε μία από τις δύο επιλογές:
- Δώστε στα κελιά ονόματα μεμονωμένων κλάσεων. Θα μοιάζει με αυτό: class="cell-50px"
Και μετά από αυτό θα πρέπει να εφαρμόσετε στυλ για αυτές τις τάξεις.
- Ενεργοποίηση χαρακτηριστικού στυλ, μέσα στο οποίο γράψτε τον απαραίτητο κώδικα CSS.
Στην πράξη, η δεύτερη επιλογή θα μοιάζει με αυτό:
Ωστόσο, θα θέλαμε να σημειώσουμε ότι δεν είναι απαραίτητο να αλλάζετε πολύ συχνά τα μεγέθη των κελιών ξεχωριστά. Κατά κανόνα, αυτό γίνεται σε περιπτώσεις όπου είναι απαραίτητο να οριστεί ένα ορισμένο πλάτος για στήλες πίνακα. Σε αυτή την περίπτωση, το πρόβλημα επιλύεται ευκολότερα. Απλά πρέπει να καθορίσετε το πλάτος των κελιών στην πρώτη σειρά.
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
Αποτέλεσμα στο πρόγραμμα περιήγησης: 
Πώς να αλλάξετε το μέγεθος της γραμματοσειράς σε έναν πίνακα
Συχνά υπάρχει ανάγκη αλλαγής του μεγέθους του κειμένου σε έναν πίνακα. Για παράδειγμα, σε κελιά κεφαλίδας. Αυτό μπορεί να γίνει χρησιμοποιώντας μια ιδιότητα CSS μέγεθος γραμματοσειράς. Ας ορίσουμε το μέγεθος γραμματοσειράς για τα στοιχεία
Th (μέγεθος γραμματοσειράς: 30 px; )
Αυτό ολοκληρώνει αυτό το μάθημα. Σας προτείνω να σκεφτείτε προσεκτικά την εργασία σας. Απλά μελετήστε το προσεκτικά και σκεφτείτε το. Ό,τι καλύτερο σε όλους!
Φαίνεται, γιατί να γνωρίζετε ετικέτες HTML για κείμενο, αν τώρα σχεδόν κάθε πίνακας διαχειριστή έχει ένα βολικό που τις ορίζει αυτόματα;
Το γεγονός είναι ότι η μορφοποίηση περιεχομένου σε έναν ιστότοπο διαφέρει θεμελιωδώς από την εργασία σε εφαρμογές γραφείου. Εδώ δεν αρκεί απλώς να δίνουμε στο κείμενο μια ελκυστική εμφάνιση, γιατί από το σωστό σχεδιασμό εξαρτάται όχι μόνο η εμφάνιση μιας ιστοσελίδας, αλλά και η προώθησή της στις μηχανές αναζήτησης.
Ετικέτες και χαρακτηριστικά HTML: Βασική σύνταξη
Οποιοδήποτε κείμενο έχει έναν κρυφό κωδικό που «εξηγεί» στον υπολογιστή τι και πώς πρέπει να εμφανίζεται στην οθόνη. Όλες οι πληροφορίες καταγράφονται χρησιμοποιώντας ένα σύνολο καθολικών στοιχείων.
Ουσιαστικά, οι ετικέτες κειμένου HTML είναι εντολές που προσθέτουν ορισμένα μπλοκ σε μια σελίδα ή αλλάζουν την εμφάνισή τους. Η σωστή μορφή εγγραφής μοιάζει με αυτό:
Λάβετε υπόψη ότι δεν είναι όλες οι ετικέτες ζευγαρωμένες. Για παράδειγμα,
(παράλειψη γραμμής) ή
(προσθέτοντας μια οριζόντια γραμμή) δεν χρειάζεται να κλείσει καθόλου.
Γιατί δεν μπορείτε να αντιγράψετε άρθρα από το Word και άλλα προγράμματα στο πρόγραμμα επεξεργασίας ιστότοπου
Αν και τα σύγχρονα προγράμματα γραφείου χρησιμοποιούν τις ίδιες ετικέτες HTML για κείμενο, το 99% του χρόνου ο εγγενής κώδικας δεν μπορεί να χρησιμοποιηθεί για ιστοσελίδες. Ακόμα κι αν το έγγραφο εμφανίζεται κανονικά στην ίδια την εφαρμογή, όταν εισάγεται σε έναν ιστότοπο, η μορφοποίηση μπορεί να χαθεί. Επιπλέον, λόγω του μεγάλου αριθμού περιττών ετικετών και χαρακτηριστικών, οι μηχανές αναζήτησης δεν μπορούν να αναλύσουν επαρκώς το περιεχόμενο της σελίδας. Το οποίο, με τη σειρά του, καθιστά δύσκολη την προώθηση του πόρου σας.
Για να αποκτήσετε καθαρό και σχετικό κώδικα, πρέπει πρώτα να καθαρίσετε το κείμενο των ετικετών HTML που δημιουργούνται από έναν κανονικό επεξεργαστή. Υπάρχουν διάφοροι τρόποι για να γίνει αυτό:
- «Εκτελέστε» το άρθρο μέσω του Σημειωματάριου και μόνο μετά τοποθετήστε το στον ιστότοπο. Η εφαρμογή διαγράφει όλο το HTML, οπότε μετά από αυτό θα πρέπει να μορφοποιήσετε ξανά το κείμενο (χρησιμοποιώντας τα εργαλεία επεξεργασίας ή χειροκίνητα).
- Γράψτε και δημοσιεύστε άρθρα χρησιμοποιώντας το LiveWriter. Ο δημοφιλής επεξεργαστής ιστολογίου δημιουργεί αμέσως τον σωστό κώδικα. Και σε μια ξεχωριστή καρτέλα μπορείτε να δείτε πώς θα φαίνεται το κείμενο στον ιστότοπο.
- Χρησιμοποιήστε το HTML Cleaner. Αυτή η διαδικτυακή υπηρεσία δεν καταστρέφει ολόκληρο τον κώδικα, αλλά μόνο περιττά τμήματα. Χρησιμοποιώντας φίλτρα, επιλέγετε ποιες ετικέτες θέλετε να αποθηκεύσετε. Υπάρχει επίσης ένα ισχυρό πρόγραμμα επεξεργασίας οπτικής μορφοποίησης που προσθέτει ήδη βελτιστοποιημένες εντολές στον κώδικα.
Παράγραφοι
Αυτό το στοιχείο υπάρχει σχεδόν σε όλα τα άρθρα. Κάθε παράγραφος πρέπει να βρίσκεται μέσα σε ένα τέτοιο κοντέινερ - αυτό απλοποιεί τη μορφοποίηση και σας επιτρέπει να διατηρείτε ένα συνεπές στυλ σε όλες τις σελίδες του ιστότοπου. Για ευκολία, η ετικέτα
Να γράφετε πάντα σε νέα γραμμή.
Ευθυγραμμία
Η ξεχωριστή ετικέτα HTML "Text Alignment" δεν έχει χρησιμοποιηθεί για μεγάλο χρονικό διάστημα. Αντίθετα, δημιουργήθηκε ένα γενικό χαρακτηριστικό ALIGN. Για να αλλάξετε τη θέση ενός μπλοκ κειμένου στη σελίδα, πρέπει να επιλέξετε μία από τις 3 τιμές - CENTER, RIGHT ή LEFT. Μπορείτε να ορίσετε τη στοίχιση για άλλα στοιχεία, όπως επικεφαλίδες, με τον ίδιο τρόπο.
Σε ορισμένες περιπτώσεις, άλλες ετικέτες χρησιμοποιούνται για ευθυγράμμιση, για παράδειγμα, μπορείτε να τοποθετήσετε χρησιμοποιώντας το στοιχείο
Επικεφαλίδες και υπότιτλοι
Το σύστημα υποτίτλων σας επιτρέπει να δημιουργήσετε μια λογική δομή περιεχομένου. Όταν το κείμενο χωρίζεται σε μπλοκ με νόημα, είναι πολύ πιο εύκολο για τον αναγνώστη να συγκεντρωθεί και να απορροφήσει νέες πληροφορίες. Οι μηχανές αναζήτησης αναλύουν επίσης τους τίτλους για να κατανοήσουν ποια ερωτήματα πρέπει να προωθήσουν τη σελίδα. Αυτός είναι ο λόγος που οι ειδικοί SEO συνιστούν τη χρήση τοπικών λέξεων-κλειδιών σε αυτά.
Η HTML χρησιμοποιεί έξι επίπεδα υποτίτλων - από
πριν . Υπάρχει μια σαφής ιεραρχία σε αυτό το σύστημα:...
. Κύριο άρθρο, προϊόν σε ηλεκτρονικό κατάστημα κ.λπ.). Μπορεί να υπάρχει μόνο ένα στο κείμενο . Κατά κανόνα, περιέχει την κύρια λέξη-κλειδί.
...
. Οι υπότιτλοι δεύτερου επιπέδου χωρίζουν το κείμενο σε ουσιαστικά τμήματα. Για παράδειγμα, εάν βαθμολογείτε φορητούς υπολογιστές, μπορείτε να κάνετε πολλά με ονόματα διαφορετικών μοντέλων.
...
. Το τρίτο επίπεδο είναι απαραίτητο εάν το κείμενο είναι μεταξύ δύο αναλύεται επίσης σε μικρά τετράγωνα. Στο παράδειγμά μας, αυτά θα μπορούσαν να είναι κριτήρια αξιολόγησης - «Απόδοση», «Μνήμη», «Κάρτα βίντεο» κ.λπ. για κάθε μοντέλο.
, ,
. Στην πράξη είναι εξαιρετικά σπάνια. Αλλά η γενική αρχή είναι η ίδια - θα πρέπει να είναι «φωλιασμένα» σε ένα μπλοκ με υποτίτλο ανώτατου επιπέδου.
...
. Κύριο άρθρο, προϊόν σε ηλεκτρονικό κατάστημα κ.λπ.). Μπορεί να υπάρχει μόνο ένα στο κείμενο. Κατά κανόνα, περιέχει την κύρια λέξη-κλειδί.
...
. Οι υπότιτλοι δεύτερου επιπέδου χωρίζουν το κείμενο σε ουσιαστικά τμήματα. Για παράδειγμα, εάν βαθμολογείτε φορητούς υπολογιστές, μπορείτε να κάνετε πολλάμε ονόματα διαφορετικών μοντέλων.
...
. Το τρίτο επίπεδο είναι απαραίτητο εάν το κείμενο είναι μεταξύ δύοαναλύεται επίσης σε μικρά τετράγωνα. Στο παράδειγμά μας, αυτά θα μπορούσαν να είναι κριτήρια αξιολόγησης - «Απόδοση», «Μνήμη», «Κάρτα βίντεο» κ.λπ. για κάθε μοντέλο.
,
. Στην πράξη είναι εξαιρετικά σπάνια. Αλλά η γενική αρχή είναι η ίδια - θα πρέπει να είναι «φωλιασμένα» σε ένα μπλοκ με υποτίτλο ανώτατου επιπέδου.,
Φροντίστε να διατηρήσετε τη σωστή ιεραρχία. Επιστρέφοντας στο παράδειγμά μας, αυτό σημαίνει ότι δεν μπορείτε να εισαγάγετε αμέσως τα ονόματα των μοντέλων ως
ή . Και ακόμη περισσότερο, χρησιμοποιήστε υπότιτλους διαφορετικών επιπέδων για μπλοκ ομοιογενούς σημασίας (για παράδειγμα, επισημάνετε έναν φορητό υπολογιστή που κατέλαβε την τελευταία θέση στην κατάταξη χρησιμοποιώντας ).
).
Ακολουθεί ένα διάγραμμα που θα σας βοηθήσει να κατανοήσετε και να θυμηθείτε αμέσως τη σωστή δομή των επικεφαλίδων σε HTML.
Κονίστρα
Είναι καλύτερο να μορφοποιήσετε τυχόν καταχωρίσεις και οδηγίες με τη μορφή λιστών, χρησιμοποιώντας ειδικές ετικέτες HTML για κείμενο (ένα τυπικό λάθος είναι μόνο μερικές παραγράφοι
Τα οποία ξεκινούν με παύλα ή αριθμό).
Η δομή τέτοιων μπλοκ είναι πολύ απλή. Αρχικά, καθορίζουμε τον τύπο της λίστας - με κουκκίδες ή με αρίθμηση.
Όλα τα στοιχεία βρίσκονται μεταξύ των ετικετών ανοίγματος και κλεισίματος. Κάθε στοιχείο λίστας ξεκινά από μια νέα γραμμή και έχει τη μορφή . Ο αριθμός των στοιχείων δεν είναι περιορισμένος.
Η επιλογή και τα χαρακτηριστικά της
Τι μπορεί να αλλάξει χρησιμοποιώντας αυτήν τη γραμματοσειρά και το χρώμα - και χωρίς την προσθήκη νέων κλάσεων στο CSS. Αυτό είναι πολύ βολικό όταν χρειάζεται να επισημάνετε μόνο μία πρόταση ή απόσπασμα.
έχει πολλά χαρακτηριστικά:
- Πρόσωπο. Σας επιτρέπει να αλλάξετε τη γραμματοσειρά του κειμένου. Μπορείτε να παραθέσετε πολλές επιλογές διαχωρισμένες με κόμμα (Tahoma, Verdana). Εάν ο χρήστης δεν έχει εγκατεστημένη την πρώτη γραμματοσειρά, το σύστημα χρησιμοποιεί απλώς μια εναλλακτική.
- Μέγεθος. Για να κάνετε το κείμενο μεγαλύτερο ή μικρότερο, εισαγάγετε μια τιμή μεταξύ 1 και 7 σε εισαγωγικά.
- Χρώμα. Ανάλογα με το σχέδιο, μπορείτε να επιλέξετε μία από τις τυπικές αποχρώσεις (κόκκινο, πράσινο, μπλε) ή να εισαγάγετε έναν κωδικό για οποιοδήποτε χρώμα της επιλογής σας.
Μην χρησιμοποιείτε παραγράφους που έχουν μορφοποιηθεί με , αντί για υποτίτλους. Είναι καλύτερα να ορίσετε τις ίδιες παραμέτρους σχεδίασης με τη σωστή ετικέτα.
Τρόποι επισήμανσης κειμένου
Το μονότονο κείμενο είναι κουραστικό, ακόμη και αναλυμένο σε παραγράφους. Για να προσελκύσετε την προσοχή και να κεντρίσετε το ενδιαφέρον του αναγνώστη, συνιστάται να επισημάνετε βασικά σημεία γραφικά. Ακολουθούν ορισμένες εντολές που θα σας βοηθήσουν να αντιμετωπίσετε αυτήν την εργασία.
... . Μια εξαιρετικά δημοφιλής ετικέτα HTML. Το έντονο κείμενο τραβάει αμέσως τα βλέμματα και, επομένως, είναι βολικό να επισημάνετε σημαντικά σημεία και γεγονότα.
Πολλοί άνθρωποι μπερδεύουν τις ετικέτες Και . Δεν υπάρχει οπτική διαφορά, αλλά λειτουργούν διαφορετικά. Το πρώτο αλλάζει απλώς την εμφάνιση του κειμένου, ενώ το δεύτερο λειτουργεί ως «ευρετήριο» και επισημαίνει τα πιο σημαντικά τμήματα (λέξεις-κλειδιά και φράσεις για το SEO).
... . Τα κομψά και αυστηρά πλάγια γράμματα είναι ιδανικά για τη σχεδίαση επιστημονικών όρων, ξένων λέξεων και ποικίλων εισαγωγικών. Σε σοβαρές εκδόσεις επισημαίνονται και τα ονόματα των έργων τέχνης με πλάγιο κείμενο.
... . Ίσως καμία άλλη ετικέτα HTML δεν έχει προκαλέσει τόση διαμάχη. Το κείμενο υπογράμμισης χρησιμοποιείται σπάνια, καθώς αυτή η μέθοδος επισήμανσης έχει συνδεθεί ιστορικά με υπερσυνδέσμους. Εάν χρησιμοποιείτε στα άρθρα, σημειώστε ότι αυτό είναι κατάλληλο μόνο για μικρά κομμάτια - όχι περισσότερο από 1 γραμμή.
...
. Μια ενδιαφέρουσα ετικέτα που σας επιτρέπει να κάνετε ένα μέρος Πολύ σχετικό στη διαφήμιση - για παράδειγμα, για να τονίσετε την αντίθεση μεταξύ των παλαιών και των νέων τιμών.
... . Ο ευκολότερος τρόπος για να αυξήσετε το μέγεθος της γραμματοσειράς χωρίς πρόσθετες επιλογές.
... . Λειτουργεί με την ίδια αρχή με την προηγούμενη ετικέτα. Το κείμενο που βρίσκεται μέσα είναι μειωμένο σε σχέση με το κύριο.
... . Το σωστό όνομα για αυτήν τη μορφή είναι εκθέτης. Αυτή η ετικέτα προορίζεται κυρίως για μαθηματικούς βαθμούς και υποσημειώσεις. Μειώνει το μέγεθος της γραμματοσειράς και μετακινεί το επιλεγμένο κείμενο προς τα πάνω.
... . Οι συνδρομητές βρίσκονται συχνά σε διάφορους τύπους. Το επιλεγμένο τμήμα βρίσκεται κάτω από το κύριο κείμενο.
Δοχεία με νόημα
Δεδομένου ότι ορισμένα μπλοκ βρέθηκαν σε πολλά κείμενα, άρχισαν να δημιουργούνται ειδικές ετικέτες για αυτά. Αυτό απλοποιεί τη μορφοποίηση, επειδή εάν κάθε τύπος περιεχομένου έχει το δικό του σύνολο στυλ, πρέπει απλώς να επισημάνετε ένα κομμάτι κειμένου και να υποδείξετε ποιες πληροφορίες περιέχει.
...
. Ετικέτα για την προσθήκη κωδικών υπολογιστή. Απαραίτητο σε άρθρα σχετικά με τον προγραμματισμό με παραδείγματα - οι εντολές δεν εκτελούνται, αλλά εμφανίζονται ως απλό κείμενο.
... . Σχεδιασμένο για μορφοποίηση εισαγωγικών - για παράδειγμα, βασικά αποσπάσματα από μια συνέντευξη.
. Τοποθετεί μέρος του κειμένου σε ξεχωριστό μπλοκ. Από προεπιλογή, η επιλογή έχει περισσότερη αριστερή συμπλήρωση, αλλά μπορείτε επίσης να αλλάξετε το μέγεθος, το στυλ και το χρώμα του κειμένου σε CSS.
... . Μια πρόσθετη ετικέτα που περιέχει πληροφορίες για τον συγγραφέα, συμπεριλαμβανομένων συνδέσμων.
Γραμμή οριοθέτησης
Μια απλή γραμμή μπορεί να χρησιμοποιηθεί για να σηματοδοτήσει το λογικό τέλος ενός μεγάλου τμήματος.
δεν ισχύει για ζευγαρωμένες ετικέτες. Αυτό σημαίνει ότι το στοιχείο μορφής κλεισίματοςδεν χρειάζεται.
Χρησιμοποιώντας το χαρακτηριστικό WIDTH, μπορείτε να κάνετε το διαχωριστικό μικρότερο καθορίζοντας ένα κατάλληλο μέγεθος σε pixel ή ένα ποσοστό του πλάτους του παραθύρου.
Μαθαίνοντας πώς να χρησιμοποιείτε σωστά τις ετικέτες για τη μορφοποίηση κειμένου σε HTML, όχι μόνο θα κάνετε τα άρθρα σας πιο ευανάγνωστα, αλλά θα αυξήσετε και την αποτελεσματικότητά σας στο SEO.
Έχω ένα πρόβλημα όπου έχω ορίσει το μέγεθος γραμματοσειράς σώματος σε 11 px, αλλά οι πίνακες εμφανίζουν τη γραμματοσειρά στα 16 px. Δεν έχω ιδέα τι προκαλεί αυτό - έχω περάσει από το CSS και την έξοδο (την πηγή όταν πηγαίνω στη σελίδα) ξανά και ξανά. Η ρύθμιση του μεγέθους της γραμματοσειράς του πίνακα στα 11 εικονοστοιχεία έχει σαφώς το επιθυμητό αποτέλεσμα, αλλά δεν χρειάζεται να το ορίσω πουθενά ξεχωριστά από το στυλ του σώματος.
Έχω το εξής CSS:
Κύριο μέρος ( γραμματοσειρά-οικογένεια:Verdana, Arial, Helvetica, sans-serif; μέγεθος γραμματοσειράς: 11 px; περιθώριο: 0 px; χρώμα φόντου: #E7D2B8; χρώμα: #863F2B; ) img.headerImg (πλάτος: 100%; ) . λωρίδα μενού ( float: αριστερά; πλάτος: 20%; ) .main-content ( float: αριστερά; πλάτος: 80%; ) .clear ( καθαρό: και τα δύο; ) ul.menu ( περιθώριο: 0px; margin-left: 10px Επένδυση: 0px, στιλ λίστας: καμία : 20%? πλάτος: 100% περίγραμμα: σύμπτυξη ) td (κατακόρυφη στοίχιση: πάνω;)
Και η έξοδος μοιάζει με αυτό:
| Κώδικας | Βαφτιστικό όνομα | Επώνυμο | Διεύθυνση | ΤΑΧΥΔΡΟΜΙΚΟΣ ΚΩΔΙΚΟΣ | Τηλέφωνο | Φαξ | Επεξεργασία |
| Δημιουργώ | |||||||
| κωδικός 4 | Τζέιμς | Μπλε | διεύθυνση 11 διεύθυνση 24 διεύθυνση 32 πόλη 5 |
ταχυδρομικός κώδικας 4 | fone4 | fone2 | Επεξεργασία |
| κωδικός 5 | Φρειδερίκος | άσπρο | διεύθυνση 13 διεύθυνση 24 διεύθυνση 31 πόλη 1 |
ταχυδρομικός κώδικας 2 | fone5 | fone3 | Επεξεργασία |
Σοβαρά δεν βλέπω κάτι που να μπορεί να ορίσει το μέγεθος της γραμματοσειράς στα 16 px στον πίνακα. Αυτό συμβαίνει και για τα τρία τμήματα (κεφάλι, πέλμα, σώμα). Φαίνεται επίσης ότι το Netbeans 6.9 δεν θα μορφοποιήσει σωστά τον πίνακα, αλλά το υπόλοιπο έγγραφο (πριν και μετά). Είναι σχεδόν σαν να υπάρχει κάτι λάθος με τον πίνακα, αλλά δεν μπορώ να δω τι. Αυτό συμβαίνει σε Firefox και Opera (οι πιο πρόσφατες εκδόσεις και των δύο). Δεν το έχω δοκιμάσει σε IE γιατί δεν θα χρησιμοποιηθεί ποτέ σε IE.
Έχω ένα πρόβλημα όπου έχω ορίσει το μέγεθος γραμματοσειράς σώματος σε 11 px, αλλά οι πίνακες εμφανίζουν τη γραμματοσειρά στα 16 px. Δεν έχω ιδέα τι προκαλεί αυτό - έχω περάσει από το CSS και την έξοδο (την πηγή όταν πηγαίνω στη σελίδα) ξανά και ξανά. Η ρύθμιση του μεγέθους της γραμματοσειράς του πίνακα στα 11 εικονοστοιχεία έχει σαφώς το επιθυμητό αποτέλεσμα, αλλά δεν χρειάζεται να το ορίσω πουθενά ξεχωριστά από το στυλ του σώματος.
Έχω το εξής CSS:
Κύριο μέρος ( γραμματοσειρά-οικογένεια:Verdana, Arial, Helvetica, sans-serif; μέγεθος γραμματοσειράς: 11 px; περιθώριο: 0 px; χρώμα φόντου: #E7D2B8; χρώμα: #863F2B; ) img.headerImg (πλάτος: 100%; ) . λωρίδα μενού ( float: αριστερά; πλάτος: 20%; ) .main-content ( float: αριστερά; πλάτος: 80%; ) .clear ( καθαρό: και τα δύο; ) ul.menu ( περιθώριο: 0px; margin-left: 10px Επένδυση: 0px, στιλ λίστας: καμία : 20%? πλάτος: 100% περίγραμμα: σύμπτυξη ) td (κατακόρυφη στοίχιση: επάνω;)
Και το συμπέρασμα είναι το εξής:
| Κώδικας | Βαφτιστικό όνομα | Επώνυμο | Διεύθυνση | ΤΑΧΥΔΡΟΜΙΚΟΣ ΚΩΔΙΚΟΣ | Τηλέφωνο | Φαξ | Επεξεργασία |
| Δημιουργώ | |||||||
| κωδικός 4 | Τζέιμς | Μπλε | διεύθυνση 11 διεύθυνση 24 διεύθυνση 32 πόλη 5 |
ταχυδρομικός κώδικας 4 | fone4 | fone2 | Επεξεργασία |
| κωδικός 5 | Φρειδερίκος | άσπρο | διεύθυνση 13 διεύθυνση 24 διεύθυνση 31 πόλη 1 |
ταχυδρομικός κώδικας 2 | fone5 | fone3 | Επεξεργασία |
Σοβαρά δεν βλέπω κάτι που να μπορεί να ορίσει το μέγεθος της γραμματοσειράς στα 16 px στον πίνακα. Αυτό συμβαίνει και για τα τρία τμήματα (κεφάλι, πέλμα, σώμα). Φαίνεται επίσης ότι το Netbeans 6.9 δεν θα μορφοποιήσει σωστά τον πίνακα, αλλά το υπόλοιπο έγγραφο (πριν και μετά). Είναι σχεδόν σαν να υπάρχει κάτι λάθος με τον πίνακα, αλλά δεν μπορώ να δω τι. Αυτό συμβαίνει σε Firefox και Opera (οι πιο πρόσφατες εκδόσεις και των δύο). Δεν το έχω δοκιμάσει σε IE γιατί δεν θα χρησιμοποιηθεί ποτέ σε IE.