Πίνακες στην CSS (CSS tables)

Πίνακες στην CSS (CSS tables)

Πίνακες στην 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;
}

Αποτέλεσμα

Πίνακες στην CSS

Στο παρακάτω παράδειγμα προσθέτουμε περίγραμμα στον πίνακα και στα κελιά του.

table, th, td {
  border: 1px solid black;
}

Αποτέλεσμα

Πίνακες στην CSS

Στο παρακάτω παράδειγμα προσθέτουμε περίγραμμα μόνο στο κάτω μέρος των κελιών του πίνακα.

th, td {
  border-bottom: 1px solid #ddd;
}

Αποτέλεσμα

Πίνακες στην CSS

Border-collapse

Με την ιδιότητα border-cololapse μπορούμε να προσθέσουμε περίγραμμα στον πίνακα και στα κελιά του, αλλά να εμφανίζεται μία γραμμή περιγράμματος.

Παράδειγμα

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Αποτέλεσμα

Πίνακες στην CSS

Width και Height

Με τις ιδιότητες width και height ορίζουμε το πλάτος και το ύψος του πίνακα και των κελιών του. Οι τιμές που μπορούμε να δώσουμε σε αυτές τις ιδιότητες είναι σε ποσοστό (%) και σε pixels.

Παράδειγμα

table {
  width: 100%;
}
th {
  height: 50px;
}

Αποτέλεσμα

Πίνακες στην CSS

Text-align

Με την ιδιότητα text-align ορίζουμε την οριζόντια ευθυγράμμιση του περιεχομένου εντός των κελιών του πίνακα. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι left, center, right. Από προεπιλογή το περιεχόμενο της ετικέτας <th> είναι ευθυγραμμισμένο στο κέντρο (center) και της ετικέτας <td> είναι ευθυγραμμισμένο αριστερά (left).

Παράδειγμα

th {
  text-align: left;
}

Αποτέλεσμα

Πίνακες στην CSS

Vertical-align

Με την ιδιότητα vertical-align ορίζουμε την κάθετη ευθυγράμμιση του περιεχομένου εντός των κελιών του πίνακα. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι top, middle, bottom. Από προεπιλογή το περιεχόμενο των ετικετών <th> και <td> είναι ευθυγραμμισμένο στη μέση (middle).

Παράδειγμα

td {
  height: 50px;
  vertical-align: bottom;
}

Αποτέλεσμα

Πίνακες στην CSS

Padding

Με την ιδιότητα padding ρυθμίζουμε την απόσταση του περιεχομένου των κελιών από το περίγραμμα του πίνακα.

Παράδειγμα

th, td {
  padding: 15px;
  text-align: left;
}

Αποτέλεσμα

Πίνακες στην CSS

Color και Background-color

Με την ιδιότητα color ορίζουμε το χρώμα του περιεχομένου των κελιών του πίνακα και με την ιδιότητα background-color ορίζουμε το χρώμα φόντου των κελιών.

Παράδειγμα

th {
  background-color: #4CAF50;
  color: white;
}

Αποτέλεσμα

Πίνακες στην CSS

Hover

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

Παράδειγμα

tr:hover {
  background-color: #f5f5f5
}

Αποτέλεσμα

Πίνακες στην CSS

Nth-child

Με την ιδιότητα nth-child προσθέτουμε χρώμα στις ζυγές ή στις μονές γραμμές του πίνακα, με αποτέλεσμα αυτός να εμφανίζεται ριγέ.

Παράδειγμα

tr:nth-child(even) {
  background-color: #f2f2f2
}

Αποτέλεσμα

Πίνακες στην CSS

Απάντηση

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