Οι πίνακες στη γλώσσα CSS χρησιμοποιούνται για τη διάταξη και την οργάνωση στοιχείων σε μια ιστοσελίδα. Με τη βοήθεια των πινάκων, μπορούμε να δημιουργήσουμε πλέγματα, να τοποθετήσουμε περιεχόμενο σε στήλες και γραμμές, και να εφαρμόσουμε στυλ και διαμόρφωση στα διάφορα κελιά του πίνακα.
Για να δημιουργήσουμε έναν πίνακα στη CSS, χρησιμοποιούμε τη δήλωση table για τον καθορισμό της αρχής του πίνακα. Στη συνέχεια, μπορούμε να προσθέσουμε τις σχετικές δηλώσεις για τον καθορισμό των στοιχείων του πίνακα, όπως τις γραμμές (tr), τις στήλες (td), τους τίτλους των στηλών (th) και άλλα.
Μπορούμε να εφαρμόσουμε στυλ στον πίνακα χρησιμοποιώντας τις κατάλληλες δηλώσεις CSS, όπως τα περιθώρια (margin και padding), το χρώμα φόντου (background-color), τον τύπο γραμματοσειράς (font-family), το μέγεθος γραμματοσειράς (font-size) και πολλά άλλα.
Με τη χρήση των πινάκων στη CSS, μπορούμε να δημιουργήσουμε πολύπλοκες δομές διάταξης και να οργανώσουμε το περιεχόμενο μας με μια στυλιστική προσέγγιση. Αυτό μας επιτρέπει να δημιουργήσουμε ευέλικτες και ελκυστικές ιστοσελίδες που προσαρμόζονται σε διάφορες συσκευές και μεγέθη οθονών.
Η εμφάνιση ενός πίνακα HTML μπορεί να βελτιωθεί σημαντικά με τη χρήση CSS:
/* Ορίζει τον τρόπο συγχώνευσης των περιθωρίων των κελιών του πίνακα */
table {
border-collapse: collapse;
width: 100%;
}
/* Ορίζει τον τρόπο σχεδίασης των περιθωρίων και του περιγράμματος για τον πίνακα, τους κεφαλίδες (th) και τις κυψέλες (td) */
table, th, td {
border: 1px solid black;
}
/* Ορίζει το περιθώριο και τον τρόπο στοίχισης του περιεχομένου των κεφαλίδων και των κυψελών */
th, td {
padding: 8px;
text-align: left;
}
/* Ορίζει το χρώμα του φόντου και την ένταση της γραφής των κεφαλίδων */
th {
background-color: lightgray;
font-weight: bold;
}
Στο παραπάνω παράδειγμα, έχουμε ορίσει συγκεκριμένα στυλ για τους πίνακες. Η ιδιότητα border-collapse: collapse καθορίζει ότι οι γραμμές του πίνακα να συγχωνευτούν και να μην υπάρχει διάσταση μεταξύ τους. Οι ιδιότητες border ορίζουν ότι όλα τα στοιχεία του πίνακα (πίνακας, th, td) να έχουν περίγραμμα πάχους 1px και συνορεύουν με μαύρο χρώμα.
Οι ιδιότητες padding και text-align ορίζουν το περιθώριο και τον στοίχισμα των στοιχείων th και td, καθώς και την ευθυγράμμιση του κειμένου στα αριστερά. Επιπλέον, η ιδιότητα background-color και font-weight ορίζει ότι τα κεφαλίδια (th) θα έχουν φόντο ανοικτό γκρι χρώμα και έντονη γραμματοσειρά.
Με αυτά τα στυλ, μπορείτε να προσαρμόσετε την εμφάνιση των πινάκων σας σύμφωνα με τις προτιμήσεις σας. Μπορείτε επίσης να προσθέσετε περισσότερες ιδιότητες CSS για να προσαρμόσετε ακόμη περισσότερο την εμφάνιση των πινάκων.
Για να καθορίσετε τα περιγράμματα των πινάκων με CSS, χρησιμοποιήστε την ιδιότητα border.
Το παρακάτω παράδειγμα καθορίζει ένα συμπαγές περίγραμμα για τα στοιχεία <table>, <th> και <td>:
/* Ορίζει το στυλ των πινάκων, κεφαλίδων και κελιών */
table {
border: 1px solid black;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
Στο παράδειγμα αυτό, η ιδιότητα border ορίζει ένα περίγραμμα με πάχος 1px και συνορεύει με μαύρο χρώμα για τα στοιχεία <table>, <th> και <td>. Αυτό δημιουργεί ένα απλό συμπαγές περίγραμμα γύρω από τον πίνακα και τα κεφαλίδια και τα κελιά του.
[adinserter block=”2″]
Μπορείτε να προσαρμόσετε την ιδιότητα border ανάλογα με τις προτιμήσεις σας, αλλάζοντας το πάχος, τον τύπο (όπως dashed ή dotted) και το χρώμα του περιγράμματος.
Εάν χρειάζεστε έναν πίνακα που θα καλύπτει ολόκληρη την οθόνη (πλήρες πλάτος), προσθέστε το width: 100% στο στοιχείο <table>:
/* Ορίζει το πλάτος του πίνακα σε 100% του πλάτους του περιέχοντος τον χώρου στοιχείου */
table {
width: 100%;
}
Με αυτήν τη δήλωση, ο πίνακας θα καταλαμβάνει το πλήρες πλάτος του γονικού στοιχείου (π.χ. της περιοχής που τον περιέχει ή του παραθύρου του προγράμματος περιήγησης) και θα επεκτείνεται σε όλο το πλάτος της οθόνης. Αυτό το κάνει να φαίνεται σαν ένας πίνακας πλήρους πλάτους, χωρίς περιορισμούς στο μέγεθος του.
Η ιδιότητα border-collapse ορίζει εάν τα περιγράμματα του πίνακα θα πρέπει να συγχωνευτούν σε ένα μόνο περίγραμμα:
table {
/* Καθορίζει τη συμπεριφορά του πίνακα για την συγχώνευση των περιθωρίων */
border-collapse: collapse;
}
Με αυτήν τη δήλωση, τα περιγράμματα των κελιών του πίνακα θα συγχωνεύονται και θα εμφανίζονται ως ένα μόνο περίγραμμα. Αυτό δημιουργεί έναν πίνακα με πιο συμπαγή εμφάνιση και αποτρέπει τον χώρο μεταξύ των περιγραμμάτων των κελιών.
Μπορείτε να προσαρμόσετε αυτήν την ιδιότητα ανάλογα με τις προτιμήσεις σας, είτε να χρησιμοποιήσετε την τιμή collapse για να συγχωνεύσετε τα περιγράμματα είτε την τιμή separate για να έχετε ξεχωριστά περιγράμματα για κάθε κελί.
Το πλάτος και το ύψος ενός πίνακα καθορίζονται από τις ιδιότητες width και height.
Το παρακάτω παράδειγμα ορίζει το πλάτος του πίνακα σε 100% και το ύψος των στοιχείων <th> σε 70px:
/* Ορίζει το πλάτος του πίνακα σε 100% του παραγόμενου χώρου */
table {
width: 100%;
}
/* Ορίζει το ύψος των επικεφαλίδων του πίνακα σε 70px */
th {
height: 70px;
}
Με αυτές τις δηλώσεις, ο πίνακας θα καταλαμβάνει το πλήρες πλάτος του γονικού στοιχείου (π.χ. της περιοχής που τον περιέχει ή του παραθύρου του προγράμματος περιήγησης) και τα κεφαλίδια (<th>) θα έχουν ύψος 70px.
Μπορείτε να προσαρμόσετε αυτές τις ιδιότητες ανάλογα με τις προτιμήσεις σας, ορίζοντας το πλάτος και το ύψος του πίνακα όπως επιθυμείτε.
Για να δημιουργήσετε έναν πίνακα που θα καταλαμβάνει μόνο το μισό της σελίδας, μπορείτε να χρησιμοποιήσετε την ιδιότητα width: 50%:
table {
/* Ορίζει το πλάτος του πίνακα στο 50% του πλάτους του γονικού στοιχείου */
width: 50%;
}
Με αυτήν τη δήλωση, ο πίνακας θα έχει πλάτος που αντιστοιχεί στο 50% του γονικού στοιχείου (π.χ. της περιοχής που τον περιέχει ή του παραθύρου του προγράμματος περιήγησης). Αυτό θα καταλάβει μόνο το μισό πλάτος της σελίδας, επιτρέποντάς σας να δημιουργήσετε έναν πίνακα που θα είναι στο ήμισυ του πλάτους της σελίδας.
Μπορείτε να προσαρμόσετε το ποσοστό του πλάτους (50%) ανάλογα με τις απαιτήσεις σας, ώστε να επιτύχετε το επιθυμητό μέγεθος του πίνακα.
Η ιδιότητα text-align ορίζει τον οριζόντιο στοίχισμα (όπως αριστερά, δεξιά ή κέντρο) του περιεχομένου των στοιχείων <th> ή <td>.
Από προεπιλογή, το περιεχόμενο των στοιχείων <th> είναι στοιχισμένο στο κέντρο και το περιεχόμενο των στοιχείων <td> είναι στοιχισμένο στα αριστερά.
Για να στοιχίσετε το περιεχόμενο των στοιχείων <td> στο κέντρο, χρησιμοποιήστε την ιδιότητα text-align: center:
td {
/* Ορίζει την οριζόντια στοίχιση του κειμένου στο κέντρο */
text-align: center;
}
Με αυτήν τη δήλωση, το περιεχόμενο των στοιχείων <td> θα είναι στοιχισμένο στο κέντρο. Μπορείτε να προσαρμόσετε αυτήν την ιδιότητα ανάλογα με τις προτιμήσεις σας, χρησιμοποιώντας τις τιμές left ή right αντί για center, αν επιθυμείτε διαφορετικό στοίχισμα.
[adinserter block=”3″]
Για να στοιχίσετε το περιεχόμενο στα αριστερά, μπορείτε να επιβάλετε τον στοίχισμο των στοιχείων <th> να είναι στο αριστερό άκρο χρησιμοποιώντας την ιδιότητα text-align: left:
th {
/* Ορίζει τον οριζόντιο στοίχισμα του κειμένου στα αριστερά */
text-align: left;
}
Με αυτήν τη δήλωση, το περιεχόμενο των στοιχείων <th> θα είναι στοιχισμένο στα αριστερά. Προσθέστε αυτήν την ιδιότητα στον κανόνα CSS σας για να διασφαλίσετε ότι τα <th> στοιχεία θα είναι αριστερά στοιχισμένα.
Είναι σημαντικό να σημειωθεί ότι, αν έχετε ήδη δηλώσει text-align: center για τα στοιχεία <td>, η δήλωση text-align: left στα στοιχεία <th> θα το αντικαταστήσει με το νέο στοίχισμα στα αριστερά.
Η ιδιότητα vertical-align ορίζει τον κατακόρυφο στοίχισμα (όπως επάνω, κάτω ή μέση) του περιεχομένου στα στοιχεία <th> ή <td>.
Από προεπιλογή, το κατακόρυφο στοίχισμα του περιεχομένου σε έναν πίνακα είναι μέση (και για τα στοιχεία <th> και για τα στοιχεία <td>).
Το παρακάτω παράδειγμα ορίζει τον κατακόρυφο στοίχισμα του περιεχομένου των στοιχείων <td> στο κάτω μέρος:
td {
/* Ορίζει τον κατακόρυφο-ευθυγραμμισμό του περιεχομένου του td στο κάτω μέρος του κελιού */
vertical-align: bottom;
}
Με αυτήν τη δήλωση, το περιεχόμενο των στοιχείων <td> θα είναι στοιχισμένο στο κάτω μέρος. Μπορείτε να προσαρμόσετε αυτήν την ιδιότητα ανάλογα με τις προτιμήσεις σας, χρησιμοποιώντας τις τιμές top ή middle αντί για bottom, αν επιθυμείτε διαφορετικό κατακόρυφο στοίχισμα.
Για να ελέγξετε τον χώρο μεταξύ του περιγράμματος και του περιεχομένου ενός πίνακα, χρησιμοποιήστε την ιδιότητα padding στα στοιχεία <td> και <th>:
td, th {
/* Προσθέτει περιθώριο 10px σε όλες τις πλευρές (πάνω, δεξιά, κάτω, αριστερά) */
padding: 10px;
}
Με αυτήν τη δήλωση, το περιεχόμενο των στοιχείων <td> και <th> θα έχει περιθώριο 10px από κάθε πλευρά. Μπορείτε να προσαρμόσετε την τιμή του padding ανάλογα με τις απαιτήσεις σας για να προσαρμόσετε τον χώρο περιθωρίου στον πίνακα.
Χρησιμοποιώντας διαφορετικές τιμές για το padding μπορείτε να ελέγξετε το περιθώριο γύρω από το περιεχόμενο των στοιχείων <td> και <th> και να δημιουργήσετε τον επιθυμητό χώρο μεταξύ του περιεχομένου και του περιγράμματος του πίνακα.
Για να προσθέσετε οριζόντιες διαχωριστικές γραμμές με την ιδιότητα border-bottom στα στοιχεία <th> και <td>, μπορείτε να χρησιμοποιήσετε την παρακάτω κανόνα CSS:
th, td {
/* Ορίζει μια μαύρη γραμμή κάτω από τα κελιά των πινάκων */
border-bottom: 1px solid black;
}
Με αυτήν τη δήλωση, θα προστεθεί μια οριζόντια γραμμή κάτω από κάθε στοιχείο <th> και <td>, με πάχος 1px και μαύρο χρώμα. Αυτό δημιουργεί οριζόντιες γραμμές διαχωρισμού μεταξύ των γραμμών του πίνακα.
Μπορείτε να προσαρμόσετε το πάχος της γραμμής (1px), τον τύπο της γραμμής (όπως dashed ή dotted) και το χρώμα της γραμμής, αλλάζοντας τις τιμές των ιδιοτήτων border-bottom.
Με αυτόν τον τρόπο, θα προσθέσετε οριζόντιες γραμμές διαχωρισμού μεταξύ των γραμμών του πίνακα, προσφέροντας έναν οργανωμένο και διαχωρισμένο σχεδιασμό.
Μπορείτε να χρησιμοποιήσετε τον επιλογέα :hover στα στοιχεία <tr> για να επισημάνετε τις γραμμές του πίνακα κατά το πέρασμα του ποντικιού πάνω τους. Αυτό δίνει μια εφέ αλλαγής χρώματος ή άλλης μορφής επισήμανσης στις γραμμές του πίνακα κατά την αλληλεπίδραση του χρήστη.
[adinserter block=”4″]
Παρακάτω παρουσιάζεται ένα παράδειγμα:
/* Αλλαγή χρώματος φόντου όταν το ποντίκι είναι πάνω από το <tr> */
tr:hover {
background-color: lightgray;
}
Με αυτήν τη δήλωση, όταν ο χρήστης περάσει το ποντίκι πάνω από μια γραμμή <tr>, η γραμμή θα αλλάξει το φόντο της σε ανοικτό γκρι (lightgray) χρώμα. Μπορείτε να προσαρμόσετε το χρώμα του φόντου ή να προσθέσετε άλλα στυλ, όπως αλλαγή του χρώματος κειμένου ή άλλα εφέ, ανάλογα με τις προτιμήσεις σας.
Για να δημιουργήσετε έναν πίνακα με εναλλασσόμενες γραμμές χρησιμοποιώντας τον επιλογέα nth-child(), μπορείτε να προσθέσετε ένα χρώμα φόντου στις άρτιες (ή περιττές) γραμμές του πίνακα.
Παρακάτω παρουσιάζεται ένα παράδειγμα για τις άρτιες γραμμές:
tr:nth-child(even) {
/* Ορίζει ότι τα άρτια στοιχεία tr θα έχουν φόντο lightgray */
background-color: lightgray;
}
Με αυτήν τη δήλωση, οι άρτιες γραμμές του πίνακα θα έχουν ένα φόντο σε ανοικτό γκρι (lightgray) χρώμα. Μπορείτε να προσαρμόσετε το χρώμα του φόντου ανάλογα με τις προτιμήσεις σας.
Αν θέλετε να επιλέξετε τις περιττές γραμμές αντί των άρτιων, μπορείτε να χρησιμοποιήσετε το nth-child(odd):
tr:nth-child(odd) {
/* Ορίζει ότι τα περριτά στοιχεία tr θα έχουν φόντο lightgray */
background-color: lightgray;
}
Με αυτήν την τροποποίηση, οι περιττές γραμμές θα έχουν το φόντο σε ανοικτό γκρι χρώμα. Επιλέξτε ανάλογα την επιθυμητή επιλογή για να δημιουργήσετε τις εναλλασσόμενες γραμμές στον πίνακα σας.
Το παρακάτω παράδειγμα ορίζει το χρώμα φόντου και το χρώμα κειμένου των στοιχείων <th>:
th {
/* Ορίζει το χρώμα του φόντου ως ανοικτό μπλε */
background-color: lightblue;
/* Ορίζει το χρώμα του κειμένου ως λευκό */
color: white;
}
Με αυτήν τη δήλωση, τα στοιχεία <th> θα έχουν ένα φόντο σε ανοικτό μπλε (lightblue) χρώμα και το κείμενο θα είναι λευκό. Μπορείτε να προσαρμόσετε τα χρώματα σύμφωνα με τις προτιμήσεις σας, αλλάζοντας τις τιμές των ιδιοτήτων background-color και color.
Αυτή η δήλωση μπορεί να προστεθεί στον κανόνα CSS σας για τα <th> στοιχεία του πίνακα σας για να ορίσετε τα επιθυμητά χρώματα φόντου και κειμένου.
Για να δημιουργήσετε έναν αποκρίσιμο πίνακα που θα εμφανίζει έναν οριζόντιο scroll bar εάν η οθόνη είναι πολύ μικρή για να εμφανίσει ολόκληρο το περιεχόμενο, μπορείτε να χρησιμοποιήσετε την ιδιότητα overflow-x: auto; στον περιέκτη του πίνακα.
Παρακάτω παρουσιάζεται ένα παράδειγμα:
.table-container {
/* Επιτρέπει την οριζόντια κύλιση (scroll) για το περιεχόμενο του πίνακα */
overflow-x: auto;
}
Με αυτήν τη δήλωση, η .table-container θα έχει ένα οριζόντιο scroll bar εάν το περιεχόμενο του πίνακα είναι μεγαλύτερο από το πλάτος της οθόνης. Σιγουρευτείτε ότι η .table-container είναι ο περιέκτης που περιλαμβάνει τον πίνακα σας και προσθέστε την κλάση .table-container στο αντίστοιχο στοιχείο του HTML.
Αυτό θα επιτρέψει στον πίνακα να έχει οριζόντια κύλιση και να εμφανίζει το περιεχόμενο που χωράει μόνο μέσα στο πλάτος της οθόνης, ενώ ο χρήστης μπορεί να κάνει scroll για να δει το υπόλοιπο περιεχόμενο του πίνακα.