Πώς να προσθέσετε χώρο μεταξύ στηλών χωρίς να επηρεάσετε τις γραμμές σε έναν πίνακα HTML;
Οι ιδιότητες συμπλήρωσης αριστερά και δεξιά χρησιμοποιούνται για την προσθήκη διαστήματος μεταξύ των στηλών χωρίς να επηρεάζεται η συνολική διάταξη του πίνακα. Αυτή η ιδιότητα επιτρέπει στους προγραμματιστές να προσθέτουν επιπλέον διάστημα και αυτό το διάστημα δεν επηρεάζει τις σειρές.
Ακολουθήστε τα παρακάτω βήματα:
Βήμα 1: Δημιουργήστε μια δομή πίνακα
Ας υποθέσουμε ότι υπάρχει ένας πίνακας στο αρχείο HTML που περιέχει τέσσερις σειρές και τρεις στήλες:
< τραπέζι >
< tr >
< ου > Ονομα < / ου >
< ου > Τάξη < / ου >
< ου > Πόλη < / ου >
< / tr >
< tr >
< td > Γιάννης < / td >
< td > BS Chem < / td >
< td > Λονδίνο < / td >
< / tr >
< tr >
< td > Αλέξανδρος < / td >
< td > BS Μαθηματικά < / td >
< td > Τόκιο < / td >
< / tr >
< tr >
< td > Ιωσήφ < / td >
< td > BS CS < / td >
< td > Νέα Υόρκη < / td >
< / tr >
< / τραπέζι >
Μετά την εκτέλεση του παραπάνω κώδικα η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος επιβεβαιώνει ότι έχει δημιουργηθεί μια δομή πίνακα.
Βήμα 2: Εφαρμογή οριζόντιας επένδυσης
Για να προσθέσετε διάστημα μεταξύ στηλών από την αριστερή πλευρά, χρησιμοποιήστε το ' padding-αριστερά ” Ιδιότητα CSS. Μετά την εφαρμογή αυτής της ιδιότητας, τα δεδομένα μοιάζουν με τη σωστή στοίχιση. Ο λόγος είναι ότι η επένδυση εφαρμόζεται μόνο από την αριστερή πλευρά.
Τώρα επιλέξτε το στοιχείο 'td' στο τμήμα CSS των στυλ που μπορούν να εφαρμοστούν χρησιμοποιώντας την ενσωματωμένη μέθοδο. Στη συνέχεια, προσθέστε γέμιση του ' 50 εικονοστοιχεία ” για να προσθέσετε κενά και να προσθέσετε ιδιότητα περιγράμματος για καλύτερους σκοπούς οπτικοποίησης:
td {padding-αριστερά: 50px;
σύνορο : 2px συμπαγές κόκκινο;
}
Μετά την εκτέλεση του κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος δείχνει ότι ο χώρος προστίθεται μεταξύ των στηλών του πίνακα.
Τώρα, για να ρυθμίσετε το padding από τη δεξιά πλευρά, το ' padding-right ” αξιοποιείται το ακίνητο. Με τον ίδιο τρόπο, αλλά τώρα τα δεδομένα κυψέλης φαίνονται ' αριστερή στοίχιση '. Ο κωδικός είναι:
td {padding-αριστερά: 50px;
σύνορο : 2px συμπαγές κόκκινο;
}
Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος επιβεβαιώνει ότι ο χώρος μεταξύ των στηλών αυξάνεται εφαρμόζοντας επένδυση στη δεξιά πλευρά.
Βήμα 3: Συνδυασμός γεμίσματος αριστερά και δεξιά
Όπως και στο παραπάνω βήμα, τα δεδομένα δεν είναι στοιχισμένα στο κέντρο και στις δύο περιπτώσεις και αυτό καθιστά τα δεδομένα αντιεπαγγελματικά. Για να το κάνει περίοπτο χωρίς να σπάει τη σχεδιαστική αίσθηση. Και οι δύο ιδιότητες μπορούν να χρησιμοποιηθούν ταυτόχρονα όπως παρακάτω:
td {padding-right: 60px;
padding-αριστερά: 60px;
σύνορο : 2px συμπαγές κόκκινο;
}
Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος επιβεβαιώνει ότι ο χώρος προστίθεται μεταξύ των στηλών και ότι τα δεδομένα είναι επίσης ευθυγραμμισμένα στο κέντρο.
συμπέρασμα
Ο χώρος μεταξύ των στηλών του πίνακα μπορεί να προστεθεί με τη βοήθεια της προσθήκης ιδιοτήτων αριστερά και δεξιά. Αυτές οι ιδιότητες προσθέτουν επιπλέον χώρο από τη δεξιά και την αριστερή κατεύθυνση στο κελί. Και οι δύο ιδιότητες μπορούν να χρησιμοποιηθούν ταυτόχρονα ή χωριστά. Αυτό το άρθρο έχει δείξει με επιτυχία πώς μπορείτε να προσθέσετε διάστημα μεταξύ των στηλών του πίνακα χωρίς να επηρεάζετε τις γραμμές.