Χρησιμοποιώντας το CSS για να προσθέσετε εσωτερικά σύνορα σε έναν πίνακα HTML

Μπορεί να έχετε ακούσει ότι οι πίνακες CSS και HTML δεν αναμιγνύονται. Αυτή δεν είναι η περίπτωση. Ναι, η χρήση των πινάκων HTML για τη διάταξη δεν είναι πλέον μια βέλτιστη πρακτική για το σχεδιασμό ιστοσελίδων, επειδή έχουν αντικατασταθεί από στυλ σχεδίασης CSS, αλλά οι πίνακες εξακολουθούν να είναι ο σωστός τρόπος σήμανσης που χρησιμοποιείται για την προσθήκη πινακοποιημένων δεδομένων σε μια ιστοσελίδα.

Επειδή τόσοι πολλοί επαγγελματίες του διαδικτύου αποφεύγουν τα τραπέζια, πιστεύοντας ότι δεν είναι τίποτε άλλο παρά πρόβλημα, πολλοί από τους επαγγελματίες αυτούς έχουν λίγη εμπειρία εργασίας με αυτό το κοινό στοιχείο HTML και αγωνίζονται όταν πρέπει να προσθέσουν εσωτερικές γραμμές στα κελιά των σελίδων σε μια ιστοσελίδα.

Πλαίσια πίνακα CSS

Όταν χρησιμοποιείτε το CSS για να προσθέσετε σύνορα σε πίνακες, προσθέτει μόνο το περίγραμμα γύρω από το εξωτερικό του πίνακα. Αν θέλετε να προσθέσετε εσωτερικές γραμμές στα μεμονωμένα κελιά αυτού του πίνακα, πρέπει να προσθέσετε περιγράμματα στα εσωτερικά στοιχεία CSS. Μπορείτε να χρησιμοποιήσετε την ετικέτα HR για να προσθέσετε γραμμές μέσα σε μεμονωμένα κελιά.

Για να εφαρμόσετε τα στυλ που καλύπτονται σε αυτό το σεμινάριο, χρειάζεστε έναν πίνακα σε μια ιστοσελίδα. Στη συνέχεια, δημιουργείτε ένα φύλλο στυλ ως ένα εσωτερικό φύλλο στυλ στην κεφαλή του εγγράφου σας (αν έχετε να κάνουμε με μία μόνο σελίδα) ή προσαρτημένο στο έγγραφο ως εξωτερικό φύλλο στυλ (εάν ο ιστότοπος έχει πολλές σελίδες). Βάζετε τα στυλ για να προσθέσετε εσωτερικές γραμμές στο φύλλο στυλ.

Πριν ξεκινήσεις

Αποφασίστε πού θέλετε να εμφανίζονται οι γραμμές στον πίνακα. Έχετε αρκετές επιλογές, όπως:

• Περιβάλλει όλα τα κελιά για να σχηματίσει ένα πλέγμα
• Τοποθέτηση των γραμμών μεταξύ μόνο των στηλών
• Ακριβώς ανάμεσα στις σειρές
• Μεταξύ συγκεκριμένων στηλών ή γραμμών.

Μπορείτε επίσης να τοποθετήσετε τις γραμμές γύρω από μεμονωμένα κελιά ή μέσα σε ξεχωριστά κελιά.

Πώς να προσθέσετε γραμμές γύρω από όλα τα κελιά σε έναν πίνακα

Για να προσθέσετε γραμμές γύρω από όλα τα κελιά στον πίνακα σας, δημιουργώντας ένα εφέ πλέγματος, προσθέστε τα ακόλουθα στο φύλλο στυλ σας:

td, th {σύνορα: στερεά 1px μαύρο?}

Πώς να προσθέσετε γραμμές μεταξύ ακριβώς των στηλών σε έναν πίνακα

Για να προσθέσετε γραμμές μεταξύ των στηλών για να δημιουργήσετε κάθετες γραμμές που εκτείνονται από πάνω προς τα κάτω στις στήλες του πίνακα, προσθέστε τα ακόλουθα στο φύλλο στυλ σας:

td, th {αριστερά: στερεά 1px μαύρο.}

Εάν δεν θέλετε να εμφανίζονται κάθετες γραμμές στην πρώτη στήλη, προσθέτετε μια κλάση σε th και td κυττάρων. Σε αυτό το παράδειγμα, υποθέστε μια κλάση χωρίς σύνορα σε αυτά τα κελιά και αφαιρέστε τα σύνορα με έναν κανόνα CSS. Η κλάση HTML που χρησιμοποιείτε είναι:

