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

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

Πλαίσιο σε πίνακα

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

Πλαίσιο σε πίνακα
table {
border: 1px solid green;
}
Με το στυλ αυτό ορίζουμε πλαίσιο γύρω από έναν πίνακα

Πλαίσιο στα στοιχεία th και td
th, td {
border: 1px solid green;
}
Με το στυλ αυτό ορίζουμε πλαίσιο γύρω απο τις επικεφαλίδες <th> και τα κελιά <td> ενός πίνακα

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

Στο παρακάτω παράδειγμα ορίζουμε πλαίσιο γύρω από τον πίνακα <table>, αλλά και γύρω από τις επικεφαλίδες <th> και τα κελιά <td> με αποτέλεσμα να δημιουργείται διπλή γραμμή στο πλαίσιο, όπως στο παρακάτω παράδειγμα:
Πλαίσιο στα στοιχεία table, th και td
table, td, th {
border:1px solid green;
}

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

table, td, th {
border:1px solid green;
}
Προσοχή: όταν χρησιμοποιείτε την ιδιότητα border-collapse, βεβαιωθείτε ότι περιελάβατε την ετικέτα <!DOCTYPE> πριν από την <html> γιατί δεν θα έχει τα επιθυμητά αποτελέσματα στον browser Internet Explorer 8 ή νεότερης έκδοσης

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

Μήκος και ύψος του πίνακα

Με τις ιδιότητες width και height ορίζουμε μήκος και ύψος για έναν πίνακα.
Ορισμός μήκους και ύψους ενός πίνακα και των στοιχείων του
table.results {
width: 350px;
}

table.results td {
width: 30px;
}
Πίνακας με συνολικό μήκος 350px και ύψος κελιών 30px

Στοίχιση περιεχομένων του πίνακα

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

Για την οριζόντια στοίχιση χρησιμοποιούμε την ιδιότητα text-align η οποία μπορεί να πάρει μια από τις τιμές: left, center, right
Ορισμός οριζόντιας στοίχισης του περιεχομένου των στοιχείων ενός πίνακα
table.results th {
text-align: center;
}

table.results td {
text-align: right;
}
Πίνακας με στοίχιση στο κέντρο του περιεχόμενου των επικεφαλίδων και με δεξιά στοίχιση του περιεχομένου των κελιών

Για την κάθετη στοίχιση χρησιμοποιούμε την ιδιότητα vertical-align η οποία μπορεί να πάρει μια απο τις τιμές: top, middle, bottom
Πίνακας με κάτω στοίχιση του περιεχόμενου των επικεφαλίδων και με στοίχιση στο κέντρο του περιεχομένου των κελιών
table.results th {
height: 40px;
vertical-align: bottom;
}

table.results td {
height: 40px;
vertical-align: midle;
}
Ορισμός κάθετης στοίχισης του περιεχομένου των στοιχείων ενός πίνακα

Padding του πίνακα

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

table.results td {
padding: 10px;
}
Πίνακας με τις επικεφαλίδες του να έχουν padding 25px και τα κελιά του με padding 10px

Χρώμα στον πίνακα

Μπορούμε να ορίσουμε χρώμα για το πλαίσιο ενός πίνακα, για το κείμενο των επικεφαλίδων και των κελιών του ή το φόντο για τις επικεφαλίδες και τα κελιά. Στο παρακάτω παράδειγμα ορίζουμε κόκκινο χρώμα στο πλαίσιο του πίνακα, πράσινο χρώμα για φόντο στις επικεφαλίδες του και πράσινο χρώμα στο κείμενο των κελιών:
Χρώμα σε πίνακα
table, td, th {
border:1px solid red;
}

th {
background-color: green;
color: white;
}

td {
color: green;
}

Εμφάνιση του τίτλου <caption> σε άλλη πλευρά

Με την HTML ετικέτα <caption> ορίζουμε τίτλο για τον πίνακα. Εξορισμού ο τίτλος εμφανίζεται στην πάνω πλευρά του πίνακα.
Πίνακας με τίτλο
<table border="1">
<caption>Τίτλος του Πίνακα</caption>
<tr>
<th>Επικεφαλίδα 1</th>
<th>Επικεφαλίδα 2</th>
</tr>
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
Με την ιδιότητα caption-side μπορούμε να εμφανίσουμε τον τίτλο στην πάνω, την δεξιά, την κάτω ή την αριστερή πλευρά του πίνακα. Η τιμές που μπορεί να πάρει η ιδιότητα είναι οι: top, right, bottom, left
Ο τίτλος του πίνακα εμφανίζετε στην κάτω πλευρά του
table {
caption-side: bottom;
}

Ιδιότητες της CSS για τους πίνακες

Οι ιδιότητες της 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
Ορίζει αν το περιεχόμενο των κελιών του πίνακα εκτείνεται σε περισότερα του ενός κελιού
Δοκίμασε το

Παραδείγματα

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

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

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

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.