Μάθετε πώς μπορείτε να δημιουργήσετε ένα περίγραμμα CSS πίνακα σε μόλις πέντε λεπτά
Μπορεί να έχετε ακούσει ότι οι πίνακες CSS και HTML δεν αναμιγνύονται. Αυτό απλά δεν είναι αλήθεια. Ναι, η χρήση των πινάκων HTML για τη διάταξη δεν είναι πλέον μια βέλτιστη πρακτική για το σχεδιασμό ιστοσελίδων, αφού έχει αντικατασταθεί από στυλ σχεδίασης CSS, αλλά οι πίνακες εξακολουθούν να είναι η σωστή σήμανση που θα χρησιμοποιηθεί για την προσθήκη δεδομένων πίνακα σε μια ιστοσελίδα.
Δυστυχώς, επειδή τόσοι πολλοί επαγγελματίες του διαδικτύου έχουν απομακρυνθεί από τα τραπέζια, πιστεύοντας ότι είναι δηλητήριο, πολλοί από αυτούς τους επαγγελματίες έχουν λίγη εμπειρία να εργάζονται με αυτό το κοινό στοιχείο HTML και τον αγώνα όταν πρέπει να τα χειριστούν σε μια ιστοσελίδα. Για παράδειγμα, αν έχετε έναν πίνακα σε μια σελίδα και θέλετε να προσθέσετε εσωτερικές γραμμές στα κελιά του πίνακα.
Πλαίσια πίνακα CSS
Όταν χρησιμοποιείτε το CSS για να προσθέσετε σύνορα σε πίνακες, προσθέτει μόνο το περίγραμμα γύρω από το εξωτερικό του πίνακα. Αν θέλετε να προσθέσετε εσωτερικές γραμμές στα μεμονωμένα κελιά αυτού του πίνακα, πρέπει να προσθέσετε περιγράμματα στα εσωτερικά στοιχεία CSS. Μπορείτε επίσης να χρησιμοποιήσετε την ετικέτα HR για να προσθέσετε γραμμές μέσα σε μεμονωμένα κελιά.
Για να εφαρμόσετε τα στυλ που καλύπτονται σε αυτό το άρθρο, θα πρέπει προφανώς να έχετε έναν πίνακα στην ιστοσελίδα σας. Στη συνέχεια, θα πρέπει να δημιουργήσετε ένα φύλλο στυλ ως ένα εσωτερικό φύλλο στυλ στην κεφαλή του εγγράφου σας (πιθανότατα θα το κάνετε μόνο εάν ο ιστότοπός σας είναι μία σελίδα) ή επισυνάπτεται στο έγγραφο ως εξωτερικό φύλλο στυλ θα κάνει εάν ο ιστότοπός σας είναι πολλαπλές σελίδες - επιτρέποντάς σας να σχεδιάσετε όλες τις σελίδες από ένα εξωτερικό φύλλο). Θα τοποθετήσετε τα στυλ για να προσθέσετε εσωτερικές γραμμές σε αυτό το φύλλο στυλ.
Πριν ξεκινήσεις
Πρώτα πρέπει να αποφασίσετε πού θέλετε οι γραμμές να εμφανίζονται στον πίνακα σας. Έχετε αρκετές επιλογές, όπως:
- Περιβάλλει όλα τα κελιά για να σχηματίσουν ένα πλέγμα.
- Τοποθέτηση των γραμμών ανάμεσα στις στήλες μόνο.
- Μόλις ανάμεσα στις σειρές. ή
- Μεταξύ συγκεκριμένων στηλών ή γραμμών.
Μπορείτε επίσης να τοποθετήσετε τις γραμμές γύρω από μεμονωμένα κελιά ή μέσα σε ξεχωριστά κελιά.
Πώς να προσθέσετε γραμμές γύρω από όλα τα κελιά σε έναν πίνακα
Για να προσθέσετε γραμμές γύρω από όλα τα κελιά στον πίνακα σας, δημιουργώντας το εφέ που μοιάζει με πλέγμα, προσθέστε τα παρακάτω στο φύλλο στυλ:
td, th {
σύνορα: στερεά 1px μαύρο?
}}
Πώς να προσθέσετε γραμμές μεταξύ ακριβώς των στηλών σε έναν πίνακα
Για να προσθέσετε γραμμές μεταξύ των στηλών (αυτό δημιουργεί κάθετες γραμμές που εκτείνονται από πάνω προς τα κάτω στις στήλες του πίνακα), προσθέστε τα ακόλουθα στο φύλλο στυλ:
td, th {
αριστερά: στερεά 1px μαύρο.
}}
Στη συνέχεια, αν δεν θέλετε να εμφανίζονται στην πρώτη στήλη, θα χρειαστεί να προσθέσετε μια τάξη σε αυτά τα th και td cells. Σε αυτό το παράδειγμα, υποθέτουμε ότι έχουμε μια τάξη μη σύνορα σε αυτά τα κελιά και αφαιρούμε τα σύνορα με αυτόν τον πιο συγκεκριμένο κανόνα CSS. Έτσι, εδώ είναι η κλάση HTML που θα χρησιμοποιήσαμε:
class = "no-border">
Και τότε θα μπορούσαμε να προσθέσουμε το ακόλουθο στυλ στο φύλλο στυλ μας:
.χωρίς σύνορα {
όριο-αριστερά: κανένας.
}}
Πώς να προσθέσετε γραμμές μεταξύ ακριβώς των σειρών σε έναν πίνακα
Όπως και με την προσθήκη γραμμών μεταξύ των στηλών, μπορείτε να το κάνετε αυτό με ένα μόνο απλό στυλ που προστέθηκε στο φύλλο στυλ σας. Το παρακάτω CSS θα προσθέσει κάθετες γραμμές μεταξύ κάθε σειράς του πίνακα μας:
tr {
σύνορα-κάτω: στερεά 1px μαύρο.
}}
Και για να αφαιρέσετε το περίγραμμα από το κάτω μέρος του πίνακα, θα προσθέσετε για άλλη μια φορά μια κλάση σε αυτή την ετικέτα tr:
class = "no-border">
Προσθέστε το ακόλουθο στυλ στο φύλλο στυλ σας:
.χωρίς σύνορα {
σύνορα-κάτω: κανένας.
}}
Πώς να προσθέσετε γραμμές μεταξύ συγκεκριμένων στηλών ή γραμμών σε έναν πίνακα
Εάν θέλετε μόνο γραμμές μεταξύ συγκεκριμένων γραμμών ή στηλών, θα πρέπει να χρησιμοποιήσετε μια τάξη σε αυτά τα κελιά ή σειρές. Η προσθήκη μιας γραμμής μεταξύ των στηλών είναι ελαφρώς πιο δύσκολη από ότι μεταξύ των γραμμών, επειδή πρέπει να προσθέσετε την κλάση σε κάθε κελί της στήλης. Εάν το τραπέζι σας παράγεται αυτόματα από ένα CMS κάποιου είδους , αυτό μπορεί να μην είναι δυνατό, αλλά εάν κάνετε χειροκίνητη κωδικοποίηση της σελίδας, θα μπορούσατε να προσθέσετε τις κατάλληλες τάξεις όπως απαιτείται για να επιτύχετε αυτό το αποτέλεσμα.
class = "side-border">
Η προσθήκη γραμμών μεταξύ των γραμμών είναι πολύ πιο εύκολη, καθώς μπορείτε απλά να προσθέσετε την κλάση στη γραμμή στην οποία θέλετε να ενεργοποιηθεί η γραμμή.
class = "border-bottom">
Στη συνέχεια, προσθέστε το CSS στο φύλλο στυλ σας:
.προστασία {
αριστερά: στερεά 1px μαύρο.
}}
.border-bottom {
σύνορα-κάτω: στερεά 1px μαύρο.
}}
Πώς να προσθέσετε γραμμές σε μεμονωμένα κελιά σε έναν πίνακα
Για να προσθέσετε γραμμές γύρω από μεμονωμένα κελιά, προσθέτετε μια κλάση στα κελιά που θέλετε γύρω από τα σύνορα:
class = "border">
Στη συνέχεια, προσθέστε το ακόλουθο CSS στο φύλλο στυλ:
.border {
σύνορα: στερεά 1px μαύρο?
}}
Πώς να προσθέσετε γραμμές μέσα σε μεμονωμένα κελιά σε έναν πίνακα
Αν θέλετε να προσθέσετε γραμμές εντός των περιεχομένων ενός κελιού, ο ευκολότερος τρόπος για να γίνει αυτό είναι με την οριζόντια ετικέτα κανόνα (
).
Χρήσιμες συμβουλές
Αν παρατηρήσετε κενά στα σύνορά σας, θα πρέπει να βεβαιωθείτε ότι το στυλ περικοπής των συνόρων έχει οριστεί στο τραπέζι σας. Προσθέστε τα εξής στο φύλλο στυλ:
πίνακας {
σύνορα-κατάρρευση: κατάρρευση;
}}
Μπορείτε να αποφύγετε όλα τα παραπάνω CSS και να χρησιμοποιήσετε το χαρακτηριστικό περιγράμματος στην ετικέτα πίνακα. Συνειδητοποιήστε, ωστόσο, ότι το χαρακτηριστικό του, αν και δεν έχει καταργηθεί, είναι σημαντικά λιγότερο ευέλικτο από το CSS, καθώς μπορείτε να καθορίσετε μόνο το πλάτος των συνόρων και να το έχετε μόνο γύρω από όλα τα κελιά του πίνακα ή κανένα.