class = "no-border">

Στη συνέχεια, προσθέστε το ακόλουθο στυλ στο φύλλο στυλ:

.χωρίς σύνορα {όριο-αριστερά: κανένας.}

Πώς να προσθέσετε γραμμές μεταξύ ακριβώς των σειρών σε έναν πίνακα

Όπως και με την προσθήκη γραμμών μεταξύ των στηλών, μπορείτε να προσθέσετε οριζόντιες γραμμές μεταξύ των γραμμών με ένα απλό στυλ που προστέθηκε στο φύλλο στυλ, ως εξής:

tr {σύνορα-κάτω: στερεά 1px μαύρο.}

Για να αφαιρέσετε το περίγραμμα από το κάτω μέρος του πίνακα, θα προσθέσετε πάλι μια τάξη σε αυτό

ετικέτα:

class = "no-border">

Προσθέστε το ακόλουθο στυλ στο φύλλο στυλ σας:

.χωρίς σύνορα {σύνορα-κάτω: κανένας.}

Πώς να προσθέσετε γραμμές μεταξύ συγκεκριμένων στηλών ή γραμμών σε έναν πίνακα

Εάν θέλετε μόνο γραμμές μεταξύ συγκεκριμένων γραμμών ή στηλών, θα πρέπει να χρησιμοποιήσετε μια τάξη σε αυτά τα κελιά ή σειρές. Η προσθήκη μιας γραμμής μεταξύ των στηλών είναι ελαφρώς πιο δύσκολη από ότι μεταξύ των γραμμών, επειδή πρέπει να προσθέσετε την κλάση σε κάθε κελί της στήλης. Εάν το τραπέζι σας παράγεται αυτόματα από ένα CMS κάποιου είδους, αυτό μπορεί να μην είναι δυνατό, αλλά εάν κάνετε χειροκίνητη κωδικοποίηση της σελίδας, θα μπορούσατε να προσθέσετε τις κατάλληλες τάξεις όπως απαιτείται για να επιτύχετε αυτό το αποτέλεσμα.

class = "side-border">

Η προσθήκη γραμμών μεταξύ των γραμμών είναι ευκολότερη επειδή μπορείτε να προσθέσετε την κλάση στη γραμμή στην οποία θέλετε να ενεργοποιηθεί η γραμμή.

class = "border-bottom">

Στη συνέχεια, προσθέστε το CSS στο φύλλο στυλ σας:

.προστασία {αριστερά: στερεά 1px μαύρο.}.border-bottom {σύνορα-κάτω: στερεά 1px μαύρο.}

Πώς να προσθέσετε γραμμές σε μεμονωμένα κελιά σε έναν πίνακα

Για να προσθέσετε γραμμές γύρω από μεμονωμένα κελιά, προσθέτετε μια κλάση στα κελιά που θέλετε γύρω από τα σύνορα:

class = "border">

Στη συνέχεια, προσθέστε το ακόλουθο CSS στο φύλλο στυλ σας:

.border {σύνορα: στερεά 1px μαύρο?}

Πώς να προσθέσετε γραμμές μέσα σε μεμονωμένα κελιά σε έναν πίνακα

Εάν θέλετε να προσθέσετε γραμμές εντός των περιεχομένων ενός κελιού, ο ευκολότερος τρόπος για να γίνει αυτό είναι με την οριζόντια ετικέτα κανόνα ().

Χρήσιμες συμβουλές

Αν παρατηρήσετε κενά στα σύνορά σας, βεβαιωθείτε ότι το στυλ περικοπής των συνόρων έχει οριστεί στο τραπέζι. Προσθέστε τα εξής στο φύλλο στυλ σας:

πίνακας {σύνορα-κατάρρευση: κατάρρευση;}

Μπορείτε να αποφύγετε όλες τις ιδιότητες των συνόρων και να τις χρησιμοποιήσετε στην ετικέτα πίνακα. Συνειδητοποιήστε, ωστόσο, ότι το χαρακτηριστικό αυτό, αν και δεν έχει καταργηθεί, είναι σημαντικά λιγότερο ευέλικτο από το CSS, καθώς μπορείτε να καθορίσετε μόνο το πλάτος του περιγράμματος και να το έχετε μόνο γύρω από όλα τα κελιά του πίνακα ή κανένα.