Πίνακες στην CSS
Αν προσθέσουμε πίνακα σε μία ιστοσελίδα, μπορούμε να μορφοποιήσουμε την εμφάνιση του με τη CSS. Σημαντικές ιδιότητες για τους πίνακες στην CSS είναι οι εξής:
- border
- border-collapse
- width
- height
- text-align
- vertcal-align
- padding
- color
- background-color
- hover
- nth-child
Border
Με την ιδιότητα border για τους πίνακες στην CSS μπορούμε να προσθέσουμε περίγραμμα σε αυτούς και τα κελιά τους.
Στο παρακάτω παράδειγμα προσθέτουμε περίγραμμα στον πίνακα.
table {
border: 1px solid black;
}Αποτέλεσμα
Στο παρακάτω παράδειγμα προσθέτουμε περίγραμμα στον πίνακα και στα κελιά του.
table, th, td {
border: 1px solid black;
}Αποτέλεσμα
Στο παρακάτω παράδειγμα προσθέτουμε περίγραμμα μόνο στο κάτω μέρος των κελιών του πίνακα.
th, td {
border-bottom: 1px solid #ddd;
}Αποτέλεσμα
Border-collapse
Με την ιδιότητα border-cololapse μπορούμε να προσθέσουμε περίγραμμα στον πίνακα και στα κελιά του, αλλά να εμφανίζεται μία γραμμή περιγράμματος.
Παράδειγμα
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}Αποτέλεσμα
Width και Height
Με τις ιδιότητες width και height ορίζουμε το πλάτος και το ύψος του πίνακα και των κελιών του. Οι τιμές που μπορούμε να δώσουμε σε αυτές τις ιδιότητες είναι σε ποσοστό (%) και σε pixels.
Παράδειγμα
table {
width: 100%;
}
th {
height: 50px;
}Αποτέλεσμα
Text-align
Με την ιδιότητα text-align ορίζουμε την οριζόντια ευθυγράμμιση του περιεχομένου εντός των κελιών του πίνακα. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι left, center, right. Από προεπιλογή το περιεχόμενο της ετικέτας <th> είναι ευθυγραμμισμένο στο κέντρο (center) και της ετικέτας <td> είναι ευθυγραμμισμένο αριστερά (left).
Παράδειγμα
th {
text-align: left;
}Αποτέλεσμα
Vertical-align
Με την ιδιότητα vertical-align ορίζουμε την κάθετη ευθυγράμμιση του περιεχομένου εντός των κελιών του πίνακα. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι top, middle, bottom. Από προεπιλογή το περιεχόμενο των ετικετών <th> και <td> είναι ευθυγραμμισμένο στη μέση (middle).
Παράδειγμα
td {
height: 50px;
vertical-align: bottom;
}Αποτέλεσμα
Padding
Με την ιδιότητα padding ρυθμίζουμε την απόσταση του περιεχομένου των κελιών από το περίγραμμα του πίνακα.
Παράδειγμα
th, td {
padding: 15px;
text-align: left;
}Αποτέλεσμα
Color και Background-color
Με την ιδιότητα color ορίζουμε το χρώμα του περιεχομένου των κελιών του πίνακα και με την ιδιότητα background-color ορίζουμε το χρώμα φόντου των κελιών.
Παράδειγμα
th {
background-color: #4CAF50;
color: white;
}Αποτέλεσμα
Hover
Με την ιδιότητα hover όταν ο δείκτης του ποντικιού βρίσκεται πάνω από μία γραμμή του πίνακα, τότε αυτή αλλάζει χρώμα.
Παράδειγμα
tr:hover {
background-color: #f5f5f5
}Αποτέλεσμα
Nth-child
Με την ιδιότητα nth-child προσθέτουμε χρώμα στις ζυγές ή στις μονές γραμμές του πίνακα, με αποτέλεσμα αυτός να εμφανίζεται ριγέ.
Παράδειγμα
tr:nth-child(even) {
background-color: #f2f2f2
}Αποτέλεσμα
