Βιβλίο 9a. Εργασία με κείμενο, λίστες και πίνακες
9.5. Αντιγραφή και επικόλληση πινάκων
9.5.1. Μορφοποίηση Πινάκων μέσω CSS
Επί του παρόντος, η μορφοποίηση του πίνακα γίνεται από δύο πηγές. Ορισμένα στοιχεία παρέχονται από προεπιλογές HTML και μερικές από το πλαίσιο Bootstrap. Όποτε τα στυλ CSS έρχονται σε αντίθεση με τα χαρακτηριστικά HTML, το CSS κερδίζει. Στην παρακάτω άσκηση, θα δημιουργήσετε κανόνες CSS για να παρακάμψετε οποιοδήποτε στυλ HTML.
1. Μεταβείτε στην προβολή Live. Κάντε κλικ μέσα στον πίνακα. Επιλέξτε στον επιλογέα ετικετών την ετικέτα table.
2. Στο CSS Designer, επιλέξτε το κουμπί All. Επιλέξτε green_styles.css > GLOBAL. Δημιουργήστε έναν νέο επιλογέα section table.
Υπόδειξη: Αν χρειάζεστε μια υπενθύμιση για τη δημιουργία μιας προσαρμοσμένης στοίβας γραμματοσειρών, ανατρέξτε στο 6.6.2. Δημιουργίας στοίβας γραμματοσειρών
3. Στο πλαίσιο Properties του CSS Designer, αποεπιλέξτε την επιλογή Show Set, αν είναι απαραίτητο.
4. Στην κατηγορία Type, κάντε κλικ για να ανοίξετε την ιδιότητα font-family. Επιλέξτε Manage Fonts και δημιουργήστε την ακόλουθη στοίβα γραμματοσειρών:
| Arial Narrow, Arial, Verdana, sans-serif |
Σημείωση: Μη διστάσετε να ενεργοποιήσετε την επιλογή Show Set κατά τη δημιουργία των παρακάτω προδιαγραφών, όπως φαίνεται στην εικόνα.
5. Δημιουργήστε τις ακόλουθες προδιαγραφές για τον νέο κανόνα:
|
width: 95% margin-bottom: 2em font-size: 90% border-bottom: solid 3px #060 |
Ο πίνακας εμφανίζει ένα σκούρο πράσινο περίγραμμα στο κάτω μέρος και το περιεχόμενο μειώθηκε σε μέγεθος και στυλ με γραμματοσειρά Arial Narrow.
Έχετε εφαρμόσει το styling σε κάποιες από τις ιδιότητες του πίνακα, αλλά υπάρχουν πολλά πράγματα που πρέπει ακόμα να διαχειριστείτε.
6. Αποθηκεύστε όλα τα αρχεία.
Τα δεδομένα στον πίνακα εμφανίζονται λίγο στριμωγμένα, και αν η οθόνη σας είναι σχετικά στενή, το περιεχόμενο μπορεί να "σπάσει" σε δύο γραμμές.Θα είχαμε καλύτερο αποτέλεσμα με λίγη επιπλέον απόσταση και άλλες επισημάνσεις. Ο κανόνας που μόλις δημιουργήσατε διαμορφώνει μόνο τη συνολική δομή του πίνακα, αλλά δεν μπορεί να ελέγξει ή να μορφοποιήσει τις μεμονωμένες σειρές και στήλες. Στην επόμενη άσκηση, θα στρέψετε την προσοχή σας στις εσωτερικές λειτουργίες ενός πίνακα.