Πώς να ρυθμίσετε το πλάτος του πίνακα

Πίνακας περιεχομένων:

Πώς να ρυθμίσετε το πλάτος του πίνακα
Πώς να ρυθμίσετε το πλάτος του πίνακα

Βίντεο: Πώς να ρυθμίσετε το πλάτος του πίνακα

Βίντεο: Πώς να ρυθμίσετε το πλάτος του πίνακα
Βίντεο: Βασικός χειρισμός διαδραστικού πίνακα SMART Board 2024, Νοέμβριος
Anonim

Οι οδηγίες του HyperText Markup Language (HTML) που σχηματίζουν πίνακες τοποθετημένους σε ιστοσελίδες παρέχουν έναν αρκετά μεγάλο αριθμό πρόσθετων παραμέτρων. Αυτό επιτρέπει, σε αντίθεση με άλλα στοιχεία μπλοκ, να ορίζει μεγέθη όχι μόνο χρησιμοποιώντας τη γλώσσα CSS (Cascading Style Sheets ή "Cascading Style Sheets"), αλλά και τη χρήση του ίδιου του HTML.

Πώς να ρυθμίσετε το πλάτος του πίνακα
Πώς να ρυθμίσετε το πλάτος του πίνακα

Οδηγίες

Βήμα 1

Χρησιμοποιήστε το χαρακτηριστικό πλάτος της ετικέτας πίνακα για να καθορίσετε το πλάτος του πίνακα σε pixel. Ο πίνακας ετικετών (HTML) αποτελείται από ένα άνοιγμα (

) και κλείσιμο (

) μέρη, μεταξύ των οποίων υπάρχουν ετικέτες που σχηματίζουν τις σειρές και τα κελιά του πίνακα. Πρόσθετες παράμετροι (χαρακτηριστικά) μπορούν να τοποθετηθούν στην ετικέτα ανοίγματος, η λίστα των οποίων για κάθε συγκεκριμένη ετικέτα καθορίζεται από τα διεθνή πρότυπα. Για την ετικέτα πίνακα, αυτά τα πρότυπα επιτρέπουν τη χρήση του χαρακτηριστικού width, το οποίο καθορίζει το πλάτος του πίνακα σε pixel. Ο κώδικας HTML ενός απλού πίνακα με μια τέτοια ετικέτα που ορίζει πλάτος 500 pixel μπορεί να έχει την εξής μορφή:

1ο κελί 2ο κελί

Βήμα 2

Προσθέστε έναν χαρακτήρα% στην τιμή του χαρακτηριστικού width αν θέλετε να καθορίσετε το πλάτος του πίνακα ως ποσοστό και όχι σε pixel:

1ο κελί 2ο κελί

Λάβετε υπόψη ότι αυτά τα ποσοστά δεν θα βασίζονται απαραίτητα στο πλάτος του παραθύρου του προγράμματος περιήγησης. Η δομή του εγγράφου έχει σημασία εδώ - ακριβώς όπως μια ένθετη κούκλα ένθεσης δεν μπορεί να είναι ευρύτερη από αυτήν στην οποία βρίσκεται, έτσι το 100% του πλάτους του πίνακα δεν μπορεί να είναι μεγαλύτερο από το πλάτος του γονικού στοιχείου. Για παράδειγμα, εάν ο πίνακας βρίσκεται μέσα σε ένα μπλοκ div, τότε το πλάτος αυτού του μπλοκ θα ληφθεί ως 100%.

Βήμα 3

Χρησιμοποιήστε τις οδηγίες γλώσσας περιγραφής στυλ, εάν θέλετε να ορίσετε το ίδιο πλάτος για τους πίνακες στην ιστοσελίδα σε ένα μέρος στον πηγαίο κώδικα. Για να το κάνετε αυτό, τοποθετήστε το πρώτο μέρος του κώδικα HTML (μεταξύ και) στις ετικέτες ανοίγματος και κλεισίματος που περιορίζουν τις δηλώσεις γλώσσας CSS:

/ * Οι οδηγίες CSS θα είναι εδώ * /

Στη συνέχεια, τοποθετήστε το ακόλουθο CSS μεταξύ αυτών των ετικετών: table {width: 100px;} Εδώ, ο πίνακας υποδεικνύει ότι η περιγραφή που τοποθετείται μέσα στα σγουρά τιράντες πρέπει να εφαρμόζεται σε όλες τις ετικέτες πίνακα που εμφανίζονται στον κώδικα σελίδας. Λοιπόν, η παράμετρος πλάτους ορίζει το πλάτος. Και εδώ, μπορείτε να χρησιμοποιήσετε το σχετικό πλάτος ως ποσοστό.

Βήμα 4

Καθορίστε το όνομα κλάσης στον κώδικα CSS και στην ετικέτα πίνακα HTML, εάν πρέπει να καθορίσετε το πλάτος όχι για όλους τους πίνακες, αλλά μόνο για έναν ή περισσότερους πίνακες. Για παράδειγμα, ας υποθέσουμε ότι η τάξη που χαρακτηρίζει μια ομάδα στενών τραπεζιών είναι μικρή. Στη συνέχεια, η περιγραφή του στυλ της μπορεί να μοιάζει με αυτήν: table.tiny {width: 100px;} Και η αντίστοιχη ετικέτα ενός από τους πίνακες στον κώδικα HTML είναι η εξής:

1ο κελί 2ο κελί

Συνιστάται: