Τρόπος αλλαγής του χρώματος φόντου ενός πίνακα HTML

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

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

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

Αυτό το παράδειγμα αλλάζει το χρώμα φόντου ενός ολόκληρου πίνακα:

Για να αλλάξετε το χρώμα μιας μεμονωμένης σειράς, εισαγάγετε την ιδιότητα χρώματος φόντου στο.

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

Μπορείτε επίσης να εφαρμόσετε χρώματα φόντου στις κεφαλές του πίνακα ή στο

Αλλαγή χρώματος φόντου με χρήση φύλλων στυλ

Ωστόσο, είναι καλύτερο να αποφύγετε τη χρήση του χαρακτηριστικού χρώματος φόντου υπέρ ενός σωστά μορφοποιημένου φύλλου στυλ. Για παράδειγμα, μπορείτε να ορίσετε τα στυλ σε ένα φύλλο στυλ στο HEAD του εγγράφου HTML ή να τα ορίσετε σε ένα φύλλο εξωτερικού στυλ. Αλλαγές όπως αυτές στο HEAD ή σε εξωτερικό φύλλο στυλ ενδέχεται να εμφανίζονται ως εξής για πίνακες, σειρές και κελιά:

πίνακας {background-color: # ff0000; }
tr {φόντο-χρώμα: κίτρινο; }
td {φόντο-χρώμα: # 000; }

Ρύθμιση χρώματος φόντου στήλης

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

Το CSS:

td. ColColor {φόντο-χρώμα: μπλε; }

Το HTML:

κελί 1cell 2cell 1cell 2

Ένα σημαντικό πλεονέκτημα του ελέγχου των χρωμάτων φόντου μέσω ενός φύλλου στυλ είναι ότι μπορείτε να αλλάξετε την επιλογή χρώματος αργότερα. Αντί να περάσετε από το έγγραφο HTML και να κάνετε την αλλαγή σε κάθε κελί, μπορείτε να κάνετε μια αλλαγή στην επιλογή χρώματος στο CSS που θα εφαρμοστεί αμέσως σε κάθε περίπτωση όπου το class = "ColColor" εμφανίζεται η σύνταξη.