Πίνακες

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

Μάθε περισσότερα για τους Πίνακες

Με την ιδιότητα border μπορούμε να ορίσουμε πλαίσιο σε έναν πίνακα.



Μπορείτε να δείτε περισσότερους τρόπους ορισμού πλαισίου στην ενότητα Πλαίσια

Στο παρακάτω παράδειγμα ορίζουμε πλαίσιο γύρω από τον πίνακα <table>, αλλά και γύρω από τις επικεφαλίδες <th> και τα κελιά <td> με αποτέλεσμα να δημιουργείται διπλή γραμμή στο πλαίσιο, όπως στο παρακάτω παράδειγμα:

Στην περίπτωση αυτή, αν θέλουμε να εμφανίζεται μονή γραμμή στο πλαίσιο, χρησιμοποιούμε την ιδιότητα border-collapse με τιμή collapse για τον πίνακα <table>, όπως στο παρακάτω παράδειγμα:

Η ιδιότητα border-collapseμπορεί να πάρει δύο τιμές:

• collapse (εμφανίζει τα πλαίσια των στοχείων ενός πίνακα (<td>, <tr>, <caption>, κτλ) σαν μια μονή γραμμή)
• seperate (εμφανίζει τα πλαίσια των στοχείων ενός πίνακα σαν ξεχωριστή γραμμή. Αν δεν υπάρχει η ιδιότητα αυτή στο στυλ του table, τότε η default τιμή είναι η seperate

Με τις ιδιότητες width και height ορίζουμε μήκος και ύψος για έναν πίνακα.

Μπορούμε να ορίσουμε την οριζόντια και κάθετη στοίχιση του περιεχομένου των στοιχείων ενός πίνακα (<td>, <tr>, <caption>, κτλ).

Για την οριζόντια στοίχιση χρησιμοποιούμε την ιδιότητα text-align η οποία μπορεί να πάρει μια από τις τιμές: left, center, right

Για την κάθετη στοίχιση χρησιμοποιούμε την ιδιότητα vertical-align η οποία μπορεί να πάρει μια απο τις τιμές: top, middle, bottom

Γενικά, το padding ενός στοιχείου είναι ο χώρος ανάμεσα στο περιεχόμενο του στοιχείου και στο πλαίσιο του. Για περισσότερα διαβάστε την ενότητα Box model και την ενότητα Περιθώριο (padding). Παρακάτω ορίζουμε το padding των επικεφαλίδων και των κελιών ενός πίνακα:

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

Με την HTML ετικέτα <caption> ορίζουμε τίτλο για τον πίνακα. Εξορισμού ο τίτλος εμφανίζεται στην πάνω πλευρά του πίνακα.
Με την ιδιότητα caption-side μπορούμε να εμφανίσουμε τον τίτλο στην πάνω, την δεξιά, την κάτω ή την αριστερή πλευρά του πίνακα. Η τιμές που μπορεί να πάρει η ιδιότητα είναι οι: top, right, bottom, left

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

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης πινάκων:

Ιδιότητα	Τιμές	Περιγραφή
border-collapse	collapse separate	Ορίζει πως θα εμφανιστεί το πλαίσιο του πίνακα: collapse: το πλαίσιο θα εμφανιστεί σαν απλή γραμμή separate: το πλαίσιο θα εμφανιστεί σαν την κλασική γραμμή της HTML. Εδώ θα εμφανιστεί μόνο το εξωτερικό πλαίσιο και όχι το πλαίσιο μέσα στα κελιά Δοκίμασε το
border-spacing	μήκος μήκος	Ορίζει την κενή απόσταση γύρω από το περιεχόμενο του κελιού. Στην περίπτωση που ορίσουμε μια τιμή για το μήκος της κενής απόστασης, τότε αφήνει την ίδια κενή απόσταση από όλες τις πλευρές του κελιού. Αν ορίσουμε δύο τιμές, τότε η πρώτη τιμή αναφέρεται στην κενή απόσταση αριστερά και δεξιά του κελιού και η δεύτερη τιμή αναφέρεται στην κενή απόσταση επάνω και κάτω του κελιού. Προσοχή:Λειτουργεί μόνο όταν στο ίδιο στυλ υπάρχει η ιδιότητα border-collapse με την τιμή separate Δοκίμασε το
caption-side	top bottom left right	Ορίζει σε ποια πλευρά του πίνακα θα εμφανιστεί η επικεφλίδα (<caption>) Δοκίμασε το
empty-cells	show hide	Ορίζει αν θα εμφανίζονται ή όχι τα κενά κελιά του πίνακα Προσοχή:Λειτουργεί μόνο όταν στο ίδιο στυλ υπάρχει η ιδιότητα border-collapse με την τιμή separate Δοκίμασε το
table-layout	auto fixed	Ορίζει αν το περιεχόμενο των κελιών του πίνακα εκτείνεται σε περισότερα του ενός κελιού Δοκίμασε το

Ορισμός περιγράμματος στα κελιά ενός πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε το στυλ του περιγράμματος των κελιών ενός πίνακα.

Ορισμός περιγράμματος σε ολόκληρο πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε το στυλ του περιγράμματος ενός πίνακα

Ορισμός περιγράμματος σε παράγραφο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε το στυλ του περιγράμματος μιας παραγράφου