Υποενότητα 5.2: CSS σε Πίνακες

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

Οι πίνακες, όπως κάθε στοιχείο HTML, μπορούν να μορφοποιηθούν χρησιμοποιώντας το CSS.
Ορισμένες ιδιότητες κοινής χρήσης CSS για πίνακες είναι:

• border, που καθορίζει το περίγραμμα του πίνακα
• border-collapse, που συγχωνεύει τα περιγράμματα των κελιών
• color, που αλλάζει το χρώμα του κειμένου
• width, που καθορίζει το πλάτος του πίνακα
• height, που καθορίζει το ύψος του πίνακα
• padding, που καθορίζει το διάκενο του πίνακα
• text‐align για οριζόντια στοίχιση κειμένου
• vertical‐align για κατακόρυφη στοίχιση κειμένου

Ένα παράδειγμα πίνακα με 2 κελιά σε 3 σειρές είναι:

Ας εφαρμόσουμε τους εξής κανόνες CSS :

<style>
  table, td, th {border:1px solid black; padding:15px}
  td {color:purple}
</style>

Δείτε το αποτέλεσμα:

Ας εφαρμόσουμε επιπλέον κανόνες CSS :

<style>
  table {width: 60%;}
  table, td, th {
    border-collapse: collapse;
    border:1px solid black; 
    padding:15px; 
    text-align: center;
    padding: 8px;
  }
  td {color:purple}
  th {
    background-color: blue; 
    color: white;
  }
</style>

Δείτε το αποτέλεσμα:

Εφαρμογή κανόνων κλάσεων

Παρόμοια με κάθε στοιχείο HTML, μπορείτε να εφαρμόσετε τάξεις σε μια συγκεκριμένη ετικέτα ενός πίνακα.

Σκεφτείτε, πώς θα μπορούσατε να δημιουργήσετε τον πίνακα που εμφανίζεται στην εικόνα;

Κώδικας:

Περισσότερες πληροφορίες:  https://www.w3schools.com/css/css_table.asp

Δείτε τους Hoverable και Striped Tables. Έχουν πολύ ενδιαφέρον!

Άσκηση

Exercise

1. Ανοίξτε το αρχείο exersice05.1.01.html στον φάκελο "Exercises" στον επεξεργαστή κώδικα.
2. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: